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

本文主要是介绍百度地图绘制电子围栏(包括移动端绘制操作)以及检测坐标是否在电子围栏内,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

由于本人在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.chinasem.cn/article/1131733

相关文章

Python ZIP文件操作技巧详解

《PythonZIP文件操作技巧详解》在数据处理和系统开发中,ZIP文件操作是开发者必须掌握的核心技能,Python标准库提供的zipfile模块以简洁的API和跨平台特性,成为处理ZIP文件的首选... 目录一、ZIP文件操作基础三板斧1.1 创建压缩包1.2 解压操作1.3 文件遍历与信息获取二、进阶技

Java中字符串转时间与时间转字符串的操作详解

《Java中字符串转时间与时间转字符串的操作详解》Java的java.time包提供了强大的日期和时间处理功能,通过DateTimeFormatter可以轻松地在日期时间对象和字符串之间进行转换,下面... 目录一、字符串转时间(一)使用预定义格式(二)自定义格式二、时间转字符串(一)使用预定义格式(二)自

Python如何精准判断某个进程是否在运行

《Python如何精准判断某个进程是否在运行》这篇文章主要为大家详细介绍了Python如何精准判断某个进程是否在运行,本文为大家整理了3种方法并进行了对比,有需要的小伙伴可以跟随小编一起学习一下... 目录一、为什么需要判断进程是否存在二、方法1:用psutil库(推荐)三、方法2:用os.system调用

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Python中判断对象是否为空的方法

《Python中判断对象是否为空的方法》在Python开发中,判断对象是否为“空”是高频操作,但看似简单的需求却暗藏玄机,从None到空容器,从零值到自定义对象的“假值”状态,不同场景下的“空”需要精... 目录一、python中的“空”值体系二、精准判定方法对比三、常见误区解析四、进阶处理技巧五、性能优化

Python 中的 with open文件操作的最佳实践

《Python中的withopen文件操作的最佳实践》在Python中,withopen()提供了一个简洁而安全的方式来处理文件操作,它不仅能确保文件在操作完成后自动关闭,还能处理文件操作中的异... 目录什么是 with open()?为什么使用 with open()?使用 with open() 进行

Linux ls命令操作详解

《Linuxls命令操作详解》通过ls命令,我们可以查看指定目录下的文件和子目录,并结合不同的选项获取详细的文件信息,如权限、大小、修改时间等,:本文主要介绍Linuxls命令详解,需要的朋友可... 目录1. 命令简介2. 命令的基本语法和用法2.1 语法格式2.2 使用示例2.2.1 列出当前目录下的文

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要

C# WinForms存储过程操作数据库的实例讲解

《C#WinForms存储过程操作数据库的实例讲解》:本文主要介绍C#WinForms存储过程操作数据库的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、存储过程基础二、C# 调用流程1. 数据库连接配置2. 执行存储过程(增删改)3. 查询数据三、事务处