How to rotate a MapImage with ArcGIS Javascript API

问题

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:

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

来源：https://stackoverflow.com/questions/36453652/how-to-rotate-a-mapimage-with-arcgis-javascript-api

标签

javascript

arcgis

geo

arcgis-js-api