PictureMarkerSymbol не работает должным образом - PullRequest
Новая
       5

PictureMarkerSymbol не работает должным образом

0 голосов
/ 07 мая 2019

Здесь я использую библиотеку JavaScript ArcGIS. Я добавляю мигающую точку на карту. Поэтому я использую 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

Но ниже выводится код.

enter image description here

Ответы [ 2 ]

1 голос
/ 18 мая 2019

Из документации esri на PictureMarkerSymbols

Известные ограничения :

  • Отображение путей SVG в виде изображений не поддерживаетсяв IE11.
  • Анимированные изображения GIF / PNG не поддерживаются .См. Пользовательский вид слоя WebGL , чтобы узнать, как этого добиться с помощью WebGL.

Образец-песочница демонстрирует, что выищем сделать.

1 голос
/ 07 мая 2019 
 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>

enter image description here

...