How to rotate a MapImage with ArcGIS Javascript AP

2019-09-12 14:28发布

站内问答 / JavaScript
1779 1 5

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>

1条回答
Animai°情兽
2楼-- · 2019-09-12 15:14

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 = 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 :)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)