maptalks 右键删除多边形 电子围栏

2024-01-24 22:04
文章标签 多边形 删除 电子 右键 围栏 maptalks

本文主要是介绍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",},// 电子地图图层// urlTemplate: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",// subdomains: ["a", "b", "c", "d"],// attribution://   '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'// urlTemplate://   "https://gss{s}.bdstatic.com/8bo_dTSlRsgBo1vgoIiO_jowehsv/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20170927",// subdomains: [0, 1, 2, 3],// attribution://   '&copy; <a target="_blank" href="http://map.baidu.com">Baidu</a>'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 != undefined) this.map.remove();await this.init();//  循环插入多边形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) {// console.log("🚀 ~ Date:2023/06/15 17:14 ~ File: index.vue ~ Line:118 ----- ", val);if (val) {let { drawTool, polygon } = this;if (drawTool) this.changeSymbol("drawTool", drawTool, val);if (polygon) this.changeSymbol("polygon", 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: {// 获取到图层所有的点位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) {//   console.log(666, 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));})});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);let objArray = [[() => drawMapType == "Polygon", () => {type = "Polygon"},() => {polygon.startEdit();// 更改形状polygon.on("shapechange", function (param) {let { _coordinates } = param.target;pointArray = _coordinates.map((item) => {// console.log("111111111111111111", that.getSent(that.layer2._geoList));return [item.x, item.y];});that.$emit("drawPointChange", that.getSent(that.layer2._geoList));});// 更改位置polygon.on("positionchange", function (param) {let { _coordinates } = param.target;pointArray = _coordinates.map((item) => {return [item.x, item.y];});that.$emit("drawPointChange", that.getSent(that.layer2._geoList));});// 监听删除polygon.on("remove", function (param) {let { _coordinates } = param.target;pointArray = _coordinates.map((item) => {return [item.x, item.y];});that.$emit("drawPointChange", that.getSent(that.layer2._geoList));});// 监听右键点击事件// polygon.on("contextmenu", function (e) {//   console.log(112233, e);//   // 判断点击的是否为多边形//   if (e.target instanceof maptalks.Polygon) {//     // 删除多边形//     map.removeGeometry(e.target);//   }// });},],];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,});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("polygon", 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]();},// 绘制多边形// addPoint(val) {//   // console.log(this.map,66);//   let layer = new maptalks.VectorLayer("vector").addTo(this.map);//   // console.log(layer,"tu");//   val.forEach((item) => {//     let polygon = new maptalks.Polygon(item, {//       visible: true,//       editable: false,//       cursor: "pointer",//       draggable: false,//       dragShadow: false,//       drawOnAxis: null,//       // properties: {//       //   name,//       // },//       symbol: [//         {//           lineColor: "skyblue",//           lineWidth: 1,//           polygonFill: "skyblue",//           polygonOpacity: 0.1,//         },//       ],//     }).addTo(layer);//     //  polygon.setZIndex(0)//     layer.setZIndex(1);//   });// },// 绘制2dmark// addMark(val) {//   console.log(val, 6677);//   this.layer = new maptalks.VectorLayer("vector2").addTo(this.map);//   val.forEach((item) => {//     let sort = item.sort;//     let file = require("@/assets/warehouseWeb/equipment/001.png");//     let marker = new maptalks.Marker(item.list, {//       properties: {//         sort,//       },//       symbol: [//         {//           markerType: "path",//           markerFile: file,//           markerWidth: {//             stops: [//               [7, 15],//               [18, 25],//             ],//           },//           markerHeight: {//             stops: [//               [7, 15],//               [18, 25],//             ],//           },//           markerDx: 0,//           markerDy: 20,//           markerOpacity: 1,//         },//         {//           textFaceName: "sans-serif",//           textName: "{sort}",//           textSize: 12,//           textDy: 30,//           textFill: "#7ee6ed",//         },//       ],//     });//     this.layer.addGeometry(marker);//   });// },// 绘制3dmark// addMark3d(val) {//   console.log(val, 6677);//   this.layer2 = new maptalks.VectorLayer("vector3").addTo(this.map);//   val.forEach((item) => {//     let sort = item.sort;//     let file = require("@/assets/warehouseWeb/equipment/001.png");//     let marker = new maptalks.Marker(item.list, {//       properties: {//         sort,//       },//       symbol: [//         {//           markerType: "path",//           markerFile: file,//           markerWidth: {//             stops: [//               [7, 15],//               [18, 25],//             ],//           },//           markerHeight: {//             stops: [//               [7, 15],//               [18, 25],//             ],//           },//           markerDx: 0,//           markerDy: 20,//           markerOpacity: 1,//         },//         {//           textFaceName: "sans-serif",//           textName: "{sort}",//           textSize: 12,//           textDy: 30,//           textFill: "#7ee6ed",//         },//       ],//     });//     this.layer2.addGeometry(marker);//   });// },},
};
</script>
<style scoped>
.container {width: calc(100% - 50px);/* width: 550px; */min-height: 550px;margin: 15px;
}
</style>

 

