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

Question

I want to pass some location data(latitude, longitude, etc..) of some states in the US to the ArcGIS Esri map, and display those locations in the Esri map as pinpoints (like Google maps).我想将美国某些州的一些位置数据（纬度、经度等）传递到 ArcGIS Esri 地图，并将这些位置在 Esri 地图中显示为精确点（如 Google 地图）。 Currently, my Angular code is as below and I couldn't find any ArcGIS documentation on feeding data to the Esri Map.目前，我的 Angular 代码如下，我找不到任何关于向 Esri 地图提供数据的 ArcGIS 文档。

Please let me know if you have any thoughts on how to achieve this.如果您对如何实现这一目标有任何想法，请告诉我。

esri-map-component.html esri-map-component.html

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

esri-map-component.ts 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

You have many ways to add your data to your map.您可以通过多种方式将数据添加到地图中。 You could use a FeatureLayer or a GraphicLayer , you could even add it to the view graphics collection.您可以使用FeatureLayer或GraphicLayer ，您甚至可以将其添加到视图图形集合中。

I will propose you to use FeatureLayer in this example I made for you.我会建议你在我为你制作的这个例子中使用FeatureLayer 。 Although it is not using Angular, you can easily translate to your code.虽然它没有使用 Angular，但您可以轻松转换为您的代码。 To use FeatureLayer with data on the client you need to:要将FeatureLayer与客户端上的数据一起使用，您需要：

set the source property with a collection of Graphic , in the example I use an array of Object (it auto cast to the expected),使用Graphic集合设置source属性，在示例中我使用Object数组（它自动转换为预期），
set the geometryType , in this case point ,设置geometryType ，在本例中为point ，
and the objectIDField .和objectIDField 。

I assume that you have the data at the start, if you need to add/update/delete data while running the application, you can use the method applyEdits of the FeatureLayer .我假设您在开始时有数据，如果您需要在运行应用程序时添加/更新/删除数据，您可以使用FeatureLayer applyEdits方法。

ArcGIS JS API - FeatureLayer ArcGIS JS API - FeatureLayer

Example:例子：

 <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