Mapbox封装图形绘制工具 线,圆,polygon,删除,点 mapbox-gl-draw-circle mapbox-gl-draw

使用插件,安装

javascript 复制代码
npm install mapbox-gl-draw-circle   //绘制圆
npm install @mapbox/mapbox-gl-draw   //绘制点线面删除

相关API地址:https://github.com/mohong/mapbox-gl-draw-circle
https://github.com/mapbox/mapbox-gl-draw/blob/main/docs/API.md

vue案例,封装的组件

javascript 复制代码
<!--
 * @Description: 地图绘制
-->

<template>
  <div class="draw_map"></div>
</template>

<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
//import {  } from '@/config/http/url';
import {
  CircleMode,
  DragCircleMode,
  DirectMode,
  SimpleSelectMode,
} from "mapbox-gl-draw-circle";
import MapBoxDraw from "@mapbox/mapbox-gl-draw";
import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    tools: {
      type: Object,
      default: () => {
        return {
          point: true,
          line_string: true,
          polygon: true,
          trash: true,
          circle: true,
        };
      },
    },
  },
  data() {
    //这里存放数据
    return {};
  },
  directives: {},
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * @description: 添加绘制圆控件
     * @param {*} draw  new MapBoxDraw
     * @return {*}
     * @author: 邢康
     */
    addCircleControl(draw) {
      // mapboxgl-ctrl
      let parent = document.getElementsByClassName("mapboxgl-ctrl")[0];
      let brother = document.getElementsByClassName("mapbox-gl-draw_trash")[0];
      let newChild = document.createElement("button");
      newChild.title = "Circle";
      newChild.className = "mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_circle";
      newChild.innerHTML = "⚪";
      newChild.style.color = "black";
      newChild.addEventListener("click", () => {
        draw.changeMode("draw_circle", {
          initialRadiusInKm: Math.floor(100 / window.myMap.getZoom()),//根据地图缩放层级计算默认半径
        });
      });
      parent.insertBefore(newChild, brother);
    },
  },
  //生命周期 - 创建完成(可以访问当前this实例)
  created() {},
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {
    const draw = new MapBoxDraw({
      displayControlsDefault: false,
      userProperties: true,
      controls: this.tools,
      modes: {
        ...MapBoxDraw.modes,
        draw_circle: CircleMode,
        drag_circle: DragCircleMode,
        direct_select: DirectMode,
        simple_select: SimpleSelectMode,
      },
    });
    let time = setInterval(() => {
      let map = window.myMap; //mapbox对象,根据需要更改
      if (map) {
        clearInterval(time);
        map.addControl(draw);
        map.on("draw.create", (e) => {
          console.log(e);

          this.$emit("drawCreate", e);
        });
        map.on("draw.update", (e) => {
          console.log(e);

          this.$emit("drawUpdate", e);
        });
        this.tools.circle && this.addCircleControl(draw);
      }
    }, 1000);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style lang="less" scoped>
//@import ''; 引入公共css类
::v-deep .mapboxgl-ctrl-top-right {
  right: 15px !important;
}
</style>

使用方式,通过tools控制需要哪些绘制控件

javascript 复制代码
    <draw-map
      :tools="{
        // point: true,
        // line_string: true,
        polygon: true,
        trash: true,
        // circle: true,
      }"
    ></draw-map>

相关问题处理

安装mapbox-gl-draw-circle,引入后运行编译报错 can't resolve 'fs'...

{path:false}...此类错误

在vue.config.js中配置configureWebpack>resolve>alias添加path:false,

resolve中添加fallback: { fs: false },

javascript 复制代码
 config.resolve = {
      alias: {
        "@": path.join(__dirname, "./src"),
        "@public": path.join(__dirname, "./public"),

        vue: "vue/dist/vue.esm.js",
        path: false,
      },
      fallback: { fs: false },
    };

最终效果:

相关推荐
F2E_Zhangmo1 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户214118326360217 分钟前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc1 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之1 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro3 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹4 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风4 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱4 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript