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

给你找了一篇非常好的博客，你可以看看是否有帮助，链接：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