將位置數據提供給 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