uniapp地图电子围栏（多边形）绘制和编辑

已于 2024-07-29 09:21:40 修改
阅读量1.2k 收藏 12
点赞数 13
文章标签： uni-app 地图电子围栏 地图多边形绘制 地图电子围栏编辑
于 2024-05-15 15:35:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abs625/article/details/138908945
版权

uniapp地图电子围栏（多边形）绘制和编辑

背景

最近项目中需要在地图上进行电子围栏的绘制和编辑，这里将实现的思路给大家分享下。由于uniapp官方提供的map组件功能不全，还有在APP端（非nvue）还存在层级问题，所以这里就不考虑使用官方map组件，而是使用renderjs来实现。renderjs中如何使用地图可以参考uniapp地图开发（APP，H5）之前这一篇文章。

在开始实现之前，我们先看下效果图
请添加图片描述

实现思路

1、我们首先需要在页面展示地图底板
2、DOM中添加四个操作按钮
3、监听地图点击事件，以地图中心点和点击点为两个点生成多边形
4、实现清除、编辑、保存、确定等按钮逻辑

代码实现

其实我们写代码是要先有思路，我们的代码也是根据上面的思路来分步来实现。
接下来就直接上主逻辑页面代码（second.vue）。

<template>
	<div id='container' class="map" :style="'height:'+maph+'px'">
		<view :originPolygon="originPolygon" :change:originPolygon="renderJS.receiveOriginPolygon" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				maph: 0,
				//如果需要编辑多边形，传进来多边形字符串
				originPolygon: '',
				polygon: []
			}
		},
		onLoad(option) {
			this.maph = uni.getSystemInfoSync().windowHeight
			this.originPolygon = option.polygon || ''
		},
		methods: {
			polygonSave(result) {
				this.polygon = result
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('polygonResult',{
					result: JSON.stringify(this.polygon)
				})
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<script module="renderJS" lang="renderjs">
	let map = null
	//是否编辑模式
	let isEditMode = false
	//其他页面传入的多边形，用作多边形编辑
	let originPolygon = null
	//多边形的关键点
	let path = []
	//多边形编辑器
	let polygonEditor = null
	let ownerInstance = null
	//选定并保存好的多边形
	let polygonSave = []
	//编辑还未保存的多边形
	let polygonSaveTemp = []
	let that
	export default {
		data() {
			return {

			}
		},
		mounted() {
			that = this
			window._AMapSecurityConfig = {
				securityJsCode: '高德申请的securityJsCode',
			}
			if (typeof window.AMap == 'function') {
				this.initAmap();
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script');
				script.src = 'https://webapi.amap.com/maps?v=2.0&key=高德申请的key';
				script.onload = this.initAmap.bind(this);
				document.head.appendChild(script);
			}
		},
		//页面卸载清空
		unmounted() {
			map.clearMap()
			map = null
			//是否编辑模式
			isEditMode = false
			//其他页面传入的多边形，用作多边形编辑
			originPolygon = null
			//多边形的关键点
			path = []
			//多边形编辑器
			polygonEditor = null
			ownerInstance = null
			//选定并保存好的多边形
			polygonSave = []
			//编辑还未保存的多边形
			polygonSaveTemp = []
			that = null
		},
		methods: {
			//获取到传进来的多边形
			receiveOriginPolygon(newValue, oldValue, ownerVm, vm) {
				if (!ownerInstance) {
					ownerInstance = ownerVm
				}
				if(!newValue){
					return
				}
				originPolygon = JSON.parse(newValue)
				isEditMode = true
			},
			initAmap(e, ownerVm) {
				map = new AMap.Map("container", {
					zoom: 12, //设置地图显示的缩放级别
					viewMode: '2D' //设置地图模式
				});
				map.on('click', (e) => {
					if (!originPolygon) {
						if (isEditMode) {
							if (path.length <= 0) {
								path.push(map.getCenter())
							}
							if (polygonEditor) {
								polygonEditor.close()
							}
							map.clearMap()
							path.push(new AMap.LngLat(e.lnglat.lng, e.lnglat.lat))
							this.drawPolygon()
						} else {
							alert('请点击编辑按钮进行绘制')
						}
					}else {
						if (polygonEditor) {
							polygonEditor.close()
						}
						map.clearMap()
						path.push(new AMap.LngLat(e.lnglat.lng, e.lnglat.lat))
						this.drawPolygon()
					}
				})
				map.on('complete', () => {
					console.log('地图加载完成')
					if (originPolygon) {
						originPolygon.forEach(ele => {
							path.push(ele)
						})
					}
					this.drawPolygon()
				})
				this.initDivs()
			},
			//画多边形
			drawPolygon() {
				if(path.length <= 0){
					return
				}
				let polygon = new AMap.Polygon({
					path: path, //路径
					fillColor: "#FF615F", //多边形填充颜色
					fillOpacity: 0.2,
					strokeStyle: 'dashed',
					strokeWeight: 2, //线条宽度，默认为 2
					strokeColor: "#FF615F", //线条颜色
				});
				//多边形 Polygon对象添加到 Map
				map.add(polygon);
				//将覆盖物调整到合适视野
				map.setFitView([polygon])
				map.plugin(["AMap.PolygonEditor"], function() {
					//实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
					polygonEditor = new AMap.PolygonEditor(map, polygon);
					//开启编辑模式
					polygonEditor.open();
					polygonEditor.on('end', (e) => {
						let polygonPaths = e.target.getPath()
						if (polygonPaths.length <= 1) {
							return
						}
						//清除了
						if (path.length <= 0) {
							polygonSaveTemp = []
							return
						}
						let paths = []
						polygonPaths.forEach(ele => {
							let temp = [ele.lng, ele.lat]
							paths.push(temp)
						})
						polygonSaveTemp = paths
					})
				});
			},
			//创建单个div
			createDiv(inner) {
				let div = document.createElement('div');
				div.style.width = '70px';
				div.style.height = '30px';
				div.style.background = '#FFFFFF';
				div.style.boxShadow = '0px 0px 3px 1px rgba(0, 0, 0, 0.1)';
				div.style.borderRadius = '10px';
				div.style.fontSize = '15px';
				div.style.lineHeight = '30px';
				div.style.textAlign = 'center';
				div.innerHTML = inner
				return div
			},
			initDivs() {
				const div = document.createElement('div');
				div.style.display = 'flex';
				div.style.flexDirection = 'row';
				div.style.width = 'calc(100% - 40px)';
				div.style.alignItems = 'center';
				div.style.height = '40px';
				div.style.justifyContent = 'space-between';
				div.style.position = 'fixed';
				div.style.bottom = '40px';
				div.style.left = '20px';
				div.style.fontSize = '30px';
				div.style.zIndex = 999
				document.body.appendChild(div);

				const clearDiv = this.createDiv('清除')
				div.appendChild(clearDiv)
				clearDiv.addEventListener('click', function() {
					path = []
					polygonSave = []
					polygonSaveTemp = []
					originPolygon = null
					if (polygonEditor) {
						polygonEditor.close()
						polygonEditor = null
					}
					if (map) {
						map.clearMap()
					}
					console.log('清除')
				});

				const editDiv = this.createDiv('编辑')
				div.appendChild(editDiv)
				editDiv.addEventListener('click', function() {
					isEditMode = true
					if (polygonEditor) {
						polygonEditor.open()
					}
					console.log('编辑')
				});

				const saveDiv = this.createDiv('保存')
				div.appendChild(saveDiv)
				saveDiv.addEventListener('click', function() {
					isEditMode = false
					if (polygonEditor) {
						polygonEditor.close()
					}
					if(polygonSaveTemp){
						polygonSave = polygonSaveTemp
					}
					setTimeout(function() {
						if (map) {
							map.setFitView()
						}
					}, 200);
					console.log('保存')
				});

				const confirmDiv = this.createDiv('确定')
				div.appendChild(confirmDiv)
				confirmDiv.addEventListener('click', function() {
					if (polygonSave && polygonSave.length > 0) {
						ownerInstance.callMethod('polygonSave', polygonSave)
					}else {
						if(polygonEditor){
							alert('请先保存多边形')
						}else {
							alert('还未绘制多边形')
						}
					}
					console.log('确定')
				});

			}
		}
	}
</script>
<style>
	.map {
		z-index: 1;
		height: 100%;
		width: 750rpx;
	}
</style>

还有一个测试页面index.vue，这个页面主要是一个按钮和点击事件，这里我就只写点击事件了。

//代码省略...
goSecond(){
	uni.navigateTo({
		url: `/pages/second/second?polygon=${this.polygon}`,
		events: {
			polygonResult: res=>{
				//回调结果，页面展示用
				this.polygon = res.result
			}
		}
	})			
}
//代码省略...

注意事项

我这里使用的是高德地图，开发这需要去高德官网申请应用的key，并填入文章中代码标识处。支持电子围栏的绘制和已有电子围栏的展示和编辑。通过高德地图API，还可以实现矩形和圆形等多种电子围栏实现。由于使用renderjs实现，只支持H5和APP，小程序不支持。

尾巴

今天的文章就到这里了，希望能给大家帮助，如果喜欢我的文章，欢迎给我点赞，评论，关注，谢谢大家！
PS：很多博主都把文章设置为关注后才能查看，感觉这样有点恶心。如果我的文章切实能给各位观众老爷们带来帮助，真心求点个关注，再次感谢各位观众老爷们了。

abs625
关注
  • 13
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp 移动端使用百度地图实现电子围栏
ve__locity的博客
02-17 1967
uniapp H5移动端使用百度地图实现电子围栏
vue2用高德地图实现绘制多边形电子围栏
09-05
vue2用高德地图实现绘制多边形电子围栏
uniapp+腾讯地图实现地图标记点位以及画多边形
博客简介
03-27 2505
【代码】uniapp+腾讯地图实现地图画多边形和点位回显（仅数据回显）非自定义画区和打点
uniapp使用腾讯地图实现围栏效果
weixin_70243424的博客
06-29 256
【代码】uniapp使用腾讯地图实现围栏效果。
基于腾讯地图的微信小程序电子围栏.zip
12-03
uniapp写的基于腾讯地图的微信小程序的电子围栏(服务范围)，里面的key换成自己再腾讯地图api官网申请的，如果哪里有写的不好的地方，请多多谅解！
百度地图绘制电子围栏，点位信息标记，车辆实时轨迹并且车辆跟随角度进行偏转2
09-20
百度地图历史轨迹绘制，动画播放，暂停、加速、减速，车头实时角度偏移，HTML页面点开即可使用
微信小程序---uniapp 实现地址绘制多边形围栏
biubiubiuPlus的博客
10-15 3436
实现map组件，绘制围栏 switch2Change(e) { // 开启围栏 if (e.target.value) { let param = { ocid: this.$store.state.ocid, odid: this.$store.state.odid, token: this.$store.state.token, }; let opts = "/biubiubiu/zmybiu";//这里填自己的地址
uniapp实现地图电子围栏功能
m0_74265396的博客
12-13 926
该功能使用uniapp中内置组件map实现。
uniapp地图 多边形使用
明耀的博客
11-19 5878
<template> <view> <map @tap='mapTap' :style="'width: 100%;'+ 'height:'+screenHeight" :latitude="latitude" :longitude="longitude" :polygons="polygons" :markers="markerList"> </map> </view> </template> <script&
【uniapp】实现电子围栏：
SunPeng的博客
12-20 1516
【uniapp】实现电子围栏：
uniapp小程序地图电子围栏根据当前点的经纬度判断是否在多边形电子围栏范围内
艾路菲尔博客
06-13 1846
【代码】uniapp小程序地图电子围栏根据当前点的经纬度判断是否在多边形电子围栏范围内。
高德地图web多边形电子围栏demo
06-09
高德web端实现多边形电子围栏demo 地图上点三个点形成多边形区域，可以通过拉拽添加点的形式添加边的数量 可判断marker是否在多边形区域区域内（jQuery需要自己添加）
谷歌电子围栏，添加修改多边形围栏，获取经纬度点
12-09
总之，谷歌电子围栏技术结合多边形，为开发者提供了在地图上创建动态区域的工具。通过添加、修改和清除多边形，以及将坐标点转换为JSON格式，可以灵活地实现各种地理围栏功能，满足各种业务需求。
vue实现添加标点和单个多边形(电子围栏)绘制/编辑
weixin_47932870的博客
12-29 1307
练习高德地图api用的，内有详细的代码注释。
uniapp 电子围栏 判断是否在围栏内
最新发布
callBack_____的博客
08-07 166
【代码】uniapp 电子围栏 判断是否在围栏内。
uniapp微信小程序地图实现绘制polygon（保姆级教程 全网最全！！！）
逆水行舟 不进则退
12-01 4749
uniapp微信小程序中在map上实现polygon的绘制。全网最全保姆级教程，不会你来砸我！！！
使用uniapp写圆形的电子围栏，判断自己标的点是否在画的圆圈里面。
m0_57209996的博客
07-24 645
使用map需要一些准备工作，需要自行百度。
uniapp map画多边形 打点连线
qq_43024468的博客
03-03 2860
我是参考https://blog.csdn.net/zyj12138/article/details/112463219这个地址完成的 先看结果 代码 <map style="width: 750rpx; height: 100vh;" id="myMap" ref="myMap" :latitude="latitude" :longitude="longitude" :scale="16" :show-location="true" :enable-
python实现电子围栏
04-24
Python实现电子围栏可以使用第三方库geopy和shapely，步骤如下： 1. 安装geopy和shapely库 ``` pip install geopy pip install shapely ``` 2. 获取电子围栏的经纬度坐标列表 3. 使用shapely库创建多边形 ```python from shapely.geometry import Point, Polygon polygon = Polygon([(lon1,lat1),(lon2,lat2),(lon3,lat3),...]) ``` 4. 获取用户位置的经纬度坐标 ```python from geopy.geocoders import Nominatim geolocator = Nominatim(user_agent="geoapiExercises") location = geolocator.geocode("your address") user_loc = (location.latitude, location.longitude) ``` 5. 判断用户位置是否在电子围栏内 ```python point = Point(user_loc[1], user_loc[0]) if polygon.contains(point): print("You are inside the polygon") else: print("You are outside the polygon") ``` 以上是一个简单的电子围栏实现，但如果需要更复杂的判断，比如多个围栏、不规则形状的围栏等，需要更为复杂的算法实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值