How To Rotate A Mapimage With Arcgis Javascript Api
I created a map and added a MapImage trough a MapImageLayer. Now I want to rotate the image by a certain angle on the map. How is this possible? Or is there an other way to add a r
Solution 1:
Well, Using Css we can try to rotate the image.
However esri esri/layers/MapImageLayer expect className property where you can pass your expected css properties.
This CSS properties applies on the whole layer not only at one image.
Below running code will explain how to achieve this:
var map;
require(["esri/geometry/Extent", "esri/geometry/geometryEngine", "esri/layers/MapImageLayer", "esri/layers/MapImage",
"esri/map", "dojo/domReady!"
], function(Extent, geometryEngine, MapImageLayer, MapImage, Map) {
map = newMap("map", {
basemap: "topo",
center: [-80, 25],
zoom: 4
});
var mil = newMapImageLayer({
'id': 'image_layer',
'className':'rotateClass'
});
var mi = newMapImage({
'extent': {
'xmin': -8864908,
'ymin': 3085443,
'xmax': -8062763,
'ymax': 3976997,
'spatialReference': {
'wkid': 3857
}
},
'href': 'https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png'
});
mil.addImage(mi);
map.addLayer(mil);
});html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.rotateClass {
-ms-transform: rotate(15deg) !important; /* IE 9 */
-webkit-transform: rotate(15deg) !important; /* Chrome, Safari, Opera */transform: rotate(15deg) !important;
}<!DOCTYPE html><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><metaname="viewport"content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>Simple Image Service</title><linkrel="stylesheet"href="https://js.arcgis.com/3.16/esri/css/esri.css" /><scriptsrc="https://js.arcgis.com/3.16/"></script></head><body><divid="map"></div></body></html>Hope this will help you :)
Post a Comment for "How To Rotate A Mapimage With Arcgis Javascript Api"