这篇关于maptalks 右键删除多边形 电子围栏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/641155。

相关文章

C#实现添加/替换/提取或删除Excel中的图片

C#实现添加/替换/提取或删除Excel中的图片

《C#实现添加/替换/提取或删除Excel中的图片》在Excel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更加美观,下面我们来看看如何在C#中实现添加/替换/提取或删除E... 在Excandroidel中插入与数据相关的图片，能将关键数据或信息以更直观的方式呈现出来，使文档更
阅读更多...
Python脚本实现自动删除C盘临时文件夹

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用
阅读更多...
Git中恢复已删除分支的几种方法

Git中恢复已删除分支的几种方法

《Git中恢复已删除分支的几种方法》：本文主要介绍在Git中恢复已删除分支的几种方法,包括查找提交记录、恢复分支、推送恢复的分支等步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录1. 恢复本地删除的分支场景方法2. 恢复远程删除的分支场景方法3. 恢复未推送的本地删除分支场景方法4. 恢复
阅读更多...
使用Python实现在Word中添加或删除超链接

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中，超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超
阅读更多...
Oracle数据库使用 listagg去重删除重复数据的方法汇总

Oracle数据库使用 listagg去重删除重复数据的方法汇总

《Oracle数据库使用listagg去重删除重复数据的方法汇总》文章介绍了在Oracle数据库中使用LISTAGG和XMLAGG函数进行字符串聚合并去重的方法,包括去重聚合、使用XML解析和CLO... 目录案例表第一种：使用wm_concat() + distinct去重聚合第二种：使用listagg，
阅读更多...
Java操作PDF文件实现签订电子合同详细教程

Java操作PDF文件实现签订电子合同详细教程

《Java操作PDF文件实现签订电子合同详细教程》：本文主要介绍如何在PDF中加入电子签章与电子签名的过程,包括编写Word文件、生成PDF、为PDF格式做表单、为表单赋值、生成文档以及上传到OB... 目录前言：先看效果：1.编写word文件1.2然后生成PDF格式进行保存1.3我这里是将文件保存到本地后
阅读更多...
Redis过期键删除策略解读

Redis过期键删除策略解读

《Redis过期键删除策略解读》Redis通过惰性删除策略和定期删除策略来管理过期键,惰性删除策略在键被访问时检查是否过期并删除,节省CPU开销但可能导致过期键滞留,定期删除策略定期扫描并删除过期键,... 目录1.Redis使用两种不同的策略来删除过期键，分别是惰性删除策略和定期删除策略1.1惰性删除策略
阅读更多...
SpringBoot项目删除Bean或者不加载Bean的问题解决

SpringBoot项目删除Bean或者不加载Bean的问题解决

《SpringBoot项目删除Bean或者不加载Bean的问题解决》文章介绍了在SpringBoot项目中如何使用@ComponentScan注解和自定义过滤器实现不加载某些Bean的方法,本文通过实... 使用@ComponentScan注解中的@ComponentScan.Filter标记不加载。@C
阅读更多...
MySQL中删除重复数据SQL的三种写法

MySQL中删除重复数据SQL的三种写法

《MySQL中删除重复数据SQL的三种写法》：本文主要介绍MySQL中删除重复数据SQL的三种写法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下... 目录方法一：使用 left join + 子查询删除重复数据(推荐)方法二：创建临时表(需分多步执行，逻辑清晰，但会
阅读更多...
Python按条件批量删除TXT文件行工具

Python按条件批量删除TXT文件行工具

《Python按条件批量删除TXT文件行工具》这篇文章主要为大家详细介绍了Python如何实现按条件批量删除TXT文件中行的工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.简介2.运行效果3.相关源码1.简介一个由python编写android的可根据TXT文件按条件批
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2