sq_dataview/src/components/DrawMap.vue

<template>
    <div class="tool-bar glass">
      <button @click="startDraw('point')">🟢 绘点</button>
      <button @click="startDraw('line')">📏 绘线</button>
      <button @click="startDraw('polygon')">🔷 绘面</button>
      <button @click="startDraw('circle')">⭕ 绘圆</button>
      <button @click="startDraw('rectangle')"><span style="display: inline-block; transform: rotate(45deg);">🔷</span> 矩形</button>
      <button @click="startDraw('distance')">📏 测距</button>
      <button @click="startDraw('area')">🔷 测面</button>
      <!-- <button @click="toggleEditMode" :class="{ active: isEditMode }" :disabled="isEditDisabled">✏️ 编辑</button> -->
      <button @click="clearAll">🗑️ 清空</button>
    </div> 
</template>

<script>

export default {
  name: "DrawMap",
  components: {
    
  },
  data() {
    return {
      mapDraw: null,
      isEditDisabled: false,     // 是否禁用编辑功能
      isEditMode: false,        // 编辑模式
    };
  },
  mounted() {
    let that = this;
    that.initData();
  },
  methods: {
    initData() {
        let that = this;
        window.mapboxMap.on('load', function() {
            // 初始化
            // that.mapDraw = new MapDraw.init(window.mapboxMap, {
              // 编辑完成 → 自动接收最新图形
              // onEditComplete: (data) => {
              //   console.log("返回数据：", data);
              //   // 你可以在这里提交后端接口，将数据保存到数据库
              //   that.updateContent(data);
              // },
            // });
            // console.log("mapDraw:", that.mapDraw);
            that.mapDraw = window.mapEditDraw;
        })
    },
    // 开始绘制
    startDraw(type) {
      let that = this;
      that.mapDraw.startDraw(type);
    },
    // 切换编辑模式
    toggleEditMode() {
      let that = this;
      that.isEditMode = !that.isEditMode;
      that.mapDraw.isEditDrawTool(that.isEditMode);
    },
    // 清空所有图形
    clearAll() {
      let that = this;
      that.mapDraw.clearAll();
    },
  }
};
</script>

<style lang="less" scoped>

/* 工具栏 + 玻璃样式 */
.tool-bar {
    position: absolute;
    top: 60px;
    right: 0px;
    z-index: 999;
    padding: 12px 10px;
    display: grid;
    gap: 5px;
    width: 80px;
}
.tool-bar button {
  padding: 8px;
  background: rgba(255,255,255,1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  color: #222;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.tool-bar button:hover {
  background: rgba(255,255,255,0.8);
}

.tool-bar button.active {
  background: rgba(0,102,255,0.8);
  color: white;
}

.tool-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


</style>

<style>
/*节点标签样式 */
.marker-label-tips {
  position: absolute;
  background: #0066ff;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  pointer-events: none; /* 不影响鼠标悬浮 */
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* 编辑标记样式 */
.edit-marker {
  z-index: 2;
  cursor: pointer;
}
</style>