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'>