仅前端

电子围栏根据高德地图API实现简单的前端效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="chrome=1" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><linkrel="stylesheet"href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"type="text/css"/><style>html,body,#container {height: 100%;}.input-item {height: 2.2rem;}.btn {width: 6rem;margin: 0 1rem 0 2rem;}.input-text {width: 4rem;margin-right: 1rem;}#clearAlone {position: fixed;bottom: 6rem;background-color: white;border-width: 0;right: 1rem;box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);display: flex;flex-direction: column;border-radius: 0.4rem;}#clearAlone .btn {margin: 1rem 1rem 0rem 1rem;}#clearAlone .btn:last-child {margin-bottom: 1rem;}</style><title>鼠标工具绘制（电子围栏，矢量图形，矢量编辑）</title><script src="https://webapi.amap.com/maps?v=2.0&key=替换key&plugin=AMap.MouseTool,AMap.PolygonEditor"></script><script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script></head><body><div id="container"></div><div class="info">操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制</div><div id="clearAlone"></div><div class="input-card" style="width: 24rem"><div class="input-item"><input id="clear" type="button" class="btn" value="清除" /><input id="get" type="button" class="btn" value="获取坐标" /></div></div><script type="text/javascript">// 获取本地有没有 startlet previous = localStorage.getItem("previous");if (previous) previous = JSON.parse(previous);// 获取本地有没有 endlet map = new AMap.Map("container", {zoom: 14,});let mouseTool = new AMap.MouseTool(map);// 监听draw事件可获取画好的覆盖物let overlays = []; // 覆盖物存储 （用于最终获取坐标）let polyArr = []; // 编辑的坐标存储 (用于清除的时候也清除编辑的点)mouseTool.on("draw", function (e) {let hex = randomHexColor();overlays.push(e.obj); // 存储信息let polyEditor = new AMap.PolygonEditor(map,e.obj,polygonOptFun({strokeColor: hex,editOptions: {strokeColor: hex,},})); // 编辑插件polyEditor.open(); // 打开编辑polyArr.push(polyEditor); // 存储编辑applyCurFun();});mouseTool.polygon(polygonOptFun());if (previous && previous instanceof Array) {previous.forEach((item) => {let polygon = new AMap.Polygon(polygonOptFun({ ...item }));map.add([...overlays, polygon]); // 添加图层`overlays.push(polygon);let polyEditor = new AMap.PolygonEditor(map,polygon,polygonOptFun({strokeColor: item.strokeColor,editOptions: {strokeColor: item.strokeColor,},})); // 编辑插件polyEditor.open(); // 打开编辑polyArr.push(polyEditor); // 存储编辑});applyCurFun();}// 清除全部的document.getElementById("clear").onclick = function () {polyArr.forEach((item) => {item.close(); // 不执行该操作 会留下编辑的点});map.remove(overlays);overlays = [];applyCurFun();};// ---------------- 获取当前所有的电子围栏坐标 start ------------------------document.getElementById("get").onclick = function () {let allArr = [];let arr = [];overlays.forEach((item) => {let obj = {strokeColor: item._opts.strokeColor,editOptions: item._opts.editOptions,};allArr.push(item.getPath());let path = [];item.getPath().forEach((gItem) => {path.push([gItem.lng, gItem.lat]);});arr.push({ ...obj, path });});// 存储到本地localStorage.setItem("previous", JSON.stringify(arr));};// ---------------- 获取当前所有的电子围栏坐标 end ------------------------// ---------------- 删除 start ------------------------// 事件委托 点击删除事件document.getElementById("clearAlone").onclick = function (e) {e = e || window.event;let target = e.target || e.srcElement;if (target.nodeName.toLowerCase() == "input") {aloneDel(target.dataset.index);}};// 单独删除 方法function aloneDel(index) {polyArr[index].close(); // 不执行该操作 会留下编辑的点map.remove(overlays[index]); // 删除覆盖物overlays.splice(index, 1);polyArr.splice(index, 1);applyCurFun(); // 重新渲染删除按钮}// ---------------- 删除 end ------------------------// ---------------- 其他方法 start ------------------------/*** ! polygon 的参数集合方法* @param { object } obj 自定义配置项*/function polygonOptFun(obj) {return {zIndex: 50, // 多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时，通过该属性使级别较高的多边形覆盖物在上层显示// bubble : '', // 是否将覆盖物的鼠标或touch等事件冒泡到地图上（自v1.3 新增）// cursor : '',  // 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursorstrokeColor: "#1E9FFF", // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FCstrokeOpacity: 1, // 轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9strokeWeight: 2, // 轮廓线宽度fillColor: "#1E9FFF", // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5fillOpacity: 0.1, // 多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5draggable: false, // 设置多边形是否可拖拽移动，默认为falsestrokeStyle: "solid", // 轮廓线样式，实线:solid, 虚线:dashed...obj,};}// 渲染当前的删除按钮(单独按钮)function applyCurFun() {// 如果有了if (overlays.length > 0) {// 则判断最后一个的标点是否小于 2if (overlays[overlays.length - 1].getPath().length < 2) {aloneDel(overlays.length - 1);}}let str = "";overlays.forEach((item, index) => {str += `<input style="color: ${item._opts.strokeColor}; border-color: ${item._opts.strokeColor};" type="button" class="btn" name="aloneDel" data-index="${index}" value="删除围栏${index + 1}" />`;});document.getElementById("clearAlone").innerHTML = str;}// 随机生成十六进制颜色// 参考 https://www.jb51.net/article/102109.htm ||||||||||| https://blog.csdn.net/TheFirstTest/article/details/121945046function randomHexColor() {var hex = Math.floor(Math.random() * 16777216).toString(16); // 生成 ffffff 以内16进制数while (hex.length < 6) {hex = "0" + hex; // while循环判断hex位数，少于6位前面加0凑够6位}return "#" + hex; //返回 '#' 开头16进制颜色}// ---------------- 其他方法 end ------------------------</script></body>
</html>

