如何在 ArcGIS Esri 地图中自动显示位置的放大视图？

Question

我在 Angular 应用程序中集成了 ArcGIS Esri 地图，我将一些位置输入到要素图层中，这些位置现在在地图上显示为精确点。

但现在我想要的是，当用户进入地图页面时我想在地图上显示该位置的放大视图。

我怎样才能做到这一点？

.ts 文件

    const map = new Map({
      basemap: 'topo-vector',
      layers: esriLayers
  });

    const view = new MapView({
      container,
      map: map,
      zoom: 4,
      center: [-97.63, 38.34],
    });

      const myLocationLayer = new FeatureLayer({
        source: locationData.map((d,i)=>(
          {
              geometry: new Point({
                longitude: d.longitude,
                latitude: d.latitude
              }),
              attributes: {
                ObjectID: i,
                ...d
              }
          }
        )),
      objectIdField: 'ObjectID',
      geometryType: "point",
      renderer: renderer,
    });
    map.add(dataFeedLayer);

  this.view = view;

.html 文件

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

Answer 1

在这种情况下，您需要使用包含所有几何图形的范围来初始化视图参数，或者在计算缩放到该范围之后。为此，您需要计算范围。

这里的特殊性是你的几何图形是点，所以你将无法使用范围方法，因为点没有范围。

但是，不用担心，计算结果范围（即几何图形的“完整范围”）并不困难。

这是我为您提供的一个小函数，可以实现这一点，

export function addPointToExtent(
    pto: __esri.Point,
    ext: __esri.geometry.Extent
): __esri.geometry.Extent {
    if (!pto) {
        return ext;
    }
    let e;
    if (!ext) {
        e = new Extent({
            xmin: pto.x,
            xmax: pto.x,
            ymin: pto.y,
            ymax: pto.y,
            spatialReference: {
                wkid: 102100
            }
        });
    } else {
        e = ext.clone();
        if (pto.x < e.xmin) {
            e.xmin = pto.x;
        }
        if (pto.x > e.xmax) {
            ext.xmax = pto.x;
        }
        if (pto.y < e.ymin) {
            e.ymin = pto.y;
        }
        if (pto.y > e.ymax) {
            ext.ymax = pto.y;
        }
    }
    return e;
}

你可以这样使用，

let ext = addPointToExtent(geoms[0] as Point, null);
for (let i = 1; i < geoms.length; i++) {
    ext = addPointToExtent(geoms[i], ext);
}

其中 geoms 是您的点列表，ext 是结果范围。

获得结果范围后，只需将视图缩放到它，

view.goTo({ target: ext.expand(1.1) })

扩展只是一个加号，让它变大一点。

Answer 2

正如@cabesuon 所解释的那样，一旦有了包含位置的要素层，就可以使用 MapView.goTo() 方法。它接受多个输入选项。参见 https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#goTo。

至于获取要素的范围，如果它们已经在图层中，则无需自己计算。

view.goTo(dataFeedLayer.source); // 没有额外的缩放外边距

如果您在创建FeatureLayer时设置源，您可以使用：

    view.whenLayerView(dataFeedLayer).then(() => {
        view.goTo({ target: dataFeedLayer.fullExtent.expand(1.2) })
    });

如果要在要素图层更改后重新设置：

    dataFeedLayer.queryExtent().then((results) => {
        view.goTo({ target: results.extent.expand(1.2) })
    });

如何在 ArcGIS Esri 地图中自动显示位置的放大视图？

How to automatically show a zoomed in view of the location in ArcGIS Esri Map?

javascript

arcgis-js-api

esri-maps

angular