如何在 ArcGIS Esri Map 中自動顯示位置的放大視圖？

Question

我在 Angular 應用程序中集成了 ArcGIS Esri map，並且我將一些位置輸入到要素圖層中，這些位置現在作為精確點顯示在 Map 上。

但現在我想要的是，當用戶 go 進入 map 頁面時，我想在 map 上顯示該位置的放大視圖。

我怎樣才能做到這一點？

.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

在這種情況下，您需要使用包含所有幾何圖形的范圍來初始化視圖參數，或者在計算縮放到該范圍之后。 為此，您需要計算范圍。

這里的特殊性是您的幾何圖形是點，因此您將無法使用范圍方法，因為點沒有范圍。

但是，不用擔心，計算結果范圍（即幾何圖形的“全范圍”）並不難。

這是我給你的一個小function，它可以實現，

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) })
    });