Use Autonavi JS API to automatically draw the electronic fence because direct polygon drawing is not accurate, need to draw the fence along the road

Electronic fence idea:

1. Find the latitude and longitude of the origin x
Const CENTER = [116.397504,39.89619] Const DISTANCE = 300 const map = new amap.map ("container", {
    center: CENTER,
    zoom: 14
});

Copy the code
2. Draw a circle on the map according to point X
Const circle = new amap. circle ({center: center, radius: DISTANCE, // radius 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) // Zoom the map to the appropriate view levelCopy the code

Reference: lbs.amap.com/api/javascr…

3. Locate the eight directions east, southeast, south, southwest, west, northwest, north, and northeast on the edges of the circle

The longitude and latitude of x1,y1 ~ x8,y8 are obtained, defined as the coordinates of A1 ~ A8

First, according to the formula of the circle, find each point on the circle, and then use each point to convert the longitude and latitude of the map

/** ** get the point on the circle (step 45 degrees) ** */function setCirclePoint(centerpoint = CENTER, radius = DISTANCE) { const r = 6371000; // Average radius of the Earth const numpoints = 360; const phase = 2 * Math.PI / numpoints;letPointArr = [] // draw pointsfor (leti = 0; i < numpoints; I +=45) {// Compute coordinate pointslet dx = (radius * Math.cos(i * phase));
        letdy = (radius * Math.sin(i * phase)); // Convert to latitude and longitudelet 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;
        letnewlag = centerpoint.lat + dlat; PointArr. Push ([newLNG, Newlag]) // Instantiate point marker const marker = new amap. marker ({position: [newLNG, Newlag], icon: startIcon, offset: new AMap.Pixel(-13, -30) }); markers.push(marker); marker.setMap(map); }return pointArr
}
Copy the code

As shown in figure:

Reference: blog.csdn.net/jinshitou20… Blog.csdn.net/Dust_Evc/ar… Lbs.amap.com/api/android…

4. Search the nearest POI point from A1 to A8, A1 = “International Trade Phase 3”, A2 = “Dongzhimen”, A3 = “Olympic Sports Forest Park”… And so on
// Amap query the surrounding areafunction aMapSearchNearBy(centerPoint) {
        return new Promise((resolve,reject)=>{
            AMap.service(["AMap.PlaceSearch"], () => {const placeSearch = new amap.placesearch ({pageSize: 10, // pageIndex: 1, // get the first page}); // The second parameter is latitude and longitude, the array type // the third parameter is radius, the surrounding range // the fourth parameter is the callback function placesearch.searchnearby (' ', centerPoint, 1000, (status, result) => {
                    if(result.info === 'OK') { const locationList = result.poiList.pois; Resolve (locationList[0])}else {
                        console.log('Failed to get location info! '); reject() } }); }); })}Copy the code

Since the POI results must be returned sequentially a1-A8, Autonavi API is asynchronous, so Promise is used for synchronous processing

Const POIArr = await promise. all(points.map(async (item)=>{return await aMapSearchNearBy(item)
}))
Copy the code

Reference: lbs.amap.com/api/javascr…

5. Connect the 8 POI points in sequence (A1-A2,A2-A3,A3-A4… A8-a1) use the navigation path to draw (walk), get the 8 paths L1 ~ L8
/** * Draw the route (walk) */function drawWalk(data, i){
        returnNew Promise((resolve,reject)=>{// walk navigation const walking = new amap. walking ({map: map, panel:"panel",
                hideMarkers: true, // Set the start point icon of the hidden path planning});let start = [POIArr[i].location.lng, POIArr[i].location.lat]
            letend = i === POIArr.length-1 ? [POIArr[0].location.lng, POIArr[0].location.lat] : [POIArr[I +1].location. LNG, POIArr[I +1].location. Lat] result) => { resolve(result)if (status === 'complete') {
                    log.success('Draw walking route completed')}else {
                    log.error('Walking route data query failed' + result)
                } 
            });
        });
    }
Copy the code

Draw the walking path in turn

const walkRes = await Promise.all(POIArr.map(async (item, index)=>{
    return await drawWalk(item, index)
}))
Copy the code

As shown in figure:



Lbs.amap.com/api/javascr…

6. Store the inflection points of 8 routes

According to the information returned by each walking path to find the inflection point of the road, and save, before saving, need to remove the weight.

    walkRes.map((key)=>{
        const steps = key.routes[0].steps
        steps.map((item, index)=>{
            item.path.map((pos)=>{
                formatData(pos)
            })
        })
    })
Copy the code

7. Verify the saved inflection point data and whether the polygon drawn is consistent with the route

The first value is start_location under the Steps property, but the following figure appears

Take the path under Steps for the second time and you are done

8. Complete.

Note: the code is not complete, only for reference