乐趣区

关于javascript:高德地图-自动生成电子围栏

jiezi

应用高德地图 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. 实现。

注：代码不全，仅供参考

退出移动版