javascript - ESRI Maps 设置 MapView.extent 截断显示范围的顶部和底部
问题描述
我有一个用给定范围初始化的 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现场观看。红色框是请求的范围。如果您更改地图容器的高度,地图会在某些断点处更改其初始缩放级别。
我想将地图配置为始终选择完全封装请求范围的默认缩放级别,因此不会切断任何功能。我知道我可以将缩放级别设置为任何我想要的,但我有数百张不同的地图,需要不同的缩放级别来实现既定目标。有谁知道如何做到这一点?
解决方案
您可以使用when
回调来检查地图的范围是否包含您所需的范围。如果您的预期范围超出地图范围的边界,您只需缩小。
您可以在此处查看您发布的示例。
mapView.when(function(){
if(!mapView.extent)
return;
const ext = new EsriExtent(extent);
while(mapView.zoom > 0 && !mapView.extent.contains(ext)) {
mapView.zoom -= 0.5;
}
});
推荐阅读
- json - JSON 对象在 API 调用和前端之间丢失信息
- python - 将特定端口的所有 TCP 流量转发到 Windows 中的另一台服务器
- javascript - 将部分字符串拆分为变量或数组
- reactjs - 根据选择 ReactJS 显示价格
- c++ - 多文件工厂方法
- python - 如何使用 for 循环将一系列数字添加到列表中?
- c# - Google API Oauth2 刷新令牌错误请求 400
- docker - 设置和运行 docker 镜像:基本问题
- silent-installer - 我们可以为每个 exe 创建一个安装响应文件,即 .iss 文件,或者对此有任何限制吗?
- sql - Redshift - SQL - 获批学生的比例