vue＋leaflet-Geoman的例子

it2023-01-19 54

vue＋leaflet-Geoman的例子

<template> <div class="contant"> <button class="draw" @click="draw()">绘制</button> <button class="disDraw" @click="disDraw()">关闭绘制</button> <button class="editor" @click="editor()">全体编辑</button> <button class="diseditor" @click="diseditor()">全体禁止编辑</button> <button class="toggle" @click="toggle()">切换编辑</button> <button class="move" @click="move()">启用拖拽</button> <button class="remove" @click="remove()">启用移除</button> <button class="cut" @click="cut()">启用切割</button> <div id="map"></div> </div> </template> <script type="text/javascript"> export default { name: "Opentomap", data() { return { activeKey: 0, map: null, }; }, mounted() { this.map = this.$L.map("map").setView(["30.52771", " 114.35232"], 16); this.$L .tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png") .addTo(this.map); this.map.pm.addControls({ position: "topleft", drawPolygon: true, // 添加绘制多边形 drawMarker: true, //添加按钮以绘制标记 drawCircleMarker: true, //添加按钮以绘制圆形标记 drawPolyline: true, //添加按钮绘制线条 drawRectangle: true, //添加按钮绘制矩形 drawCircle: true, // 添加按钮绘制圆圈 editMode: true, // 添加按钮编辑多边形 dragMode: true, // 添加按钮拖动多边形 cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容 removalMode: true, // 清除图层 }); // 设置绘制后的线条颜色等 this.map.pm.setPathOptions({ color: "blue", fillColor: "pink", fillOpacity: 0.4, }); this.map.pm.setLang("zh"); //设置语言 this.$bus.$emit("getbus2", "英国地图"); }, components: {}, methods: { draw() { this.map.pm.enableDraw("Rectangle", { snappable: false }); //this.map.pm.enableDraw("Marker", { snappable: false }); //this.map.pm.enableDraw("CircleMarker", { snappable: false }); this.map.on("pm:drawstart", (e) => { //绘制开始时事件 console.log(e, "first"); }); this.map.on("pm:create", (e) => { console.log(e, "绘制完成时调用"); alert(e.layer._latlngs[0]); //获取绘制的坐标绘制线段时不能显示第一个点坐标 }); }, disDraw() { this.map.pm.disableDraw(""); }, editor() { this.map.pm.toggleGlobalEditMode(); }, diseditor() { this.map.pm.disableGlobalEditMode(); }, toggle() { this.map.pm.toggleGlobalEditMode(); }, move() { this.map.pm.toggleGlobalDragMode(); // alert(this.map.pm.globalDragModeEnabled()) }, remove() { this.map.pm.toggleGlobalRemovalMode(); this.map.on("pm:remove", (e) => { console.log(e, "移除"); }); }, cut() { this.map.pm.Draw.Cut.enable({ allowSelfIntersection: false, }); this.map.on("pm:cut", () => { console.log("切割"); }); }, }, }; </script> <style scoped> #map { width: 100%; height: 100%; float: right; z-index: 1; } .draw { display: flex; z-index: 99; width: 100px; height: 50px; position: absolute; left: 50px; justify-content: center; align-items: center; } .disDraw { display: flex; z-index: 99; width: 100px; height: 50px; position: absolute; left: 200px; justify-content: center; align-items: center; } .editor { display: flex; z-index: 99; width: 100px; height: 50px; position: absolute; left: 350px; justify-content: center; align-items: center; } .diseditor { display: flex; z-index: 99; width: 100px; height: 50px; position: absolute; left: 500px; justify-content: center; align-items: center; } .toggle { display: flex; z-index: 99; width: 100px; height: 50px; position: absolute; left: 650px; justify-content: center; align-items: center; } .move { display: flex; z-index: 99; width: 100px; height: 50px; position: absolute; left: 800px; justify-content: center; align-items: center; } .cut { display: flex; z-index: 99; width: 100px; height: 50px; position: absolute; left: 950px; justify-content: center; align-items: center; } .remove { display: flex; z-index: 99; width: 100px; height: 50px; position: absolute; left: 1100px; justify-content: center; align-items: center; } .contant { height: 800px; position: relative; } </style>

图片如下

最新回复(0)