javascript - ESRI map 设置 MapView.extent 会 chop 显示范围的顶部和底部

标签 javascript esri-maps esri-javascript-api

我有一个 ESRI map ,我用给定的范围初始化了它。当我以其初始范围绘制 map 时,实际显示的范围被 chop 了大约 5-10%,因此我的 FeatureLayers 上的某些要素位于初始 View 之外。 map 似乎正在尝试形成“最适合”的缩放级别,以将请求的范围与 map 大小相匹配,但在这种情况下,最适合的 View 会将 View 的顶部和底部裁剪掉。

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

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 。红框是请求的范围。如果更改 map 容器的高度, map 会在某些断点处更改其初始缩放级别。

我想将 map 配置为始终选择完全封装所请求范围的默认缩放级别,因此不会切断任何功能。我知道我可以将缩放级别设置为我想要的任何级别,但我有数百张不同的 map ,需要不同的缩放级别才能实现既定目标。有谁知道如何实现这一点吗?

最佳答案

您可以使用when回调来检查 map 范围是否包含您所需的范围。如果您的预期范围超出了 map 范围的边界,您只需缩小即可。

您可以检查您发布的示例工作 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;
    }
});

关于javascript - ESRI map 设置 MapView.extent 会 chop 显示范围的顶部和底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51430893/

相关文章:

javascript - 在鼠标悬停时在 map 上显示工具提示

javascript - react 分页选择切换类名

javascript - 使用导航箭头时,图表 JS 图表未在 ArcGIS 弹出窗口中呈现

javascript - ESRI JS API 4.9+ 和 Koop : services fail to load due to reduntant url params

typescript - Esri Maps PopupTemplate 的内容方法每个要素仅调用一次

javascript - 隐藏测量小部件并在单选按钮检查上显示

javascript - 获取视频 HTML5 中的帧变化

javascript - 使用带有偏差的 Random()

javascript - 如何将 Javascript 位置(经度和纬度)值传递到文本框值?