将位置数据提供给 Esri 地图并在 Esri 地图上将位置显示为精确点

Question

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

Answer 1

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

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

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

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

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: "\", 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 地图上将位置显示为精确点

问题描述

1 个解决方案

解决方案1
0 2021-11-23 22:54:46

将位置数据提供给 Esri 地图并在 Esri 地图上将位置显示为精确点

问题描述

1 个解决方案

解决方案1 0 2021-11-23 22:54:46

解决方案1
0 2021-11-23 22:54:46