本文主要是介绍maptalks 右键删除坐标点位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!-- 地图组件 -->
<template><div :id="id" class="container"></div>
</template><script>
import _ from "lodash";
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export default {//import引入的组件需要注入到对象中才能使用name: "Map",props: {id: {type: String,default: () => {return "map";},},mapSet: {type: Object,default: () => {return {};},},color: {type: String,default: () => {return "";},},},components: {},data() {//这里存放数据return {dataLis: [],layer: null,layer2: null,map: null,polygon: null,drawTool: null,// 默认中心点点位center: [121.7294793802647, 29.97249795779439],// 缩放层级zoom: 14,// 倾斜度pitch: 0,// 轴承// bearing: 90,// 最小缩放层级minZoom: 1,// 最大缩放层级maxZoom: 18.5,symbol: {polygonFill: "#ff0000", // 图形覆盖颜色polygonOpacity: 0.3, // 图形覆盖区域透明度lineColor: "#ff0000", // 线条颜色lineWidth: 2, // 线条宽度},pointSymbol: {markerFile: "@/assets/logo/logo.png",markerWidth: 20,markerHeight: 20,},layerSwitcherControl: {position: "top-right",// title of base layersbaseTitle: "Base Layers",// title of layersoverlayTitle: "Layers",// layers you don't want to manage with layer switcherexcludeLayers: [],// css class of container element, maptalks-layer-switcher by defaultcontainerClass: "maptalks-layer-switcher",},drawMap: {Point: "点",LineString: "线",Polygon: "多边形",Circle: "圆",Ellipse: "椭圆",Rectangle: "长方形",},};},//监听属性 类似于data概念computed: {},//监控data中的数据变化watch: {mapSet: {deep: true,immediate: true,async handler(val) {if (Object.keys(val).length) {let { drawMapType, drawMapArray, editable, draggable } = val;if (this.map) this.map.remove();await this.init();if (drawMapArray && drawMapArray.length > 0) {// console.log("地图获取到所有点位", drawMapArray);drawMapArray.map(i => {// console.log(123, i[0]);let items = i[0]let obj = {drawMapArray: () => {this.startEdit(items, {drawMapType, //点位editable: true,//可编辑的draggable: true, //拖动drawMapArray: items //数据});},drawMapType: () => {this.drawMapType({drawMapType, //点位editable: true,//可编辑的draggable: true, //拖动drawMapArray: items //数据});},};let arrayKeys = Object.keys({drawMapType, //点位editable: true,//可编辑的draggable: true, //拖动drawMapArray: items //数据});arrayKeys.map((items) => {if (obj[items]) return obj[items]();});})// let items2 = [121.720448, 29.978434]// console.log(9992, items2);// let obj2 = {// drawMapArray: () => {// this.startEdit(items2, {// drawMapType, //点位// editable: true,//可编辑的// draggable: true, //拖动// drawMapArray: items2 //数据// });// },// drawMapType: () => {// this.drawMapType({// drawMapType, //点位// editable: true,//可编辑的// draggable: true, //拖动// drawMapArray: items2 //数据// });// },// };// let arrayKeys2 = Object.keys({// drawMapType, //点位// editable: true,//可编辑的// draggable: true, //拖动// drawMapArray: items2 //数据// });// arrayKeys2.map((items2) => {// if (obj2[items2]) return obj2[items2]();// }); // 出现// this.drawMapType({// drawMapType, //点位// editable: true,//可编辑的// draggable: true, //拖动// drawMapArray: undefined //数据// });}this.drawMapType({drawMapType, //点位editable: true,//可编辑的draggable: true, //拖动drawMapArray: undefined //数据});// if (drawMapArray && drawMapArray.length > 0) {// drawMapArray.forEach((item, indexs) => {// console.log(999, item);// let obj = {// drawMapArray: () => {// this.startEdit(item, {// drawMapType, //点位// editable: true,//可编辑的// draggable: true, //拖动// drawMapArray: item //数据// });// },// drawMapType: () => {// this.drawMapType({// drawMapType, //点位// editable: true,//可编辑的// draggable: true, //拖动// drawMapArray: item //数据// });// },// };// let arrayKeys = Object.keys({// drawMapType, //点位// editable: true,//可编辑的// draggable: true, //拖动// drawMapArray: item //数据// });// arrayKeys.map((item) => {// if (obj[item]) return obj[item]();// });// })// } else {// let obj = {// // 绘制图形// drawMapType: () => {// this.drawMapType({// drawMapType, //点位// editable: true,//可编辑的// draggable: true, //拖动// drawMapArray: item //数据// });// },// };// let arrayKeys = Object.keys({// drawMapType, //点位// editable: true,//可编辑的// draggable: true, //拖动// drawMapArray: item //数据// });// arrayKeys.map((item) => {// if (obj[item]) return obj[item]();// });// }// ----------------// // 循环插入多边形// if (drawMapArray && drawMapArray.length > 0) {// drawMapArray.forEach(item => {// let obj = {// // 编辑图形// drawMapArray: () => {// this.startEdit(item, {// drawMapType,// editable,// draggable,// drawMapArray: item// });// },// // 绘制图形// drawMapType: () => {// this.drawMapType({// drawMapType,// editable,// draggable,// drawMapArray: item// });// },// };// let arrayKeys = Object.keys({// drawMapType,// editable,// draggable,// drawMapArray: item// });// arrayKeys.map((item) => {// if (obj[item]) return obj[item]();// });// })// } else {// let obj = {// // 编辑图形// // drawMapArray: () => {// // this.startEdit(item, {// // drawMapType,// // editable,// // draggable,// // drawMapArray// // });// // },// // 绘制图形// drawMapType: () => {// this.drawMapType({// drawMapType,// editable,// draggable,// drawMapArray// });// },// };// let arrayKeys = Object.keys({// drawMapType,// editable,// draggable,// drawMapArray// });// arrayKeys.map((item) => {// if (obj[item]) return obj[item]();// });// }} else {// console.log("销毁地图");if (this.map != undefined) this.map.remove();}},},color: {immediate: true,handler(val) {if (val) {let { drawTool, polygon } = this;if (drawTool) this.changeSymbol("drawTool", drawTool, val);if (polygon) this.changeSymbol("Point", polygon, val);// if (drawTool) {// drawTool.setSymbol({// polygonFill: val, // 图形覆盖颜色// polygonOpacity: 0.3, // 图形覆盖区域透明度// lineColor: val, // 线条颜色// lineWidth: 2 // 线条宽度// });// }// if (polygon) {// polygon.updateSymbol({// polygonFill: val, // 图形覆盖颜色// lineColor: val // 线条颜色// });// }}},},},//生命周期 - 创建完成（可以访问当前this实例）created() { },//生命周期 - 挂载完成（可以访问DOM元素）mounted() {// let a = "rgb(255, 69, 0)";// console.log(a.slice(5, a.length - 1));},// beforeDestroy() {// let { map } = this;// // console.log(// // "🚀 ~ Date:2023/07/11 14:37 ~ File: index.vue ~ Line:154 ----- ",// // 销毁地图// // );// if (map) map.remove();// },//方法集合methods: {// 获取到图层所有的点位extractCoordinates(data) {// console.log("获取到图层所有的点位", data);let datas = []data.forEach(res => {datas.push({"lngWgs": res._coordinates.x,"latWgs": res._coordinates.y})})// console.log(111111, datas);return datas;},// getSent(data) {// let array = []// data.forEach(res => {// let arrray2 = []// res._coordinates.forEach(res2 => {// arrray2.push({// "lngWgs": res2.x,// "latWgs": res2.y,// // "sort": index2// })// })// array.push(arrray2)// })// return array;// },init() {this.$nextTick(() => {let { center, zoom, pitch, minZoom, maxZoom, symbol, layerSwitcherControl, id } = this;this.map = new maptalks.Map(id, {center,zoom,pitch,minZoom,maxZoom,centerCross: true,seamlessZoom: true,attribution: true,zoomControl: true, // add zoom controlscaleControl: true, // add scale controllayerSwitcherControl,symbol,// baseLayer 表示基础图层，它可以添加多个,逗号隔开baseLayer: new maptalks.GroupTileLayer("Base TileLayer", [new maptalks.TileLayer("卫星图", {urlTemplate:"https://t5.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=074d4a21c8f34a3a20cd1f69f81b26bf",subdomains: ["a", "b", "c", "d"],}),new maptalks.TileLayer("Carto light", {visible: false,urlTemplate:"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",subdomains: ["a", "b", "c", "d"],}),new maptalks.TileLayer("Carto dark", {visible: false,urlTemplate:"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",subdomains: ["a", "b", "c", "d"],}),new maptalks.WMSTileLayer("survey", {urlTemplate: "http://10.169.61.30:8080/geoserver/gwc/service/wms",crs: "EPSG:3857",layers: "haigang",styles: "",version: "1.1.1",tileStackDepth: 0,format: "image/png",transparent: true,uppercase: true,zIndex: 1,forceRenderOnMoving: true,forceRenderOnZooming: true,}),]),});// this.layer = new maptalks.VectorLayer("vector").addTo(this.map)this.layer = new maptalks.VectorLayer("vector").addTo(this.map)this.layer2 = new maptalks.VectorLayer("vector2").addTo(this.map)this.map.on("click", function (params) {});this.map.on("editrecord", function (params) {// console.log(params);});});},// 绘制图形drawMapType(val) {// !this.layer ? this.layer = new maptalks.VectorLayer("vector").addTo(this.map) : null// console.log('绘制图形', val, this.map);let { drawMapType, drawMapArray } = val;if (!drawMapArray) {let { map, symbol, color } = this;let that = this;// var layer = new maptalks.VectorLayer("vector").addTo(map);var drawTool = new maptalks.DrawTool({mode: drawMapType,// once: true,// once: false,symbol: drawMapType == "Point" ? null : symbol,}).addTo(map).disable();drawTool.on("drawend", function (param) {// console.log(param.geometry);let { _coordinates } = param.geometry;let array = null;if (drawMapType == "Point") {array = [_coordinates.x, _coordinates.y];} else if (drawMapType == "Polygon") {array = _coordinates.map((item) => {return [item.x, item.y];});}that.dataLis.push(array)// console.log(123, array);that.layer.addGeometry(param.geometry);that.startEdit(array, val, that.dataLis.length - 1);that.layer.remove();that.layer.setZIndex(6);// that.$nextTick(() => {// console.log("绘制好了 发送", that.getSent(that.layer2._geoList));// that.$emit("drawPointChange", that.getSent(that.layer2._geoList));// })// console.log(666666, that.extractCoordinates(that.layer._geoList));that.$emit("drawPointChange", that.extractCoordinates(that.layer._geoList));// console.log(666666, that.layer._geoList);});this.drawTool = drawTool;drawTool.setMode(drawMapType).enable();// 改变覆盖物设置if (color) this.changeSymbol("drawTool", drawTool, color);// if (color) {// drawTool.setSymbol({// polygonFill: color, // 图形覆盖颜色// polygonOpacity: 0.3, // 图形覆盖区域透明度// lineColor: color, // 线条颜色// lineWidth: 2 // 线条宽度// });// }}},// 编辑绘制图形startEdit(array, val) {// let nun = Math.random();// console.log("编辑绘制图形", array, val);let that = this;let { drawMapType, editable, draggable } = val;let { symbol, map, pointSymbol, color } = that;let type = null;let pointArray = _.clone(array);// that.$emit("drawPointChange", pointArray);that.$emit("drawPointChange", that.extractCoordinates(that.layer._geoList));let objArray = [[() => drawMapType == "Point",() => {type = "Marker";},() => {// 更改位置polygon.on("shapechange", function (param) {console.log(110, param, that.extractCoordinates(that.layer2._geoList));// that.extractCoordinates(that.layer._geoList)// let { _coordinates } = param.target;// pointArray = [_coordinates.x, _coordinates.y];// that.$emit("drawPointChange", pointArray);that.$emit("drawPointChange", that.extractCoordinates(that.layer2._geoList));});// 更改位置polygon.on("positionchange", function (param) {console.log(110, param, that.extractCoordinates(that.layer2._geoList));// that.extractCoordinates(that.layer._geoList)// let { _coordinates } = param.target;// pointArray = [_coordinates.x, _coordinates.y];// that.$emit("drawPointChange", pointArray);that.$emit("drawPointChange", that.extractCoordinates(that.layer2._geoList));});// 更改位置polygon.on("remove", function (param) {console.log(110, param, that.extractCoordinates(that.layer2._geoList));// that.extractCoordinates(that.layer._geoList)// let { _coordinates } = param.target;// pointArray = [_coordinates.x, _coordinates.y];// that.$emit("drawPointChange", pointArray);that.$emit("drawPointChange", that.extractCoordinates(that.layer2._geoList));});},]];let state = objArray.find((m) => m[0]());if (state) state[1]();let polygon = new maptalks[type](array, {visible: true,editable,cursor: "pointer",draggable,dragShadow: false,drawOnAxis: null,symbol: drawMapType == "Point" ? null : symbol,});var options = {'items': [{item: '删除', click: function (e) {that.layer2.removeGeometry(polygon);}}]};polygon.setMenu(options).openMenu();// new maptalks.VectorLayer("vectorEdit" + nun, polygon).addTo(map);that.layer2.addGeometry(polygon);// that.layer.addGeometry(polygon);map.fitExtent(polygon.getExtent(), -1); // 自动适配区域 if (color) this.changeSymbol("Point", polygon, color);if (state) state[2]();that.polygon = polygon;},// 覆盖物设置更改changeSymbol(type, mapObj, color) {let obj = {drawTool: () => {mapObj.setSymbol({polygonFill: color, // 图形覆盖颜色polygonOpacity: 0.3, // 图形覆盖区域透明度lineColor: color, // 线条颜色lineWidth: 2, // 线条宽度});},polygon: () => {mapObj.updateSymbol({polygonFill: color, // 图形覆盖颜色lineColor: color, // 线条颜色});},};if (obj[type]) return obj[type]();},},
};
</script>
<style scoped>
.container {width: calc(100% - 50px);/* width: 550px; */min-height: 550px;margin: 15px;
}
</style>这篇关于maptalks 右键删除坐标点位的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
