mapbox已经进入测量距离的状态，此时该如何退出这个状态？

Question

mapbox已经进入测量距离的状态，此时该如何退出这个状态？

Answer 1

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：mapbox创建空白底图
• 除此之外, 这篇博客: mapbox使用，包括绘制、加载、修改、删除点和面，显示弹框等中的 绘制图形 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 一、在index.html全局引入mapbox-gl-draw的js和css，参考上诉mapbox-gl的引用
  二、在初始化地图时初始化draw

  	draw = new MapboxDraw({
          displayControlsDefault: false,//是否显示默认的地图控件
  	    controls: {//显示的地图控件，自定义控件时不设置
  	        polygon: true,
  	        line_string:true,
  	        point:true,
  	        trash: true
  	    }
        });
        updateMapDraw(draw);//保存draw对象，方便在其他页面使用
  

  三、在mapjs中监听绘制状态

  map.addControl(draw, "top-left");   //控件显示位置
  map.on('draw.create', updateArea);
  map.on('draw.delete', updateArea);
  map.on('draw.update', updateArea);
  export function updateArea(e) {
      if (e.type === 'draw.create') {
      //图形绘制完成
      }else if(e.type === 'draw.update'){
      //修改绘制图形后
      }else if(e.type === 'draw.delete'){
      //删除绘制图形
      }
  

  实现效果：
  

  自定义控件，删除controls，在相应页面定义按钮，实现绘制类型的切换

  <div class="map-btn">
       <el-button @click="changeDrawModel('draw_point')" class="audit-btn" size="mini">绘点</el-button>
       <el-button @click="changeDrawModel('draw_polygon')" class="audit-btn" size="mini">绘面</el-button>
  </div>
  
  /**
   * 改变绘制类型
   */
  export function changeDrawModel(type) {
      draw.changeMode(type);
  }
  

  自定义绘制时显示的点图标或图形样式
  在初始化draw时，修改style

  	  map.loadImage("/img/marker.png", function (error, image) {
          if (error) throw error;
          map.addImage("pointImg", image);
        });
        draw = new MapboxDraw({
          displayControlsDefault: false,
          styles: [
            //绘制点图标
            {
              'id': 'points-are-blue',
              'type': 'symbol',
              'filter': ['all',
                ['==', '$type', 'Point'],
                ['==', 'meta', 'feature'],
                ['==', 'active', 'false']],
              'layout': {//设置绘制后显示的点图标
                "icon-image": "pointImg",
                "icon-size": 1,
                "icon-offset": [0, -15],
                "icon-ignore-placement": true, //图标忽略位置
              },
              'paint' : {
                "text-color": "#fff",
              }
            },
            {
              'id': 'highlight-active-points',
              'type': 'symbol',
              'filter': ['all',
                ['==', '$type', 'Point'],
                ['==', 'meta', 'feature'],
                ['==', 'active', 'true']],
              'layout': {//设置点激活状态下显示的图标
                "icon-image": "pointImg",
                "icon-size": 1,
                "icon-offset": [0, -15],
                "icon-ignore-placement": true, //图标忽略位置
              },
              'paint' : {
                "text-color": "#fff",
              }
            },
            // 设置面样式
            {
              "id": "gl-draw-polygon-fill",
              "type": "fill",
              "filter": ["all",
                ["==", "$type", "Polygon"],
                ["!=", "mode", "static"]],
              "paint": {//设置绘制面时显示的填充颜色及透明度
                "fill-color": "#D20C0C",
                "fill-outline-color": "#D20C0C",
                "fill-opacity": 0.1
              }
            },
            {
              "id": "gl-draw-polygon-stroke-active",
              "type": "line",
              "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
              "layout": {
                "line-cap": "round",
                "line-join": "round"
              },
              "paint": {//设置绘制面时显示的描边颜色、线条类型、宽度
                "line-color": "#fbb03b",
                "line-dasharray": [0.2, 2],
                "line-width": 2
              }
            },
            {
              "id": "gl-draw-polygon-and-line-vertex-halo-active",
              "type": "circle",
              "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
              "paint": {//设置绘制面时显示的转折点的大小，边框颜色
                "circle-radius": 5,
                "circle-color": "#fff"
              }
            },
            {
              "id": "gl-draw-polygon-and-line-vertex-active",
              "type": "circle",
              "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
              "paint": {//设置绘制面时显示的转折点的大小，填充颜色
                "circle-radius": 3,
                "circle-color": "#705080",
              }
            }
          ]
        });
  

  实现效果
  

  

  Mapbox常用表达式：
  https://blog.csdn.net/hequhecong10857/article/details/115425431
  draw常用方法：
  https://blog.csdn.net/u011435933/article/details/104778290