ESRI Maps设置MapView.extent切断显示区域的顶部和底部

时间:2018-07-19 20:03:39

标签: javascript esri-maps esri-javascript-api

我有一个用给定范围初始化的ESRI映射。当我以初始范围绘制地图时,实际显示的范围被削减了大约5-10%,因此FeatureLayers上的某些要素不在初始视图之内。似乎地图正在尝试形成“最佳拟合”缩放级别,以将请求的范围与地图尺寸相匹配,但是在这种情况下,最佳拟合会使视图的顶部和底部被裁剪掉。

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

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

我想将地图配置为始终选择一个默认缩放级别,该级别完全封装了所请求的范围,因此不会切断任何功能。我知道我可以将缩放级别设置为我想要的任何值,但是我有数百种不同的地图,需要不同的缩放级别才能达到指定的目标。有人知道如何做到这一点吗?

2 个答案:

答案 0 :(得分:2)

您可以使用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;
    }
});

答案 1 :(得分:0)

查看您的codepen.io实时示例,我不知道您尝试用rem来获得什么高度,但是

height: 42rem;

对我有用。