应用高德地图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...
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. 实现。
注：代码不全，仅供参考