2

我已经在 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>
4

2 回答 2

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) })
    });
于 2022-01-12T20:26:58.983 回答
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) })

扩展只是一个加号，使它更大一点。

于 2022-01-12T18:59:08.030 回答