java 经纬度 电子围栏6_关于javascript:高德地图-自动生成电子围栏

应用高德地图js api 主动画出电子围栏

因间接画多边形不太精确，须要沿路来画围栏

电子围栏思路：

1. 找到原点经纬度 x

const 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 ])

参考:

https://lbs.amap.com/api/java…

【腾讯云】云产品限时秒杀，爆款1核2G云服务器，首年99元

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

}

如图：

参考:

https://blog.csdn.net/jinshit…

https://blog.csdn.net/Dust_Ev…

https://lbs.amap.com/api/andr…

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)

}))

参考:

https://lbs.amap.com/api/java…

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)

}))

如图:

参考:

https://lbs.amap.com/api/java…

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. 实现。

注：代码不全，仅供参考