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。

相关文章

Redis过期删除机制与内存淘汰策略的解析指南

Redis过期删除机制与内存淘汰策略的解析指南

《Redis过期删除机制与内存淘汰策略的解析指南》在使用Redis构建缓存系统时,很多开发者只设置了EXPIRE但却忽略了背后Redis的过期删除机制与内存淘汰策略,下面小编就来和大家详细介绍一下... 目录1、简述2、Redis http://www.chinasem.cn的过期删除策略（Key Expir
阅读更多...
使用C#删除Excel表格中的重复行数据的代码详解

使用C#删除Excel表格中的重复行数据的代码详解

《使用C#删除Excel表格中的重复行数据的代码详解》重复行是指在Excel表格中完全相同的多行数据,删除这些重复行至关重要,因为它们不仅会干扰数据分析,还可能导致错误的决策和结论,所以本文给大家介绍... 目录简介使用工具C# 删除Excel工作表中的重复行语法工作原理实现代码C# 删除指定Excel单元
阅读更多...
Python实现pdf电子发票信息提取到excel表格

Python实现pdf电子发票信息提取到excel表格

《Python实现pdf电子发票信息提取到excel表格》这篇文章主要为大家详细介绍了如何使用Python实现pdf电子发票信息提取并保存到excel表格,文中的示例代码讲解详细,感兴趣的小伙伴可以跟... 目录应用场景详细代码步骤总结优化应用场景电子发票信息提取系统主要应用于以下场景：企业财务部门：需
阅读更多...
Python对PDF书签进行添加,修改提取和删除操作

Python对PDF书签进行添加,修改提取和删除操作

《Python对PDF书签进行添加,修改提取和删除操作》PDF书签是PDF文件中的导航工具,通常包含一个标题和一个跳转位置,本教程将详细介绍如何使用Python对PDF文件中的书签进行操作... 目录简介使用工具python 向 PDF 添加书签添加书签添加嵌套书签Python 修改 PDF 书签Pytho
阅读更多...
C#实现查找并删除PDF中的空白页面

C#实现查找并删除PDF中的空白页面

《C#实现查找并删除PDF中的空白页面》PDF文件中的空白页并不少见,因为它们有可能是作者有意留下的,也有可能是在处理文档时不小心添加的,下面我们来看看如何使用Spire.PDFfor.NET通过C#... 目录安装 Spire.PDF for .NETC# 查找并删除 PDF 文档中的空白页C# 添加与删
阅读更多...
SQL常用操作精华之复制表、跨库查询、删除重复数据

SQL常用操作精华之复制表、跨库查询、删除重复数据

《SQL常用操作精华之复制表、跨库查询、删除重复数据》：本文主要介绍SQL常用操作精华之复制表、跨库查询、删除重复数据,这些SQL操作涵盖了数据库开发中最常用的技术点,包括表操作、数据查询、数据管... 目录SQL常用操作精华总结表结构与数据操作高级查询技巧SQL常用操作精华总结表结构与数据操作复制表结
阅读更多...
redis过期key的删除策略介绍

redis过期key的删除策略介绍

《redis过期key的删除策略介绍》：本文主要介绍redis过期key的删除策略,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录第一种策略：被动删除第二种策略：定期删除第三种策略：强制删除关于big key的清理UNLINK命令FLUSHALL/FLUSHDB命
阅读更多...
使用C#代码在PDF文档中添加、删除和替换图片

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当
阅读更多...
macOS无效Launchpad图标轻松删除的4 种实用方法

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中，并且长按图标也不会出现删除符号，下面解决这个问... 在 MACOS 上，Launchpad（也就是「启动台」）是一个便捷的 App 启动工具。但有时候，应
阅读更多...
Mysql删除几亿条数据表中的部分数据的方法实现

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2