高德地图

2024-05-23 22:15| 来源: 网络整理| 查看: 265

史上最完整的实现高德地图多边形电子围栏：

主要功能：多边形的初始渲染，点击编辑进入编辑状态，方可进行添加、右击删除、双击选中编辑，以及每个多边形的label名称居中展示

来先看效果图，嘻嘻~~~

--------------------------------------------------

好了，直接上代码，直接复制即可用

注意：只要替换成自己的key值就好

html, body, #container { width: 100%; height: 100%; } 高德地图-电子围栏-多边形增删改编辑图形添加图形取消保存 var map = null; var polyEditor = null; //多边形编辑器 var pathArr = []; //获取后台模拟数据 var polygonArr = []; //地图上所有的多边形 var labelArr = [] //地图上所有多边形所对应的名称 var isEdit = false; //是否处于可编辑状态 initMap(); //初始化地图 //初始化地图 function initMap() { map = new AMap.Map("container", { center: [116.400274, 39.905812], zoom: 14 }); getInitMapData() //获取初始地图多边形数据 } //获取初始地图多边形数据 function getInitMapData() { var path1 = [[116.475334, 39.997534], [116.476627, 39.998315], [116.478603, 39.99879], [116.478529, 40.000296], [116.475082, 40.000151], [116.473421, 39.998717]] var path2 = [[116.474595, 40.001321], [116.473526, 39.999865], [116.476284, 40.000917]] pathArr = [ { path: path1, mapId: 1, }, { path: path2, mapId: 2, }, ] showInitPolygon(); //初始展示所有多边形 } //初始展示所有多边形 function showInitPolygon() { var dealPolygonArr = [] var dealLabelArr = [] pathArr && pathArr.forEach((el, index) => { var polygon = new AMap.Polygon({ path: el.path, fillColor: "#FF8D8D", fillOpacity: 0.3, strokeWeight: 3, strokeColor: "#FF8D8D", strokeOpacity: 1, zIndex: 1, extData: { mapId: el.mapId, } }) var label = showText(polygon); //每个多边形添加label // dealPolygonArr.push(polygon) polygonArr = dealPolygonArr // dealLabelArr.push(label) labelArr = dealLabelArr }) map.add(polygonArr); // 缩放地图到合适的视野级别 map.setFitView(polygonArr) } //每个多边形添加label function showText(polygon) { var point = getCenterPoint(polygon.getPath()); //获得中心点 var label = new AMap.Text({ text: 'labelname', anchor: 'center', // 设置文本标记锚点 style: { 'background-color': 'transparent', 'border-width': 0, 'text-align': 'center', 'font-size': '14px', 'color': '#444444', }, // offset: new AMap.Pixel(0, 0), position: point }); label.setMap(map); return label; } // 获得图形的中心点 function getCenterPoint(path) { var x = 0.0; var y = 0.0; for (var i = 0; i < path.length; i++) { x = x + parseFloat(path[i].lng); y = y + parseFloat(path[i].lat); } x = x / path.length; y = y / path.length; return new AMap.LngLat(x, y); } //添加多边形 function addPolygon() { drawPolygon(); } //绘制多边形 function drawPolygon() { polyEditor.close(); polyEditor.setTarget(); polyEditor.open(); } //开启多边形编辑 function editPolygon() { initEditor(); //初始化地图编辑器 isEdit = true; // polyEditor.open(); } //初始化地图编辑器 function initEditor() { polyEditor = new AMap.PolygonEditor(map) polyEditor.addAdsorbPolygons(polygonArr); polyEditor._opt.createOptions = { // 创建区域的样式 fillColor: "#FF8D8D", fillOpacity: 0.3, strokeWeight: 3, strokeColor: "#FF8D8D", strokeOpacity: 1, }; polyEditor._opt.editOptions = {// 编辑区域的样式 fillColor: "#FF8D8D", fillOpacity: 0.3, strokeWeight: 3, strokeColor: "#FF8D8D", strokeOpacity: 1, }; // polyEditor.midControlPoint = { // 点位样式 // fillColor: "#FF8D8D", // fillOpacity: 1, // strokeWeight: 2, // strokeColor: "#FF8D8D", // bubble: false, // clickable: true, // cursor: "pointer", // }; // polyEditor.controlPoint = {// 点位样式 // fillOpacity: 1, // strokeWeight: 2, // strokeColor: "#FF8D8D", // bubble: false, // clickable: true, // cursor: "pointer", // }; polygonArr && polygonArr.forEach((polygon, index) => { //多边形添加双击事件 polygon.on('dblclick', () => { if (polyEditor) { polyEditor.setTarget(polygon); polyEditor.open(); } }) //绑定右击事件——弹出右键菜单 polygon.on('rightclick', function (e) { clearOne(e.lnglat, polygon, labelArr[index]); //创建右键菜单menu 删（删除多边形） }); // //鼠标高亮效果 // polygon.on('mouseover', function (e) { // polygon.setOptions({ // fillColor: '#1791fc', // }) // }); // polygon.on('mouseout', function (e) { // polygon.setOptions({ // fillColor: '#FF8D8D', // }) // }); }) //多边形添加 polyEditor.on('add', function (data) { console.log('add'); var polygon = data.target; // polyEditor.addAdsorbPolygons(polygon); polygonArr.push(polygon); // var label = showText(polygon); //每个多边形添加label labelArr.push(label) // 双击图层进行编辑 polygon.on('dblclick', () => { if (polyEditor) { polyEditor.setTarget(polygon); polyEditor.open(); } }) //绑定右击事件——弹出右键菜单 polygon.on('rightclick', function (e) { clearOne(e.lnglat, polygon, label); //创建右键菜单menu 删（删除多边形） }); // setTimeout(() => { // addPolygon(); //添加多边形 // }, 400) }) } //创建右键菜单删（删除多边形） function clearOne(lnglat, onePolygon, oneLabel) { var rightMenu = new AMap.ContextMenu(); rightMenu.addItem('删除', function (e) { // if (that.isEdit) { removePolygon(onePolygon, oneLabel); rightMenu.close() // } else { // that.$messageBlock('error', '当前未在编辑状态'); // } }, 0); rightMenu.open(map, lnglat); } //删除某个多边形 function removePolygon(onePolygon, oneLabel) { polyEditor.close(); //关闭编辑器 map.remove(onePolygon); map.remove(oneLabel); // 获取覆盖物 var overlays = map.getAllOverlays('polygon'); polygonArr = overlays } //保存绘制数据 function submitData(flag) { if (flag == 1) { //取消 polyEditor.close(); polyEditor = null; isEdit = false; map.clearMap(); // 清除地图上所有添加的覆盖物 getInitMapData() //获取初始地图多边形数据 } else if (flag == 2) { //保存 console.log(polygonArr) } }

最后，如果有用，点个赞啦~~~ 哈哈哈

【本文地址】

公司简介

联系我们