如何使用 ArcGIS Javascript API 旋转 MapImage [英] How to rotate a MapImage with ArcGIS Javascript API
问题描述
我创建了一张地图并通过 MapImageLayer 添加了一个 MapImage.现在我想在地图上将图像旋转某个角度.这怎么可能?或者还有其他方法可以将旋转的图像添加到地图中吗?
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 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>推荐答案
好吧，使用 Css 我们可以尝试旋转图像.
Well, Using Css we can try to rotate the image.
但是 esri esri/layers/MapImageLayer 期望 className 属性，您可以在其中传递预期的 css 属性.
However esri esri/layers/MapImageLayer expect className property where you can pass your expected css properties.
此 CSS 属性不仅适用于一张图片，而且适用于整个图层.
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 = 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>希望这对你有帮助:)
这篇关于如何使用 ArcGIS Javascript API 旋转 MapImage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
