this.map = new mapboxgl.Map({
container: this.$refs.basicMapbox,
style: this.mapStyle,
center: [116.67014887634832, 34.63229347905002],
zoom: 12,
bearing: 0,
pitch: 45
this.map.fitBounds([ [116.6, 34.6], [116.6, 34.6]])
this.map.flyTo({
center: [116.6, 34.6],
zoom: 16.5,
pitch: 45
2、区别
fitBounds确实可以做到定位到一个点,但是缩放比例和地图倾斜度是不可控的。
而flyTo则是可以具体到某个点,而不是某个区域。并且根据具体需求控制缩放比例和倾斜程度。
这里简明的说了下,具体的大家还是多学习mapbox的官方文档,结合实践就会学到很多东西,做出比较6的效果。
加油吧,骚年们!!!
1、用法this.map = new mapboxgl.Map({ container: this.$refs.basicMapbox, style: this.mapStyle, center: [116.67014887634832, 34.63229347905002], zoom: 12, bearing: 0, pitch: 45})// fitBound...
npm i @watergis/mapbox-gl-export --save
适用于mapbox-gl-js v2用户
npm i git+https://github.com/watergis/mapbox-gl-export.git#mbgljs-v2
笔记。 mbgljs-v2分支虽然已升级到v2库,但并未得到积极维护。 该存储库不支持mapbox-gl-js v2的任何内容。
import { MapboxExportControl , Size ,
首先需要引用mapbox的css样式,虽然在index.html里面直接引用cdn也有效果,但是不建议直接修改index.html,后面会出现很多路径问题
推荐的方法是:首先将css样式下载到本地,然后再需要使用mapbox的组件里import样式:
@import "assets/css/mapboxgl.css";
@import "assets/css/mapbox
我先封装了一个方法 找到数据集中的东南角 西北角的经纬度
这里我用到了lodash这个库 (这个库我还是比较推荐用的 可以提升开发效率)
import { maxBy, minBy } from 'lodash'
* 获取坐标的边框
* @param {*} arr
* @returns
export function getBounds(arr, opt = { lat: "lat", lng: 'lng', isArr: false }) {
const { lat,
这个方法用leaflet的同学都用过,可当没有图层的时候添加一个图层用这个方法定位就会出现不能再缩小的问题,第一个图层建议用setview方法,这样不会增加特殊属性minzoom
var myIcon = L.divIcon({className: 'my-div-icon'});
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);
2.featureGroup 创建一个特征组,可选择给定一组初始层和一个options对象
L.featureGroup([marker1, marker2, polyline])
.bindPopup('Hello world!
// 圆:半径 radius 的单位为米
var circle = L.circle([31.537628173828125,121.190185546875], {radius: 2000}).addTo(map);
// 跳到圆的范围
map.fitBounds(circle.getBounds());
官网API
// 线:坐标点
var la...
mapbox-gl的flyTo是一种平滑的地图平移和缩放动画效果,可以使用户更加流畅地浏览地图。使用flyTo方法可以让地图从一个位置缓慢平移和缩放到另一个位置,可以设置动画的持续时间、缓动函数和目标位置等参数。例如,可以使用flyTo方法将地图平移到指定的坐标位置,代码示例如下:
map.flyTo({
center: [lng, lat],
zoom: zoom,
speed: 0.8,
curve: 1,
easing: function (t) {
return t;
其中,center表示目标坐标位置,zoom表示目标缩放级别,speed表示动画速度,curve表示动画路径的曲率,easing表示缓动函数。