最近在做巡检任务功能,需要在安卓端记录当前巡检轨迹,以及原本的路线显示,由于是使用uniapp框架开发的,所以这里我使用的是uniapp里的map组件。

参考官方文档:https://uniapp.dcloud.io/component/map?id=map

注意:地图组件用于展示地图,而定位API只是获取坐标,请勿混淆两者。

一、获取当前位置:
type:默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于 uni.openLocation 的坐标,app平台高德SDK仅支持返回gcj02

//获取当前的地理位置
uni.getLocation({
    type: 'gcj02',
    success: function (res) {
        console.log('当前位置的经度:' + res.longitude);
        console.log('当前位置的纬度:' + res.latitude);
    }
});

二、在地图上画线(我这里通过请求接口数据,得到线上的经纬度信息)

// 获取巡检线路信息(包含线路光缆路由列表)
initLine(lineid) {
		api.getPatrolLine(lineid).then(res => {
			console.log(res.data.result.lineRouter);
			const points = [];
			const temp = [];
			// 第一层循环
			res.data.result.lineRouter.forEach((line, index1) => {
				// console.log("index1",index1)
				//第二层循环
				line.geometry.forEach((item, index2) => {
					// console.log("index2",index2)
					points.push({
						latitude: item.lat,
						longitude: item.lng
					});
					temp.push({
						id: index1 * 100000 + index2, //避免下标重复
						latitude: item.lat, //纬度
						longitude: item.lng, //经度
						iconPath: '/static/maps/all_location.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 40, //宽
						height: 40, //高
						title: item, //标注点名
						alpha: 1, //透明度
						// joinCluster: true, //是否参与点聚合
					})
		
				});
			});
			// 偏离路线距离计算
			this.taskPoints = points;
			// 点聚合:解决标记点marker过多时会导致界面上 marker 出现压盖,展示不全问题
			const taskLine = { //路线
				points: points, //经纬度数组
				color: '#007aff', //线的颜色
				width: 10, //线的宽度
				borderWidth: 2, //线的厚度
				// borderColor: '#ff0000', //线的边框颜色
				dottedLine: false, //是否虚线
				arrowLine: false //带箭头的线 开发者工具暂不支持该属性
			}
			// console.log(taskLine)
			this.polyline[0] = taskLine; //巡检路线
			this.polyline[1] = this.myPolyline; //记录当前的轨迹路线
			this.polyline = [...this.polyline] //需要结构,视图才更新
			// console.log(this.polyline);
			this.markers = temp //标记点
			this.markers = [...this.markers] //需要结构,视图才更新
			// console.log(this.markers)
			this.myIndex = this.markers.length; //获取标记点的下标开始值,防止下标重复
			
		})
		.catch(e => {
			console.log(e);
		});
		},

效果图如下:
效果图

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