Angular项目中向ArcGIS Esri地图传入位置数据并展示标记点咨询

你可以通过ArcGIS API for JavaScript的客户端图形图层（GraphicsLayer）来添加自定义经纬度标记点，无需依赖后端服务，具体操作如下：

1. 导入依赖的API类 #

在你的ts文件顶部导入所需的ArcGIS类：

import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import Graphic from "@arcgis/core/Graphic";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
import Point from "@arcgis/core/geometry/Point";

2. 整理经纬度位置数据 #

将你持有的美国各州位置数据整理为如下格式即可：

// 示例数据，可替换为你的真实数据
const stateLocations = [
  { name: "加利福尼亚州", lat: 36.7783, lon: -119.4179 },
  { name: "得克萨斯州", lat: 31.9686, lon: -99.9018 },
  { name: "纽约州", lat: 43.2994, lon: -74.2179 }
]

3. 修改initializeMap方法添加标记点 #

在原有的initializeMap方法中，等待地图视图加载完成后，创建图形图层、生成标记点并添加到地图中，修改后的代码如下：

// 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 markerLayer = new GraphicsLayer({
    id: "state-marker-layer"
  });
  webmap.add(markerLayer);

  // 新增：定义标记点的样式
  const markerSymbol = new SimpleMarkerSymbol({
    color: [226, 119, 40], // 标记点填充色，RGBA格式
    outline: {
      color: [255, 255, 255], // 边框颜色
      width: 2
    },
    size: "12px" // 标记点大小
  });

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

  // 等地图视图加载完成后添加所有标记点
  return this.view.when(() => {
    // 遍历所有位置数据生成标记
    stateLocations.forEach(item => {
      const point = new Point({
        latitude: item.lat,
        longitude: item.lon
      });
      const pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol,
        attributes: item // 自定义属性存在此处，后续做点击弹窗可直接调用
      });
      markerLayer.add(pointGraphic);
    });
  });
}

可选扩展 #

如果需要实现点击标记点弹出信息框的效果，只需要在view.when回调里添加点击事件监听，读取graphic.attributes中的属性渲染弹窗即可。

内容的提问来源于stack exchange，提问作者Harsha W