mapbox-gl实战教程：地图定位

在地图开发中，定位是进行的比较多的操作，根据操作，定位到地图上一个位置，定位到地图上的一个区域，或是定位到一条路上等等。 下边以实际的代码操作，讲一下mapbox-gl如何进行定位的操作。 1、点数据定位：

对于点数据的定位，mapbox-gl提供了两个实现方式，一个跳转（jumpTo）到位置，一个飞到（flyTo）指定位置，区别在于中间的效果，飞到有一个从当前点到终点的飞行动画效果，另外还有easeTo的方式，可以查看api文档。

//跳转代码
map.jumpTo({
center: [0, 0],
zoom: 8,
pitch: 45,
bearing: 90
});
//飞到代码
map.flyTo({
center: [0, 0],
zoom: 9,
speed: 0.2,
curve: 1,
easing(t) {
return t;
}
});

center是必须设置的，定位的地图中心点坐标； zoom是缩放级别，不设置的话，就按照当前缩放级别定位； 其他的参数不是必须的，参照api文档设置即可。 2、线数据定位：

线数据定位，要是定位到线数据的一个点上，和上边点数据定位是一样的操作，如想定位到线数据的范围，就需要用到mapbox-gl的另一个api进行操作，具体的方法如下：

const bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
    padding: {top: 10, bottom:25, left: 15, right: 5}
});

其中的bbox是范围，可以循环数据获得左下角的坐标和右上角的坐标，或者使用turf.js进行获取；padding是范围在显示窗口上的4个像素距离，这个对于地图窗口周边有覆盖元素，调整起来很有用。 3、面数据定位：

面数据定位，定位到面的中心点或者面的范围，定位点的方式和以上一样，定位范围参见线范围定位的。

面的中心点可以使用turf.js库进行计算，范围计算可以遍历坐标进行最大最小坐标判断，或者使用turf.js库进行计算。

3DTiles三维管线数据生产工具试用版-https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247487391&idx=1&sn=a49ad027b4de2c8ce6e5bec051801342&chksm=fc8bafadcbfc26bb5abc160d0dbfeef94134cc21900c752ca209d49393cf69325573be9ba4ec&scene=21#wechat_redirect