Hi
I am using v1.19 and JS API 4.33 and was trying to develop custom widget similar to this https://developers.arcgis.com/javascript/latest/sample-code/layers-medialayer-interactive/live/
My steps
a. upload image file using drag/drop functionality
b. geoprocess the image
c. Need to perform tranform interaction options (dr
import { React, AllWidgetProps, jsx } from 'jimu-core';
import { JimuMapViewComponent, JimuMapView } from 'jimu-arcgis';
import { Button } from 'jimu-ui';
import MediaLayer from '@arcgis/core/layers/MediaLayer';
import ImageElement from '@arcgis/core/layers/support/ImageElement';
import ExtentAndRotationGeoreference from '@arcgis/core/layers/support/ExtentAndRotationGeoreference';
import Extent from '@arcgis/core/geometry/Extent';
import SpatialReference from '@arcgis/core/geometry/SpatialReference';
interface State {
jimuMapView: JimuMapView | null;
}
export default class Widget extends React.PureComponent<AllWidgetProps<any>, State> {
state: State = {
jimuMapView: null
};
mediaLayer: MediaLayer | null = null;
imageElement: ImageElement | null = null;
onImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file || !this.state.jimuMapView) return;
const reader = new FileReader();
reader.onload = () => {
const imageUrl = reader.result as string;
const view = this.state.jimuMapView.view;
const extent = new Extent({
xmin: -118.818984489994,
ymin: 34.0137559967283,
xmax: -118.806796597377,
ymax: 34.0215816298725,
spatialReference: SpatialReference.WGS84
});
const georef = new ExtentAndRotationGeoreference({ extent });
this.imageElement = new ImageElement({
image: imageUrl,
georeference: georef
});
this.mediaLayer = new MediaLayer({
source: [this.imageElement],
title: 'Uploaded Image',
interactionOptions: {
enable: true,
translateEnabled: true,
rotationEnabled: true,
scaleEnabled: true
}
});
view.map.add(this.mediaLayer);
view.whenLayerView(this.mediaLayer).then((layerView: any) => {
layerView.interactive = true;
layerView.selectedElement = this.imageElement;
});
};
reader.readAsDataURL(file);
};
clearImage = () => {
const view = this.state.jimuMapView?.view;
if (view && this.mediaLayer) {
view.map.remove(this.mediaLayer);
this.mediaLayer = null;
this.imageElement = null;
}
};
render() {
return (
<div className="widget-interactive-image" style={{ padding: '1rem' }}>
<input type="file" accept="image/png, image/jpeg" onChange={this.onImageUpload} />
<Button onClick={this.clearImage} style={{ marginTop: '10px' }}>
Clear Image
</Button>
<JimuMapViewComponent
useMapWidgetId={this.props.useMapWidgetIds?.[0]}
onActiveViewChange={(jmv: JimuMapView) => this.setState({ jimuMapView: jmv })}
/>
</div>
);
}
}
ag/Resize/roate)
Although i implemented above fes issues i encountered
1. rotation is not working
2. Resize/Drag works only one time and it stops working
3. No Errors though but tool hangs and shows inactive on the image
