如何使用ArcGIS Javascript API旋转MapImage
[英]How to rotate a MapImage with ArcGIS Javascript API
问题描述
I created a map and added a MapImage trough a MapImageLayer . 
我创建了地图，并通过MapImage添加了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 rotated image to a 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>
1 个解决方案
解决方案1
2 已采纳 2016-04-15 14:31:37
Well, Using Css we can try to rotate the image. 好吧，使用CSS我们可以尝试旋转图像。
However esri esri/layers/MapImageLayer expect className property where you can pass your expected css properties. 但是esri esri / layers / MapImageLayer期望className属性，您可以在其中传递期望的CSS属性。
This CSS properties applies on the whole layer not only at one image. 这个CSS属性不仅适用于一张图片，而且适用于整个图层。
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 = 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 this will help you :) 希望这个能对您有所帮助 ：）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.