有用的话点个赞

鼠标工具绘制（电子围栏，矢量图形，矢量编辑）高德地图相关推荐

地图上分成一块一块区域高德地图_在谷歌地图上绘制行政区域轮廓【结合高德地图的API】...
实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...
高德地图api，利用鼠标工具完成电子围栏-----圆形，矩形，自定义并获取坐标
需求:根据下拉框选择的不同,在地图上绘制不同的图形并获取坐标.这篇文章只完成了部分功能,电子围栏最终版在我的另一篇文章中,大家可以选择性查看.电子围栏终版注意,这个要在全局中引入amap 1,先下载 ...
设置电子围栏高德地图_Java实现高德地图地理围栏设置功能工具类
[Java] 纯文本查看复制代码import com.alibaba.fastjson.JSONObject; import org.apache.http.client.methods.*; im ...
android高德地图绘制多边形_exlive1.0BS网上查车完善电子围栏：行政区域、多边形、规划线路...
exlive1.0位置服务平台--BS网上查车完善行政区域.多边形.规划线路三种电子围栏.已创建围栏支持在围栏列表选择,地图展示,直观查看. ①行政区域围栏:支持行政区域围栏创建,可设置驶入.驶出报警 ...
小白的高德地图初体验(四)—— 矢量图形
小白的高德地图初体验(四)-- 矢量图形这里是官方文档☛☛☛传送门,走你~~ ☞☞小白的高德地图初体验(一) -- 打点 ☞☞小白的高德地图初体验(二)--点聚合 ☞☞小白的高德地图初体验(三) - ...
实用工具|零代码实现高德地图POI数据下载
1 工具获取方式点击下面链接,即可获取地理坐标系转换工具地理坐标系转换工具 2 工具介绍高德地图POI数据下载工具(下文称该工具)是一款能够让用户在不写代码的前提下实现高德地图POI数据批量下载 ...
【应用】Python利用高德地图经纬度数据绘制定位
[应用]Python利用高德地图经纬度数据绘制定位一. 背景二. 获取API 1. 注册高德开放平台个人开发者 2. 获取key 三. 具体步骤 1. 库的导入 2. 根据地址获取经纬度 3. 绘 ...
项目 - Web地图开发【高德地图API】(一)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...

鼠标工具绘制（电子围栏，矢量图形，矢量编辑）高德地图

仅前端

电子围栏根据高德地图API实现简单的前端效果

鼠标工具绘制（电子围栏，矢量图形，矢量编辑）高德地图相关推荐

最新文章

热门文章

鼠标工具绘制（电子围栏，矢量图形，矢量编辑） 高德地图

仅前端

电子围栏 根据高德地图API实现简单的前端效果

鼠标工具绘制（电子围栏，矢量图形，矢量编辑） 高德地图相关推荐

最新文章

热门文章

鼠标工具绘制（电子围栏，矢量图形，矢量编辑）高德地图

电子围栏根据高德地图API实现简单的前端效果

鼠标工具绘制（电子围栏，矢量图形，矢量编辑）高德地图相关推荐