Question

这里我正在使用ArcGIS javascript库。我在地图上添加了闪烁的点。因此，我正在使用PictureMarkerSymbol在“地图”上创建图形，但是它的运行异常。

这是我用来在地图上创建图形的代码：-

<!DOCTYPE html>
<html>
  <head>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />
  </head>

  <body>
    <div id="viewDiv"></div>

     <script src="https://js.arcgis.com/4.11/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/geometry/Point",
        "esri/Basemap"
      ], function(
        Map,
        MapView,
        Graphic,
        Point,
        Basemap
      ) {
        var map = new Map({
          basemap: "dark-gray"
        });

        var view = new MapView({
          center: [-80, 35],
          container: "viewDiv",
          map: map,
          zoom: 5,
        });

        let point =  new Point({
          latitude: "42.07611900",
          longitude: "-71.42270700"
        });

        // Create a graphic and add the geometry and symbol to it
        var pointGraphic = new Graphic({
          geometry: point,
          symbol: {
            type: "picture-marker", // autocasts as new SimpleMarkerSymbol()
            url: "https://cdn.dribbble.com/users/115303/screenshots/1367782/loading.gif",
            width: "50px",
            height: "50px"
          }
        });

        view.graphics.add(pointGraphic);
      });
    </script>
  </body>
</html>

当我执行以上代码时，它在地图上显示黑点。

这是我要在地图上显示的带有动画的图像。

https://cdn.dribbble.com/users/115303/screenshots/1367782/loading.gif

但是下面是代码的输出。

Answer 1

 Your code working fine. but your symbol url 
 "http://cdn.dribbble.com/users/115303/screenshots/1367782/loading.gif" is not 
 supported. kindly change your symbol url and check. 

  <!DOCTYPE html>
  <html>
    <head>

     <link rel="stylesheet" 
         href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
       />
  </head>

   <body>
    <div id="viewDiv"></div>

    <script src="https://js.arcgis.com/4.11/"></script>

<style>
  html,
  body,
  #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

<script>
  require([
    "esri/Map",
    "esri/views/MapView",
    "esri/Graphic",
    "esri/geometry/Point",
    "esri/Basemap"
  ], function(
    Map,
    MapView,
    Graphic,
    Point,
    Basemap
  ) {
    var map = new Map({
      basemap: "dark-gray"
    });

    var view = new MapView({
      center: [-80, 35],
      container: "viewDiv",
      map: map,
      zoom: 5,
    });

    let point =  new Point({
      latitude: "42.07611900",
      longitude: "-71.42270700"
    });

    // Create a graphic and add the geometry and symbol to it
    var pointGraphic = new Graphic({
      geometry: point,
      symbol: {
        type: "picture-marker", // autocasts as new PictureMarkerSymbol()
        url: "https://developers.arcgis.com/labs/images/bluepin.png", 
        width: "25px",
        height: "25px"
      }
    });

    view.graphics.add(pointGraphic);
  });
   </script>
  </body>
  </html>

Answer 2

从esri documentation on PictureMarkerSymbols

已知限制：


IE11不支持将SVG路径呈现为图像。

不支持动画gif / png图像。请参阅Custom WebGL layer view示例，以了解如何使用WebGL完成此操作。

sample code sandbox演示了您要做什么。

PictureMarkerSymbol无法正常工作

2 个答案: