mapbox 展示地图 添加点、线、面绘制工具

先看一下效果图

1、使用npm安装需要用到的依赖

• 安装mapbox地图展示时需要用到的依赖
  npm install --save mapbox-gl
  
  
• 安装自定义点线面工具的依赖包
  npm install --save mapbox-gl-draw
  npm install --save turf
  
  
• 自定义点线面样式引入（在公共的index.html部分引入，一般都在public文件夹下）

<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css'/>

- 如果不想安装依赖包，可以在公共的index.html部分引入js
（vue项目中不推荐这样引用，因为可能会影响其他模块，一般情况下推荐import引入方法）

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js">script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css" rel="stylesheet" />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'>script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css'/>

2、html部分准备一个盛放地图的容器

<template>
  <div id="map">div>
template>

3、javascript部分

import mapboxgl from 'mapbox-gl'
import turf from 'turf'
import MapboxDraw from 'mapbox-gl-draw'

export default {
     
	data() {
     
		return {
     
			map: {
     }
		}
	}
	mounted() {
     
		this.initMap()
		this.initDraw()
	},
	methods: {
     
		// 初始化地图
		initMap() {
     
		 	// 访问通道，去官网注册一下就可以生成自己的通道
			mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA' 
	
			// 设置地图展示范围 lng: 经度  lat:纬度
	        var bounds = new mapboxgl.LngLatBounds(
		        new mapboxgl.LngLat(65, 15),
		        new mapboxgl.LngLat(140, 55)
		    )
	        this.map = new mapboxgl.Map({
     
	           style: 'mapbox://styles/mapbox/streets-v11',  // 设置地图风格，官网提供了十种风格，可以去官网自行查看
	           center: [118.78, 32.04],  // 中心点，默认值为[0, 0]
	           zoom: 10,  // 缩放级别，默认值为0
	           pitch: 45, // 倾斜角度，默认值为0
	           bearing: -17.6, // 旋转角度，默认值为0
	           container: 'map',  // 地图容器
	           antialias: true,
	           maxBounds: bounds  // 约束到给定边界
	        })
	        this.map.addControl(new mapboxgl.NavigationControl(), 'top-left')  // 放大、缩小、指北针控件
		}
	},
    // 自定义绘图工具
    initDraw() {
     
      this.draw = new MapboxDraw({
     
        displayControlsDefault: false,
        controls: {
     
          polygon: true,
          line_string: true,
          point: true,
          trash: true
        }
      })
      this.map.addControl(this.draw)
      this.map.on('draw.create', this.updateArea)
      this.map.on('draw.delete', this.updateArea)
      this.map.on('draw.update', this.updateArea)
    },
    updateArea(e) {
     
      var data = this.draw.getAll()
      var answer = document.getElementById('calculated-area')
      if (data.features.length > 0) {
     
        var area = turf.area(data)
        // restrict to area to 2 decimal points
        var rounded_area = Math.round(area * 100) / 100
        answer.innerHTML = '
' + rounded_area + '
square meters
'
      } else {
     
        answer.innerHTML = ''
        if (e.type !== 'draw.delete') alert('Use the draw tools to draw a polygon!')
      }
    }
}

官方文档很重要，此处附上官方文档地址，一定要读文档啊！！！

官方API地址：https://docs.mapbox.com/mapbox-gl-js/api/