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。

相关文章

MySQL逻辑删除与唯一索引冲突解决方案

MySQL逻辑删除与唯一索引冲突解决方案

《MySQL逻辑删除与唯一索引冲突解决方案》本文探讨MySQL逻辑删除与唯一索引冲突问题,提出四种解决方案：复合索引+时间戳、修改唯一字段、历史表、业务层校验,推荐方案1和方案3,适用于不同场景,感兴... 目录问题背景问题复现解决方案解决方案1.复合唯一索引 + 时间戳删除字段解决方案2：删除后修改唯一字
阅读更多...
使用Python删除Excel中的行列和单元格示例详解

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定
阅读更多...
Linux下删除乱码文件和目录的实现方式

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》：本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录
阅读更多...
Mysql实现范围分区表(新增、删除、重组、查看)

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型（范围、哈希、列表、键值）,主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区（Range Partitioning1、新建分区表：2、分
阅读更多...
MySQL 删除数据详解(最新整理)

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》：本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法： 示例：2.TRUNCATE语句✅ 基本语
阅读更多...
一文详解Git中分支本地和远程删除的方法

一文详解Git中分支本地和远程删除的方法

《一文详解Git中分支本地和远程删除的方法》在使用Git进行版本控制的过程中,我们会创建多个分支来进行不同功能的开发,这就容易涉及到如何正确地删除本地分支和远程分支,下面我们就来看看相关的实现方法吧... 目录技术背景实现步骤删除本地分支删除远程www.chinasem.cn分支同步删除信息到其他机器示例步骤
阅读更多...
python删除xml中的w:ascii属性的步骤

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as
阅读更多...
Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》：本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面，查看左下角从左
阅读更多...
如何在Mac上彻底删除Edge账户? 手动卸载Edge浏览器并清理残留文件技巧

如何在Mac上彻底删除Edge账户? 手动卸载Edge浏览器并清理残留文件技巧

《如何在Mac上彻底删除Edge账户?手动卸载Edge浏览器并清理残留文件技巧》Mac上的Edge账户里存了不少网站密码和个人信息，结果同事一不小心打开了，简直尴尬到爆炸，想要卸载edge浏览器并清... 如果你遇到 Microsoft Edge 浏览器运行迟缓、频繁崩溃或网页加载异常等问题，可以尝试多种方
阅读更多...
Java实现删除文件中的指定内容

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2