0

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

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

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();
4

1 回答 1

2

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

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

  • 使用 的集合设置source属性Graphic，在示例中我使用了一个数组Object（它自动转换为预期的），
  • 设置geometryType, 在这种情况下point,
  • 和objectIDField.

我假设您一开始就有数据，如果您需要在运行应用程序时添加/更新/删除数据，您可以使用applyEdits.FeatureLayer

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>

于 2021-11-23T22:54:46.353 回答