mapDraw显示并编辑shp矢量数据

1、vue项目中安装依赖，方式有 

npm i mapbox-gl

npm i mapbox-gl-draw

2、在相应的组件中引入依赖

import MapboxDraw from "mapbox-gl-draw";

import "mapbox-gl-draw/dist/mapbox-gl-draw.css";

import Mapbox from "mapbox-gl";

3、创建底图

var map = new mapboxgl.Map({
	container: 'map',
	zoom: 7,
	center: [118.8, 36.3],
	style: mapStyle,
});

4、添加矢量数据

//加载地图资源
        map.addSource("bufferSourse", {
          type: "geojson",
          //data: val.geoJson[0],
          data: val.geoJson,
        });
        //加载地图图层
       map.addLayer({
          id: "bufferLayer",
          type: "fill",
          source: "bufferSourse" ,
          layout: {},
          paint: {
            "fill-color": "yellow",
          },
        });
        // center为定位点坐标，zoom为底图层级
        map.flyTo({    
          center: val.geoJson.features[0].geometry.coordinates[0][0],
          zoom: 12,
          speed: 0.8,
        });

5、编辑矢量地图

6、编辑矢量

//创建draw对象
      this.draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
          polygon: true,
          point: false,
          trash: true,
        },
        defaultMode: "draw_polygon",//默认绘制面矢量
      });
// 加载得出地图控制绘制对象
     map.addControl(this.draw);
      var feature = { type: "Point", coordinates: [0, 0] };
//添加需要绘制的矢量geojson数据，用add()函数
      this.draw.add(feature);
      this.draw.changeMode("draw_polygon");
      map.on("draw.create", function (feature) {

       });
      map.on("draw.update", function (feature) {
  
       });
       map.on("draw.delete", function (feature) {});