openlayers-20-根据特征元素(多边形等)将地图缩放至合适大小,使得所有特征元素在地图上可见

2023-12-13 04:08:28

当进行拉框查询,或者生成了某些多边形后,往往需要将地图的缩放层级和视角跳转至查询结果处,或者是将地图缩放至合适的层级和位置以使得生成或绘制的多边形在窗口中显示适中。
主要是借助于fit()方法,该方法用于调整地图的视图范围以适应给定的地理范围或一系列要素。该方法会计算给定的范围,并更改地图的缩放级别和中心,以便所有内容都可见

//map 为  ol.Map 的map对象

//创建一个矢量图层Vector 作为绘制层,ol.source.Vector是用来设置矢量图层数据来源的
var vectorSource= new ol.source.Vector();
//创建一个图层 ol.layer.Vector矢量图层类
var vector = new ol.layer.Vector({
    source: vectorSource
});
//将绘制层添加到地图容器中
map.addLayer(vector);
//创建一个geometry
let geom = new ol.geom.Polygon([[[117.56,35.32], [118.25, 36.23], [117.82, 37.25],[117.56,35.32]]])
//创建一个多变形
var Polygon = new ol.Feature({
    geometry: geom
});
//创建一个geometry
let geom1 = new ol.geom.Polygon([[[116.56,34.32], [117.25, 36.23], [117.82, 35.25],[116.56,34.32]]])
//创建一个多变形
var Polygon1 = new ol.Feature({
    geometry: geom1
});
//将创建的 多边形 元素 添加到图层
vectorSource.addFeature(Polygon);

//1. 针对某个多边形缩放
// 该多边形,可以是正方形,矩形,任意边的多边形

map.getView().fit(geom, { 
	padding: [20, 20, 20, 20]// 如果需要,可以在四个方向上添加填充  
	size: map.getSize(), // 考虑地图的大小
    nearest: true, // 如果设置为true,则缩放级别将被舍入到最近的整数  
    duration: 1000, // 动画持续时间(毫秒),默认为1000  
    easing: ol.easing.easeOut // 可以选择缓动函数
});
//2. 针对一组多边形,即某个图层上的所有多边形
// 计算vectorSource所有多边形的范围  
let extent = vectorSource.getExtent();
//判断是否为空
if (!ol.extent.isEmpty(extent)) {
    map.getView().fit(extent , {
    	padding: [20, 20, 20, 20]// 如果需要,可以在四个方向上添加填充  
		size: map.getSize(), // 考虑地图的大小
	    nearest: true, // 如果设置为true,则缩放级别将被舍入到最近的整数  
	    duration: 1000, // 动画持续时间(毫秒),默认为1000  
	    easing: ol.easing.easeOut // 可以选择缓动函数
	});
}

文章来源:https://blog.csdn.net/chuanren1991/article/details/134944976
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。