ESRI 地图设置 MapView.extent 切断显示范围的顶部和底部

Question

我有一个 ESRI 地图，我用给定的范围对其进行了初始化。当我用初始范围绘制地图时，实际显示的范围被截断了大约 5-10%，因此我的 FeatureLayers 上的一些要素位于初始视图之外。似乎地图正在尝试形成 "best fit" 缩放级别以将请求的范围与地图大小相匹配，但在这种情况下，最合适的做法是将视图的顶部和底部裁剪掉。

我创建了一个演示来展示此行为：

const map = new EsriMap({
  basemap: 'topo',
});
const extent = {
  spatialReference: {
    latestWkid: 3857,
    wkid: 102100,
  },
  xmin: -8418477.75984,
  ymin: 5691645.413467902,
  xmax: -8413622.645963104,
  ymax: 5694628.596517603,
};

const mapView = new EsriMapView({
  container: document.querySelector('#viewDiv'),
  extent,
  map,
});

const geometry = new EsriPolygon({
  rings: [
    [extent.xmax, extent.ymax],
    [extent.xmax, extent.ymin],
    [extent.xmin, extent.ymin],
    [extent.xmin, extent.ymax],
    [extent.xmax, extent.ymax],
  ],
  spatialReference: extent.spatialReference,
});

const symbol = {
  type: 'simple-line',
  color: [255, 0, 0],
  width: 2,
};

const graphic = new EsriGraphic({
  geometry,
  symbol,
});

mapView.graphics.add(graphic);

观看直播 https://codepen.io/asgallant/pen/rrWmLW。红框是请求的范围。如果您更改地图容器的高度，地图会在某些断点处更改其初始缩放级别。

我想将地图配置为始终选择完全封装所请求范围的默认缩放级别，因此不会截断任何要素。我知道我可以将缩放级别设置为任何我想要的，但我有数百种不同的地图，需要不同的缩放级别才能实现既定目标。有谁知道如何做到这一点？

Answer 1

您可以使用 when 回调来检查地图的范围是否包含您需要的范围。如果您的预期范围在地图范围的边界之外，您只需缩小。

您可以检查您发布的示例是否有效 here。

mapView.when(function(){
    if(!mapView.extent)
      return;

    const ext = new EsriExtent(extent);    
    while(mapView.zoom > 0 && !mapView.extent.contains(ext)) {
      mapView.zoom -= 0.5;
    }
});

Answer 2

看着你的 codepen.io 活生生的例子，我不知道你试图用 rem 身高得到什么，但是

height: 42rem;

对我有用。

ESRI 地图设置 MapView.extent 切断显示范围的顶部和底部

ESRI Maps setting MapView.extent cuts off top and bottom of extent in display

javascript

esri-maps

esri-javascript-api