如何使用ArcGIS Javascript API旋转MapImage
How to rotate a MapImage with ArcGIS Javascript API
我创建了一个映射,并通过MapImageLayer
添加了一个MapImage
。现在我想在地图上将图像旋转一定角度。这怎么可能?或者还有其他方法可以将旋转后的图像添加到地图中吗?
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我们可以尝试旋转图像。
但是esriesri/layers/MapImageLayer期望className属性,您可以在其中传递期望的css属性。
这个CSS属性应用于整个层,而不仅仅是一个图像。
下面的运行代码将解释如何实现这一点:
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>
希望这将帮助您:)
相关文章:
- 知道为什么我的旋转木马不会自动更改图片吗
- 顺时针旋转Svg元件
- 将鼠标旋转限制为特定的度数
- 旋转后拖动对象
- 禁用旋转木马中的下一个按钮和上一个按钮
- 手动创建旋转活动指示器
- 如何在容器中定位旋转的图像
- 在轴上旋转SVG图像
- 绕z轴旋转时出现iOS陀螺仪错误
- 旋转按钮[HTML][JS]
- 在JS中围绕旋转对象旋转对象
- Threejs-围绕中心旋转对象
- 旋转木马;启用内容安全策略时无法工作
- 如何在使用Kinetic拖动同一对象后,在旋转动画中保持先前的偏移
- 菜单切换时箭头旋转
- 较大引导转盘中的较小引导转盘-较小引导转盘上的旋转功能问题
- 需要关于随机图像旋转的指南
- 根据摄影机视图更改计算对象旋转
- 使用KineticJS变换(移动/缩放/旋转)形状
- 如何使用ArcGIS Javascript API旋转MapImage