mapbox01

1、mapbox框架简单实例：安装并在页面显示地图

1)cnpm安装mapbox-gl : 

cnpm i mapbox-gl --save

2）导入js

import mapbox-gl from 'mapbox-gl

3）设置地图容器元素宽高，并实例化一个地图：

  mounted() {
    mapboxgl.accessToken = 'pk.eyJ1IjoidGVxdWlsYTMiLCJhIjoiY2tnMXVzbnppMDF6ZzJ3bXduaDdodXMwdyJ9.1uKrNBTz55P-YAYYR0omhQ';
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11' // 地图样式
    })
  },

2、Map

Map 对象代表页面上的地图。它暴露了一系列的方法和属性使得用户可以通过编程开发对地图进行修改，并在用户与地图交互时触发一系列的事件

实例化时对象可供配置的属性有new Map(options: Object)

container（地图容器（id））

style（地图样式）

minZoom/maxZoom (最小、最大缩放比例)

hash：若为true，地图状态将与url哈希匹配（缩放层级、中心纬度、中心经度、方位角和倾角）

interactive：若为false，地图将不再响应任何的鼠标事件

trackResize：若为true，地图将自适应窗口变化

center：地图初始化时所定位到的坐标，[经度，纬度]，需配合zoom

zoom：地图初始化时的缩放比例

bounds：地图初始化的限制范围。参数为一个LngLatBounds对象，或者是一个LngLatLike对象的数组以[西南，东北]为顺序， 也可以是一个数字组成的数组以[西，南，东，北]为顺序。

renderWorldCopies：若为false，地图缩小时将不平铺渲染地图