mapbox根据要素数据定义地图范围

实现这个功能需要借助turf库:

const data = {
    type: 'Feature',
    geometry: geo,
}
const bound = bbox(geo)
// 方案一
const min = map.project([bound[0], bound[1]])
const max = map.project([bound[2], bound[3]])
map.fitScreenCoordinates(min, max, this.map.getBearing())

// 方案二
map.fitBounds(bound)

project方法:

 ​官网的解释:Returns a Point representing pixel coordinates, relative to the map's container.

翻译过来就是:会返回一个经纬度点相对于地图容器(#map)的像素坐标 ​

fitScreenCoordinates方法:

 官网解释:Pans, rotates and zooms the map to to fit the box made by points p0 and p1 once the map is rotated to the specified bearing. To zoom without rotating, pass in the current map bearing.

翻译:让地图窗口到p0、p1坐标的范围。

fitBounds方法:

跟上面方法一样只不过传的是经纬度坐标,不是像素坐标。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值