当前位置：首页 > news >正文

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

news 2024/11/16 22:31:45

使用插件，安装

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案例，封装的组件

<!--* @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-ctrllet 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控制需要哪些绘制控件

<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 },

 config.resolve = {alias: {"@": path.join(__dirname, "./src"),"@public": path.join(__dirname, "./public"),vue: "vue/dist/vue.esm.js",path: false,},fallback: { fs: false },};