将位置数据馈送到 Esri 地图并在 Esri 地图上将位置显示为精确点

Question

我想将美国某些州的一些位置数据（纬度、经度等）传递给 ArcGIS Esri 地图，并在 Esri 地图中将这些位置显示为精确点（如 Google地图）。目前，我的 Angular 代码如下，我找不到任何 ArcGIS 文档关于向 Esri 地图提供数据。

如果您对如何实现此目标有任何想法，请告诉我。

esri-map-component.html

<!-- Map Div -->
<div #mapViewNode></div>

esri-map-component.ts

// The <div> where the map is loaded
 public featureLayerUrl = environment.parcelAtlasUrl;
 public webMapId = environment.webMapId;
 @ViewChild('mapViewNode', { static: true }) private mapViewEl: ElementRef;

ngOnInit(): void {
 this.getEsriToken();
}

getEsriToken(){
 this.esriMapService.getEsriAccessToken().subscribe(
  res => {
    this.esriToken = res.token;
    if(res.token){
      this.initializeMap(this.esriToken);
    }
  },
  error =>{
  },

  () => {
  }
 );
}

// Initialize MapView and return an instance of MapView
initializeMap(esriToken) {
const container = this.mapViewEl.nativeElement;
config.apiKey = esriToken;

//load the webMap
const webmap = new WebMap({
      portalItem: {
        id: this.webMapId
      }
    });

//load the ParcelAtlas feature layer
const layer = new FeatureLayer({
    url: this.featureLayerUrl,
    });
  webmap.add(layer);


const view = new MapView({
  container,
  map: webmap
});
this.view = view;
return this.view.when();

Answer 1

您可以通过多种方式将数据添加到地图中。您可以使用 FeatureLayer 或 GraphicLayer，甚至可以将其添加到视图图形集合中。

我建议您在我为您制作的这个示例中使用 FeatureLayer。虽然它没有使用 Angular，但您可以轻松地将其转换为您的代码。要在客户端上使用 FeatureLayer 数据，您需要：

将 source 属性设置为 Graphic 的集合，在示例中我使用 Object 的数组（它自动转换为预期），
设置geometryType，本例为point，
和 objectIDField.

我假设你一开始就有数据，如果你在运行应用的时候需要add/update/delete数据，你可以使用applyEdits的方法[=11] =].

ArcGIS JS API - FeatureLayer

示例：

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Pinpoint Example</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

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

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/popup/content/CustomContent"
        ], function (Map, MapView, FeatureLayer, CustomContent) {

            const data = [
                {
                    lat: 32.727482,
                    lon: -117.1560632,
                    name: "Automotive Museum",
                    addrs: "2080 Pan American Plaza, San Diego, CA 92101, United States",
                    url: "http://sdautomuseum.org/"
                },
                {
                    lat: 32.7136902,
                    lon: -117.1763293,
                    name: "USS Midway Museum",
                    addrs: "910 N Harbor Dr, San Diego, CA 92101, United States",
                    url: "http://www.midway.org/"
                },
                {
                    lat: 32.7641112,
                    lon: -117.2284536,
                    name: "SeaWorld",
                    addrs: "500 Sea World Dr, San Diego, CA 92109, United States",
                    url: "https://seaworld.com/san-diego"
                },
                {
                    lat: 32.7360032,
                    lon: -117.1557741,
                    name: "Zoo",
                    addrs: "2920 Zoo Dr, San Diego, CA 92101, United States",
                    url: "https://zoo.sandiegozoo.org/"
                }
            ];

            const map = new Map({
                basemap: "streets-navigation-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 12,
                center: {
                    latitude: 32.7353,
                    longitude: -117.1490
                }
            });

            const layer = new FeatureLayer({
                source: data.map((d, i) => (
                    {
                        geometry: {
                            type: "point",
                            longitude: d.lon,
                            latitude: d.lat
                        },
                        attributes: {
                            ObjectID: i,
                            ...d
                        }
                    }
                )),
                fields: [
                    {
                        name: "ObjectID",
                        alias: "ObjectID",
                        type: "oid"
                    },
                    {
                        name: "name",
                        alias: "Name",
                        type: "string"
                    },
                    {
                        name: "addrs",
                        alias: "addrs",
                        type: "string"
                    },
                    {
                        name: "url",
                        alias: "url",
                        type: "string"
                    },
                    {
                        name: "lat",
                        alias: "Latitude",
                        type: "double"
                    },
                    {
                        name: "lon",
                        alias: "Longitude",
                        type: "double"
                    },
                ],
                objectIDField: ["ObjectID"],
                geometryType: "point",
                renderer: {
                    type: "simple",
                    symbol: {
                        type: "text",
                        color: "red",
                        text: "\ue61d",
                        font: {
                            size: 30,
                            family: "CalciteWebCoreIcons"
                        }
                    }
                },
                popupTemplate: {
                    title: "{name}",
                    content: [
                        {
                            type: "fields",
                            fieldInfos: [
                                {
                                    fieldName: "addrs",
                                    label: "Address"
                                },
                                {
                                    fieldName: "lat",
                                    label: "Latitude",
                                    format: {
                                        places: 2
                                    }
                                },
                                {
                                    fieldName: "lon",
                                    label: "Longitude",
                                    format: {
                                        places: 2
                                    }
                                }
                            ]
                        },
                        new CustomContent({
                            outFields: ["*"],
                            creator: (event) => {
                                const a = document.createElement("a");
                                a.href = event.graphic.attributes.url;
                                a.target = "_blank";
                                a.innerText = event.graphic.attributes.url;
                                return a;
                            }
                        })
                    ],
                    outFields: ["*"]
                }
            });

            map.add(layer);

        });
    </script>
</head>

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

</html>

将位置数据馈送到 Esri 地图并在 Esri 地图上将位置显示为精确点

Feed location data to the Esri Map and display locations on Esri Map as pinpoints

javascript

esri

arcgis

arcgis-js-api

esri-maps