i created map , added mapimage trough mapimagelayer. want rotate image angle on map. how possible? or there other way add rotated image map?
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 = new map("map", { basemap: "topo", center: [-80.93, 31.47], zoom: 4 }); var mil = new mapimagelayer({ 'id': 'image_layer' }); var mi = new mapimage({ '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; }<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>simple image service</title> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css" /> <script src="https://js.arcgis.com/3.16/"></script> </head> <body> <div id="map"></div> </body> </html>
well, using css can try rotate image.
however esri esri/layers/mapimagelayer expect classname property can pass expected css properties.
this css properties applies on whole layer not @ 1 image.
below running code explain how 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 = new map("map", { basemap: "topo", center: [-80, 25], zoom: 4 }); var mil = new mapimagelayer({ 'id': 'image_layer', 'classname':'rotateclass' }); var mi = new mapimage({ '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> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>simple image service</title> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css" /> <script src="https://js.arcgis.com/3.16/"></script> </head> <body> <div id="map"></div> </body> </html>hope :)
Comments
Post a Comment