【mapbox】mapbox入门-基础配置

mapbox在工程中初始化方式，基础配置项，整体代码结构等
附 vue引入 & 原生js工程引入

整体结构

• html

<div id="map">

• css

#map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

去掉mapbox标，左下角及右下角link的方式

方式一：
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
    display: none;
}

方式二：
.mapboxgl-ctrl {
    display: none !important;
}

• js

mapboxgl.accessToken = 'pk.eyJ1IjoiZXRlcm5pdHkteHV5ZiIsImEiOiJja3FoZTM3bXYwdXIzMnFsa3BwbGN4dXUyIn0.j7OGDXwEpG_MFyuD5DDmYw';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [-77.0323, 38.9131], // starting position [lng, lat]
    zoom: 8, // starting zoom
    bearing: 0,  //方位角 地图视口正上方中心点 在地图上 北偏东 的角度。默认值为 0
    pitch: 45,  //地图倾斜角度 默认值为 0，范围为 0 ~ 60
    sprite: "mapbox://sprites/mapbox/bright-v8", //不受地图旋转缩放影响的图标等，类似精灵漂浮在空中，当有 layer 使用了 background-pattern、fill-pattern、line-pattern、fill-extrusion-pattern、icon-image 等属性时，sprite 必填。
    transition: {  //全局的过渡动画属性
    duration: 300, // 过渡的持续时间（可选，单位：毫秒，默认值为 300）
    delay: 0 // 延迟多久开始过渡（可选，单位：毫秒，默认值为 0）
	},
	light: {  //全局的光源
    anchor: "viewport", // 锚点，指定作用的目标（可选，可选值 map、viewport，默认值为 viewport）
    position: [1.15,210,30], // 位置（可选，默认值为 [1.15,210,30]）
    color: "white", // 颜色（可选，默认值为 #ffffff）
    intensity: 0.5 // 强度（可选，取值范围为 0 ~ 1，默认值为 0.5）
	},
	glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"  //字形符号,用来指定加载以 PBF 格式设置的 有向距离场 字形的 URL 模板,URL 模板必须带有占位符 {fontstack} 和 {range}。当有 layer 使用了 text-field 属性时，glyphs 必填。
});

---

vue引入方式

npm install --save mapbox-gl

组件内全局引入：

const mapboxgl = require('mapbox-gl');  

样式引入：

 @import url("https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css");

---

html引入方式

  <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>