vue使用高德地图画电子围栏_高德地图 自动生成电子围栏
使用高德地图js api 自动画出电子围栏
因直接画多边形不太准确，需要沿路来画围栏
电子围栏思路：
1. 找到原点经纬度 xconst CENTER = [116.397504,39.89619]
const DISTANCE = 300 //单位m
const map = new AMap.Map("container", {
center: CENTER,
zoom: 14
});
2. 根据x点在地图上画出一个圆const circle = new AMap.Circle({
center: CENTER,
radius: DISTANCE, //半径
borderWeight: 3,
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
fillColor: '#1791fc',
zIndex: 50
})
circle.setMap(map)
// 缩放地图到合适的视野级别
map.setFitView([ circle ])
3. 在圆边线上 分别找到向 东、东南、南、西南、西、西北、北、东北 8个方向的位置
得到 x1,y1 ~ x8,y8 ，8个 位置的 经纬度，定义为 A1 ~ A8 的坐标
先根据圆的公式，找到圆上的各点，再用各点转换成地图的经纬度/**
*
* 获取圆上的点(步长 45度)
*
**/
function setCirclePoint(centerpoint = CENTER, radius = DISTANCE) {
const r = 6371000; //地球的平均半径
const numpoints = 360;
const phase = 2 * Math.PI / numpoints;
let pointArr = []
//画点
for (let i = 0; i < numpoints; i+=45) {
// 计算坐标点
let dx = (radius * Math.cos(i * phase));
let dy = (radius * Math.sin(i * phase));
// 转换成经纬度
let dlng = dx / (r * Math.cos(centerpoint.lat * Math.PI / 180) * Math.PI / 180);
let dlat = dy / (r * Math.PI / 180);
let newlng = centerpoint.lng + dlng;
let newlag = centerpoint.lat + dlat;
pointArr.push([newlng,newlag])
// 实例化点标记
const marker = new AMap.Marker({
position: [newlng, newlag],
icon: startIcon,
offset: new AMap.Pixel(-13, -30)
});
markers.push(marker);
marker.setMap(map);
}
return pointArr
}
如图：
4. 搜索 A1 ~ A8 8个坐标最近的 POI点，A1 = “国贸三期”，A2 = “东直门”，A3 = “奥体森林公园”。。。。类推// 高德地图查询周边
function aMapSearchNearBy(centerPoint) {
return new Promise((resolve,reject)=>{
AMap.service(["AMap.PlaceSearch"], () => {
const placeSearch = new AMap.PlaceSearch({
pageSize: 10, // 每页10条
pageIndex: 1, // 获取第一页
});
// 第一个参数是关键字，这里传入的空表示不需要根据关键字过滤
// 第二个参数是经纬度，数组类型
// 第三个参数是半径，周边的范围
// 第四个参数为回调函数
placeSearch.searchNearBy('', centerPoint, 1000, (status, result) => {
if(result.info === 'OK') {
const locationList = result.poiList.pois; // 周边地标建筑列表
resolve(locationList[0])
} else {
console.log('获取位置信息失败!');
reject()
}
});
});
})
}
因必须是A1-A8顺序返回POI结果，高德API为异步，所以使用Promise进行同步处理//获取POI信息
const POIArr = await Promise.all(points.map(async (item)=>{
return await aMapSearchNearBy(item)
}))
5. 将这8个POI点依次相连(A1-A2,A2-A3,A3-A4,...A8-A1)用导航路径画出 (步行)，得到 L1 ～ L8 这 8条路径/**
* 绘制路线(步行)
*/
function drawWalk(data, i){
return new Promise((resolve,reject)=>{
//步行导航
const walking = new AMap.Walking({
map: map,
panel: "panel",
hideMarkers: true, //设置隐藏路径规划的起始点图标
});
let start = [POIArr[i].location.lng, POIArr[i].location.lat]
let end = i === POIArr.length-1 ? [POIArr[0].location.lng, POIArr[0].location.lat] : [POIArr[i+1].location.lng, POIArr[i+1].location.lat]
//根据起终点坐标规划步行路线
walking.search(start, end, (status, result) => {
resolve(result)
if (status === 'complete') {
log.success('绘制步行路线完成')
} else {
log.error('步行路线数据查询失败' + result)
}
});
});
}
依次画出步行路径const walkRes = await Promise.all(POIArr.map(async (item, index)=>{
return await drawWalk(item, index)
}))
如图:
6. 存储8条路线的拐点
根据各步行路径返回的信息找到路的拐点，并保存起来，保存之前需要去重。walkRes.map((key)=>{
const steps = key.routes[0].steps
steps.map((item, index)=>{
item.path.map((pos)=>{
formatData(pos)
})
})
})
7. 验证保存的拐点数据，画出的多边形是否和路线一致
第一次取的值为steps属性下的start_location,但出如下图
但不是沿路的，也缺失了一些拐点
第二次取steps下的path中的路线，搞定
8. 完成。
注：代码不全，仅供参考