Question

我创建了一张地图，并通过MapImage添加了MapImageLayer。现在我想在地图上以某个角度旋转图像。这怎么可能？或者还有另一种方法可以将旋转的图像添加到地图中吗？

＆＃13;

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);
});

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<!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>

＆＃13;

Answer 1

好吧，使用Css我们可以尝试旋转图像。

然而，esri esri / layers / MapImageLayer 期望className属性，您可以在其中传递预期的css属性。

此CSS属性不仅适用于整个图层，还适用于一个图像。

以下运行代码将解释如何实现此目的：

＆＃13;

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);
});

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

希望这会对您有所帮助:)

如何使用ArcGIS Javascript API旋转MapImage

1 个答案: