Добавление векторного слоя в ArcGIS - PullRequest
Новая
       31

Добавление векторного слоя в ArcGIS

0 голосов
/ 25 апреля 2020

Я пытаюсь добавить графику на стороне клиента в векторный слой на карте, используя следующий код, но на карте ничего не отображается: 

    function CreateFeatureLayer()  {
        featureLayer=new FeatureLayer({ 
            source:[],
            objectIdField:"OBJECTID",
            geometryType:"point",
            spatialReference: { wkid: 4326 },
            fields:[ { name:"OBJECTID", type:"oid" }, { name:"name", type:"string" }, { name:"ktypemid", type:"string" }, { name:"kmid", type:"string" }],
            renderer: { type:"simple",  symbol:{ type: "web-style",  styleName: "Esri2DPointSymbolsStyle",  name: "landmark" } },
            popupTemplate: { title: "{Name}"  }
            });

        map.add(featureLayer);

        const data=[{ LATITUDE: 37.6251, LONGITUDE: -119.085, TYPE: "Title",  NAME: "Name" }];

        let graphics=[];
        let i=0,graphic;
        for (i=0;i<data.length;i++) {
            graphic=new Graphic({
                geometry: { type: "point", latitude: data[i].LATITUDE, longitude: data[i].LONGITUDE },
                attributes: data[i]
                });
            graphics.push(graphic);
            }

        app.featureLayer.applyEdits(graphics);
    }

Не уверен, что я делаю неправильно, смоделировав пример. Я также хочу иметь возможность использовать мое собственное растровое изображение, а не значок ESRI.

1 Ответ

0 голосов
/ 26 апреля 2020

Я думаю, что ваша проблема может быть при звонке applyEdits. Эти функции принимают в качестве параметра объект с функциями и приложениями для добавления, обновления или удаления. Так что в вашем примере это должно быть, 

app.featureLayer.applyEdits({addFeatures: graphics});

ArcGIS API - FeatureLayer applyEdits

В любом случае, основываясь на одном из примеров, я сделал этот код. Это может помочь вам

1010 * 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>FeatureLayer Points Icons - 4.15</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/core/promiseUtils",
        "esri/Graphic",
        "esri/geometry/Point",
      ], function(
        Map,
        MapView,
        FeatureLayer,
        promiseUtils,
        Graphic,
        Point
      ) {
        function getRandomNumber(min, ref) {
          return Math.random() * ref + min;
        }

        function getGraphics() {
          const graphics = [];
          let location = null;
          // generate 6 random points features
          for (let i = 0; i <= 5; i++) {
            location = new Point({
              latitude: getRandomNumber(10, 50),
              longitude: -getRandomNumber(50, 50)
            });
            graphics.push(
              new Graphic({
                geometry: location,
                attributes: {
                  OBJECTID: i,
                  name: `F${i}`
                }
              })
            );
          }
          return graphics;
        }

        const graphics = getGraphics();

        function popupTemplateContent(feature) {
          const location = feature.graphic.geometry;
          return `lat:${location.latitude.toFixed(2)} lon:${location.longitude.toFixed(2)}`;
        }

        const view = new MapView({
          map: new Map({
            basemap: "gray-vector"
          }),
          container: "viewDiv",
          zoom: 2,
          center: [-75, 35]
        });

        view
          .when()
          .then(createLayer)
          .then(addToView)
          .catch(function(e) {
            console.error("Creating FeatureLayer failed", e);
          });

        function createLayer() {
          return new FeatureLayer({
            source: graphics,
            objectIdField: "OBJECTID",
            fields: [
              {
                name: "OBJECTID",
                type: "oid"
              },
              {
                name: "name",
                type: "string"
              }
            ],
            popupTemplate: {
              title: '{name}',
              content: popupTemplateContent
            },
            renderer: {
              type: "unique-value",
              field: "OBJECTID",
              defaultSymbol: { type: "simple-fill" },
              uniqueValueInfos: [{
                value: "0",
                symbol: {
                  type: "picture-marker",
                  url: " http://static.arcgis.com/images/Symbols/Cartographic/esriCartographyMarker_98.png",
                  width: "32px",
                  height: "32px"
                }
              }, {
                value: "1",
                symbol: {
                  type: "picture-marker",
                  url: " http://static.arcgis.com/images/Symbols/Cartographic/esriCartographyMarker_98_Red.png",
                  width: "32px",
                  height: "32px"
                }
              }, {
                value: "2",
                symbol: {
                  type: "picture-marker",
                  url: " http://static.arcgis.com/images/Symbols/Cartographic/esriCartographyMarker_98_Green.png",
                  width: "32px",
                  height: "32px"
                }
              }, {
                value: "3",
                symbol: {
                  type: "picture-marker",
                  url: " http://static.arcgis.com/images/Symbols/Cartographic/esriCartographyMarker_98_Blue.png",
                  width: "32px",
                  height: "32px"
                }
              }, {
                value: "4",
                symbol: {
                  type: "picture-marker",
                  url: " http://static.arcgis.com/images/Symbols/Cartographic/esriCartographyMarker_98_White.png",
                  width: "32px",
                  height: "32px"
                }
              }, {
                value: "5",
                symbol: {
                  type: "picture-marker",
                  url: " http://static.arcgis.com/images/Symbols/Cartographic/esriCartographyMarker_98_Yellow.png",
                  width: "32px",
                  height: "32px"
                }
              }]
            }
          });
        }

        function addToView(layer) {
          view.map.add(layer);
        }
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Наконец, в моем комментарии я на мгновение растерялся, поэтому я спрашиваю вас об использовании FeatureLayer вместо GraphicLayer. Мой плохой :) .. Это рекомендуемый способ с новым API.

...