百度地图绘制电子围栏(包括移动端绘制操作)以及检测坐标是否在电子围栏内

由于本人在PC端仅使用了多边形绘制，但矩形跟多边形用法基本一样，圆形并未使用，如不符合读者需求也可以参考一下。

绘制后得到的数据可能不同，但绘制方法仅仅是传递的参数不同。

关于给坐标数组在地图绘制图形的效果在移动端部分包含。

一、绘制需要引入的文件

1.首先肯定包括咱们最需要的百度地图的文件

<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=申请的ak"></script> 
<!-- 注意切换为自己申请的ak -->

2.随后需要的则是我们绘制所需要的文件，一个css文件，一个js文件

<!-- JS文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<!-- CSS文件 -->
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css">

3.最后则是我们判断坐标是否在电子围栏内的js文件

<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

做完这些准备后我们就可以在代码中进行使用了

二、PC端进行绘制

其实绘制也很简单，我使用的操作也更简单一些，这里主要使用的则是BMapLibrary - BMapLib.DrawingManager (baidu.com)

这个方法，同时这个方法可以控制显示一个工具条(说实话，感觉有点老...)

    onMounted(() => {init()})function init() {// 这里的 map 和 drawingManager 都是全局变量，在这里初始化，在其他地方都需要使用map = new BMap.Map("allmap", { enableMapClick: false });map.centerAndZoom(new BMap.Point(103.388611, 35.563611), 5);map.setCurrentCity("北京");map.enableScrollWheelZoom();// 初始化部分，根据自己需求适当修改drawingManager = new BMapLib.DrawingManager(map, {isOpen: false, // 是否开启绘制模式，肯定是我们交互之后才需要开启了，所以要先关闭enableDrawingTool: false, // 是否显示工具栏，默认开启，但是太丑了就不开了});drawingManager.addEventListener('overlaycomplete', overlaycomplete); // 绘制完成事件}// 绘制完成事件的处理函数(获取绘制的数据)function overlaycomplete(e) {// e.overlay.Po 就是绘制的数据,多边形和矩形的数据都是数组包含各个角的坐标，圆形则不太了解了// 这里可以根据自己的业务需求进行处理console.log(e.overlay.Po);};// 绘制图形的函数function setDrawingMode(mode) {// mode:代表我们需要绘制的图形// BMAP_DRAWING_POLYGON:多边形// BMAP_DRAWING_RECTANGLE:矩形// BMAP_DRAWING_CIRCLE:圆形// 这里可以根据自己的业务需求进行传参drawingManager.setDrawingMode(mode);// 开启绘制模式drawingManager.open();}

这里我们自定义按钮给 setDrawingMode 函数传参即可，从 overlayconplete 函数中获取绘制结果。

注意：因为多边形双击即可完成绘制，但其他图形不可以，我们可以添加一个完成绘制的按钮，函数中使用 drawingManager.close() 即可

三、移动端进行绘制

这里先讲一下移动端的思路，如果不适合或者感觉有更好的想法可以在评论区发表建议哈。

感觉移动端整体还是不适合做这个效果的，也有可能是我太菜了。

整体思路是：自定义添加按钮 => 点击地图 => 获取点击坐标 => 根据坐标生成一个长宽为1米的矩形 => 绘制到地图上，同时有一个弹框，可以修改宽高，修改后，确定按钮则会将数据保存，取消按钮则取消绘制。

在上述的第二个步骤会禁用地图的拖拽和双指操作缩放，因为会影响地图的点击事件，点击时移动一点都不会触发点击事件，触发拖拽事件，很麻烦。

    // 这里不展示弹框代码了，直接展示变量，默认为1米const formInline = ref({wide: 1,long: 1});// 自定义的添加围栏函数function addFence() {map.disableDragging(); // 禁止拖动地图map.disablePinchToZoom(); // 禁用双指操作缩放map.addEventListener('click', mapClick);};// 地图的点击事件const pointRectangle = ref();function mapClick(e) {// pointRectangle全局变量，后续封装的函数会用到pointRectangle.value = { lng: e.point.lng, lat: e.point.lat };let point = new BMap.Point(pointRectangle.value.lng, pointRectangle.value.lat);changeRect();};const EARTH_RADIUS = 6378137;function metersToLatitudeDegrees(meters) {return meters / (EARTH_RADIUS * Math.PI / 180);};function metersToLongitudeDegrees(meters, latitude) {const metersPerDegree = EARTH_RADIUS * Math.cos(latitude * Math.PI / 180) * Math.PI / 180;return meters / metersPerDegree;};// 根据点击的那个坐标点以及长宽，计算围栏的四个点坐标，并画出围栏const rectangularBox = ref(undefined);function changeRect() {let centerLat = pointRectangle.value.lat;let centerLng = pointRectangle.value.lng;let latOffset = metersToLatitudeDegrees(formInline.value.long * 500);let lngOffset = metersToLongitudeDegrees(formInline.value.wide * 500, centerLat);const pointArr = [new BMap.Point(centerLng + lngOffset, centerLat + latOffset),new BMap.Point(centerLng - lngOffset, centerLat + latOffset),new BMap.Point(centerLng - lngOffset, centerLat - latOffset),new BMap.Point(centerLng + lngOffset, centerLat - latOffset),];// rectangularBox 全局变量，我们取消按钮的移出则是传入这个数据rectangularBox.value = new BMap.Polygon(pointArr);map.addOverlay(rectangularBox.value);// 根据绘制的图形适当修改地图的可视区域map.setViewport(pointArr);};// 自定义确定按钮的点击事件function onSub() {map.removeEventListener('click', mapClick);formInline.value = {wide: 1,long: 1};// 溢出监听、重置数据map.enableDragging(); // 启用拖动地图map.enablePinchToZoom(); // 启用双指操作缩放// 可以根据自己需求添加更多的功能};// 自定义取消按钮的点击事件function onCancel() {map.removeEventListener('click', mapClick);formInline.value = {wide: 1,long: 1};map.removeOverlay(rectangularBox.value);rectangularBox.value = undefined;map.centerAndZoom(new BMap.Point(103.388611, 35.563611), 5); //初始显示中国。};

四、删除电子围栏

删除的话就展示两句代码了，很好理解

    const pointArr = [new BMap.Point(centerLng + lngOffset, centerLat + latOffset),new BMap.Point(centerLng - lngOffset, centerLat + latOffset),new BMap.Point(centerLng - lngOffset, centerLat - latOffset),new BMap.Point(centerLng + lngOffset, centerLat - latOffset),];// new BMap.Polygon的参数则必须是通过new BMap.Point创建的点数组rectangularBox.value = new BMap.Polygon(pointArr);// removeOverlay的参数必须是通过new BMap.Polygon创建的对象map.removeOverlay(rectangularBox.value);

五、检测点坐标是否在电子围栏内

这里使用的是咱们引用的 GeoUtils

    // point 是一个通过new BMap.Point(x, y)创建的点对象// pointList 是一个通过new BMap.Polygon(pointList)创建的多边形对象，和删除所需要的数据同理// 返回的数据未布尔值， true 表示在多边形内 false 表示在多边形外let flag = BMapLib.GeoUtils.isPointInPolygon(point, pointList);

那么以上便是本次的分享了，如果有什么问题或建议，欢迎评论交流

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/415102.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深度学习系列74：语音中的mel谱

深度学习系列74：语音中的mel谱

1 mel谱介绍 一个人说一句话&#xff0c;其 waveform 可以很不一样&#xff0c;但是 spectrogram 基本上会相似&#xff0c;甚至有人可以通过 spectrogram 来判断说话的内容。语谱图的横坐标是时间&#xff0c;纵坐标是频率&#xff0c;坐标点值为语音数据能量。由于是采用二维…
阅读更多...
# 利刃出鞘_Tomcat 核心原理解析（十一）-- WebSocket -- 1

# 利刃出鞘_Tomcat 核心原理解析（十一）-- WebSocket -- 1

利刃出鞘_Tomcat 核心原理解析&#xff08;十一&#xff09;-- Tomcat 附加功能 WebSocket – 1 一、Tomcat专题 - WebSocket - 介绍 1、Tomcat 附加功能&#xff1a;websocket 介绍 1&#xff09;websocket &#xff1a;是 HTML5 新增的协议&#xff0c;它的目的是在浏览器…
阅读更多...
动态规划法-资源分配问题

动态规划法-资源分配问题

动态规划法 - 资源分配问题 问题描述 把4个份额的资源分配给3个工程&#xff0c;给定利润表如下表所示&#xff0c;写出资源的最优分配方案的求解过程。 4份资源分配给3个工程的利润表 步骤一&#xff1a;求各个阶段不同分配份额时的最大利润及分配份额 目标 我们的目标是…
阅读更多...
53 mysql pid 文件的创建

53 mysql pid 文件的创建

前言 接上一篇文章 mysql 启动过程中常见的相关报错信息 在 mysql 中文我们在 “service mysql start”, “service mysql stop” 经常会碰到 mysql.pid 相关的错误信息 比如 “The server quit without updating PID file” 我们这里来看一下 mysql 中 mysql.pid 文件的…
阅读更多...
微积分复习笔记 Calculus Volume 1 - 1.3Trigonometric Functions

微积分复习笔记 Calculus Volume 1 - 1.3Trigonometric Functions

1.3 Trigonometric Functions - Calculus Volume 1 | OpenStax
阅读更多...
自己开发完整项目一、登录功能-05(动态权限控制)

自己开发完整项目一、登录功能-05(动态权限控制)

一、上节回顾 在上一节中&#xff0c;我们介绍了如何通过数据库查询用户的权限&#xff0c;并对方法级别的接口使用注解的方式进行权限控制&#xff0c;之后通过用户携带的tocken进行解析权限&#xff0c;判断是否可以访问。 具体步骤&#xff1a; 1.在查询用户信息的时候将用户…
阅读更多...
map和set的封装

map和set的封装

目录 一、红黑树的改造 1.1节点的定义 二、红黑树的迭代器 2.1用节点封装迭代器 2.2迭代器的实现 2.3map和set的迭代器 三、insert的返回值 3.1insert返回值的用处 3.2operator[ ]的实现 四、key不能修改的问题 封装map和set一般分为六步&#xff1a; 封装map和set …
阅读更多...
MFC生成dll的区别

MFC生成dll的区别

主要分三种&#xff1a; A. 动态链接库(dll) B.具有导出项的(dll)动态链接库 C.MFC动态链接库 对比项目&#xff1a;可以根据需要选择哪种dll方便 添加自定义导出功能Demo 1. 添加导出实现接口&#xff1a; A. 导出需要具有&#xff1a;__declspec(dllexport) B. 按照C语言…
阅读更多...
Javascript LeeCode选题（汉诺塔求解）

Javascript LeeCode选题（汉诺塔求解）

LeeCode选题 汉诺塔递归求解move移动函数hanoi函数main方法测试代码&#xff1a;代码实现 汉诺塔递归求解 汉诺塔介绍&#xff1a; 汉诺塔的的图形&#xff08;从上到下1&#xff0c;2&#xff0c;3个&#xff09;实现&#xff1a; 这里我们可以看到因为必须要将第n个移动到…
阅读更多...
Spring中基于redis stream 的消息队列实现方法

Spring中基于redis stream 的消息队列实现方法

本文主要介绍了消息队列的概念性质和应用场景&#xff0c;介绍了kafka、rabbitMq常用消息队列中间件的应用模型及消息队列的实现方式&#xff0c;并实战了在Spring中基于redis stream 的消息队列实现方法。 一、消息队列 消息队列是一种进程间通信或者同一个进程中不同线程间的…
阅读更多...
uni-app 获取当前位置的经纬度以及地址信息

uni-app 获取当前位置的经纬度以及地址信息

文章目录 uni.getLocation(objc)获取经纬度和地址调试结果问题 uni-app 获取当前位置的经纬度以及地址信息 uni.getLocation(objc) uni-app官方文档定位API: uni.getLocation(OBJECT) uni.getLocation({type: wgs84,success: function (res) {console.log(当前位置的经度&…
阅读更多...
【系统架构设计】嵌入式系统设计（1）

【系统架构设计】嵌入式系统设计（1）

【系统架构设计】嵌入式系统设计&#xff08;1&#xff09; 嵌入式系统概论嵌入式系统的组成硬件嵌入式处理器总线存储器I/O 设备与接口 软件 嵌入式开发平台与调试环境交叉平台开发环境交叉编译环境调试 嵌入式系统概论 嵌入性、专用性、计算机系统是嵌入式系统的三个基本的核…
阅读更多...
【话题讨论】VS Code：倍增编程动力，实现效率飞跃

【话题讨论】VS Code：倍增编程动力，实现效率飞跃

目录 引言 一、详情介绍 功能特点 使用场景 提高工作效率 二、效率对比 2.1 高度可定制性与丰富的插件生态 2.2 智能的代码补全与导航 2.3 内置的调试器与版本控制集成 2.4 轻量级与跨平台 2.5 选择合适工具的重要性 2.6 实际案例或数据展示 三、未来趋势 3.1 编…
阅读更多...
能见度监测站—实时监测道路能见度情况

能见度监测站—实时监测道路能见度情况

型号&#xff1a;TH-NJD10】能见度监测站是一种专门用于自动观测和存储气象观测数据的设备&#xff0c;它通过高科技手段实时监测大气能见度的变化&#xff0c;为多个领域提供重要的数据支持。主要基于光在大气中的衰减规律。传感器系统中的发射器发出光线&#xff0c;照射到空…
阅读更多...
shell编程--正则表达式

shell编程--正则表达式

正则表达式 正则表达式都被置于两个正斜杠之间&#xff1b;如/l[oO]ve/ 示例 匹配数字的脚本&#xff0c;用户输入创建账号的数量 语法&#xff1a; [[ ^[0-9]$ ]] 表示必须输入数字 #!/bin/bashwhile : do read -p "输入数字&#xff1a;" numif [[ $num ~ ^[…
阅读更多...
产品需求过程管理重要性

产品需求过程管理重要性

产品需求过程管理重要性 背景 以下都是真实事项经历回顾&#xff0c;在产品开发过程中&#xff0c;产品经理与研发团队之间的沟通至关重要。然而&#xff0c;沟通不畅或信息缺失常常导致需求无法准确传达&#xff0c;最终影响产品的成功。以下是一些常见的问题&#xff1a; 1.需…
阅读更多...
Jmeter执行多机联合负载

Jmeter执行多机联合负载

1、注意事项&#xff0c;负载机必须要安装jre&#xff0c;控制机则必须安装jdk。要配置同网段ip&#xff0c;双向关闭防火墙。 每个负载机要平均承担线程数。 具体执行事项查看上面截图所示&#xff0c;控制机和负载机配置。 2、先给负载机设置ip地址&#xff0c;保持与控制…
阅读更多...
C++项目详细分析_WebServer

C++项目详细分析_WebServer

前言 项目地址 项目介绍 源码详细分析 项目路径如下&#xff1a; 1.webserver.cpp 头文件和构造函数 #include "webserver.h"WebServer::WebServer() {// http_conn类对象users new http_conn[MAX_FD];// root文件夹路径char server_path[200];getcwd(server…
阅读更多...
prometheus基于文件的服务发现

prometheus基于文件的服务发现

之间讲到&#xff0c;prometheus监控的对象就来自于他的配置文件里面的targets&#xff0c;如果要新增被监控对象&#xff0c;就继续往targets里面加。 但这个缺点是&#xff0c;每次修改完后都得重启prometheus。有没有什么办法&#xff0c;能在不重启的情况下增加target呢&a…
阅读更多...
【Qt】 QComboBox | QSpinBox

【Qt】 QComboBox | QSpinBox

文章目录 QComboBox —— 下拉框QComboBox 属性核心方法核心信号QComboBox 使用 QSpinBox —— 微调框QSpinBox 属性核心信号QSpinBox 使用 QComboBox —— 下拉框 QComboBox 属性 QComboBox —— 表示下拉框 currentText ——当前选中的文本 currentindex ——当前选中的条…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023