[Amap API] JS Amap API implements polygon painting, and Amap obtains polygon submission data

Foreword

AMAP official API: https://lbs.amap.com/demo/javascript-api/example/overlayers/polygon-draw-and-edit
Amap API version: 1.4.15
Use JS to implement polygonal fence settings on Amap (in addition to simple examples, my implementation in the project is also included)

Effect

Implementation

Introduce js

You need to add a security key and a key. The reason why you need to use a security key was officially changed on 2021-12-02. Originally, you only needed the key.
Reference URL: https://lbs.amap.com/api/javascript-api/guide/abc/prepare
Here plugin=AMap.***** is the object you need.

<script type="text/javascript">
        window._AMapSecurityConfig = {<!-- -->
            securityJsCode:'bf5ed************************886', // Security key (official projects officially recommend using nginx proxy to introduce the key)
        }
</script>
<script type="text/javascript" src="//i2.wp.com/webapi.amap.com/maps?v=1.4.15 & amp;key=22d1**************** *******b8 &plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor,AMap.Marker"></script>

html implementation

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
html,
body,
#container {<!-- -->
width: 100%;
height: 100%;
}
</style>
<title>Polygon drawing and editing</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script type="text/javascript">
window._AMapSecurityConfig = {<!-- -->
securityJsCode:'bf5******************886',
}
</script>
<script src="//i2.wp.com/webapi.amap.com/maps?v=1.4.15 & amp;key=22d****************** a20b8 & amp;plugin=AMap.PolyEditor"></script>
</head>

<body>
<div id="container"></div>
<div class="input-card" style="width: 120px">
<button class="btn" onclick="startEdit()" style="margin-bottom: 5px">Start editing</button>
<button class="btn" onclick="submitMap()">End editing</button>
</div>
<script type="text/javascript">
\t\t\t
var temp_lnglat = []; // Temporary storage location
var tempMap = {<!-- -->}; // Temporarily store map objects
\t\t\t
//The latitude and longitude of the location to be drawn
var lngLat = [116.400274, 39.905812];
\t\t\t
initMap(lngLat);
\t\t\t
/**
*------------------------------------------------ -------------------------------------------------- ----------
* Initialize map
*/
function initMap(lngLat){<!-- -->
tempMap.map = new AMap.Map("container", {<!-- -->
center: lngLat,
zoom: 14
});
\t\t\t\t
createPolygon(lngLat);
}
\t\t\t
/**
*------------------------------------------------ -------------------------------------------------- ----------
* Create polygon
* @param {Object} paths
*/
function createPolygon(lngLat, paths){<!-- -->
// Draw the longitude and latitude of each corner of the polygon (use this if not available and create a default polygon at the current location)
if(!paths || paths.length < 1){<!-- -->
paths = [
[lngLat[0] + 0.003048, lngLat[1] + 0.014442],
[lngLat[0] + 0.010429, lngLat[1] - 0.008257],
[lngLat[0] + 0.002018, lngLat[1] - 0.013458],
[lngLat[0] - 0.010427, lngLat[1] - 0.014446]
]
}
// Assign to the temporary array (the longitude and latitude of these polygon corners are required when submitting)
temp_lnglat = paths;
//Create painting
var polygon = new AMap.Polygon({<!-- -->
path: paths,
strokeColor: "#0f79d7",
strokeWeight: 3,
strokeOpacity: 0.6,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: 50,
})
tempMap.map.add(polygon)
//Zoom the map to the appropriate field of view level
tempMap.map.setFitView([polygon])
//Edit drawing object
tempMap.polyEditor = new AMap.PolyEditor(tempMap.map, polygon)
\t\t\t\t// event
tempMap.polyEditor.on('addnode', function(event) {<!-- -->
console.log('Trigger event: addnode ----------------------------------------- -')
console.log("Add:", event)
console.log("Add-Longitude:", event.lnglat.lng, "Latitude:", event.lnglat.lat)
})
tempMap.polyEditor.on('adjust', function(event) {<!-- -->
console.log('Trigger event: adjust ---------------------------------------------- -')
console.log("Modification:", event)
console.log("Modification-Longitude:", event.lnglat.lng, "Latitude:", event.lnglat.lat)
})
tempMap.polyEditor.on('removenode', function(event) {<!-- -->
console.log('Trigger event: removenode ----------------------------------------- -')
console.log("removenode：", event)
})
tempMap.polyEditor.on('end', function(event) {<!-- -->
console.log('Trigger event: end ----------------------------------------- -')
console.log("end：", event)
// event.target is the edited polygon object
})
}
\t\t\t
/**
*------------------------------------------------ -------------------------------------------------- ------
* Clear painting
*/
function clearMap() {<!-- -->
tempMap.map.clearMap(tempMap.polyEditor)
tempMap.map.remove(tempMap.polyEditor)
}

/**
*------------------------------------------------ -------------------------------------------------- ----------
* Start editing
*/
function startEdit(){<!-- -->
//Open for editing
tempMap.polyEditor.open();
}

/**
*------------------------------------------------ -------------------------------------------------- ----------
*Submit latitude and longitude
*/
function submitMap() {<!-- -->
// Close painting
//tempMap.polyEditor.close();
// Get all latitude and longitude
if(tempMap.polyEditor.bu){<!-- -->
temp_lnglat = tempMap.polyEditor.bu[0];
}
//Remove the Q and R attribute values and retain the values of lng and lat
temp_lnglat = temp_lnglat.map(function(item, index){<!-- -->
return [item.lng, item.lat];
})
console.log("Get all coordinates:", JSON.stringify(temp_lnglat));
}
\t\t\t
</script>
</body>

</html>

html search tips

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>Input prompt</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {<!-- -->
          width: 100%;
          height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="info">
    <div class="input-item">
      <div class="input-item-prepend">
        <span class="input-item-text" style="width:8rem;">Please enter keywords</span>
      </div>
      <input id='tipinput' type="text">
    </div>
</div>

<script type="text/javascript">
        window._AMapSecurityConfig = {<!-- -->
            securityJsCode:'bf5************************886',
        }
</script>
<script type="text/javascript" src="//i2.wp.com/webapi.amap.com/maps?v=1.4.15 & amp;key=22d**************** *********0b8 & amp;plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript">
    /**
*------------------------------------------------ -------------------------------------------------- ------
* Render map
*/
function initMap(){<!-- -->
var map = new AMap.Map('container', {<!-- -->
resizeEnable: true, //Whether to monitor map container size changes
});
//Input prompt
var autoOptions = {<!-- -->
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
//Construct location query class
var placeSearch = new AMap.PlaceSearch({<!-- -->
map: map
});
// Register for monitoring, which will be triggered when a record is selected.
AMap.event.addListener(auto, "select", selectSearch);
function selectSearch(e) {<!-- -->
console.log(e)
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); // Keyword search query
}
}
initMap();
</script>
</body>
</html>

Use in project

Renderings

This is what I use in my project (copy and paste is available)

Introduction

Remember to change the security key and key

<script type="text/javascript">
window._AMapSecurityConfig = {<!-- -->
securityJsCode:'bf5e************************886',
}
</script>
<script src="//i2.wp.com/webapi.amap.com/maps?v=1.4.15 & amp;key=22d****************** ****20b8 & amp;plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor,AMap.Marker"></script>
\t

html

The layui framework is used here, everything is copied directly, only the key is taken.

<div class="layui-form-item">
<label class="layui-form-label">Project address</label>
<div class="layui-input-block" style="width: 500px;">
<input type="text" name="addr" id="addr" placeholder="Enter the address and select details, then operate the map"autocomplete="off" class="layui-input">
<div class="lay-search-content">
<ul></ul>
</div>
</div>
</div>
<div class="layui-form-item">
<!-- map map -->
<div class="container" id="container" style="height: 500px;width: 750px;"></div>
</div>

CSS

The effect of writing it yourself

.lay-search-content{<!-- -->
padding: 10px;
background: white;
border-radius: 4px;
color: #333333;
line-height: 15px;
box-shadow: #00000024 0px 2px 5px 0;
max-height: 300px;
overflow: auto;
display: none;
position: absolute;z-index: 99999;
width: 99%;
}
.lay-search-content li{<!-- -->
list-style: none;
margin: 5px 0px;
padding: 8px 0px;
border-bottom: 1px solid whitesmoke;
cursor: pointer;
}
.lay-search-content li:hover{<!-- -->
background: #f1f1f1;
}
.lay-search-mark{<!-- -->
width: 16px;
display: inline-block;
height: 16px;
background: #c1c1c1;
text-align: center;
line-height: 16px;
border-radius: 50%;
margin-right: 4px;
color: white;
font-size: 12px;
position: relative;
top: -1px;
}

Specific implementation of JS

var temp_lnglat = [116.400274, 39.905812]; // Temporarily store the current position
var temp_fence_lnglat = []; // Temporarily store all locations
var tempMap = {<!-- -->}; // Temporarily store map objects

/**
 *------------------------------------------------ -------------------------------------------------- ------
 *Reset map values
 */
function clearMap(state) {<!-- -->
    if(!state){<!-- --> // No value will be assigned if modified
        temp_lnglat = [116.400274, 39.905812];
        temp_fence_lnglat = [];
    }
    if(tempMap.polyEditor){<!-- -->
        tempMap.map.clearMap(tempMap.polyEditor)
        tempMap.map.remove(tempMap.polyEditor)
    }
}

/**
 *------------------------------------------------ -------------------------------------------------- ------
 * Render map
 */
function initMap(state){<!-- -->
    tempMap.map = new AMap.Map('container', {<!-- -->
resizeEnable: true, //Whether to monitor map container size changes
        center: temp_lnglat,
        zoom: 14,
});
    //Construct location query class
    tempMap.placeSearch = new AMap.PlaceSearch({<!-- -->
        city: "nationwide", // point of interest city
    });
    $("#addr").bind('input propertychange', function() {<!-- -->
        var text = $("#addr").val();
        searchAddr(text)
    })
    clickPosition(temp_lnglat[0], temp_lnglat[1], state);
}

/**
 *------------------------------------------------ -------------------------------------------------- ------------------
 * Map search
 * @return
 */
function searchAddr(text) {<!-- -->
    // For keyword query, just set it as input box. There is name in the set returned below. You can re-query the results and select them yourself.
    tempMap.placeSearch.search(text, function (status, result) {<!-- -->
        // When the query is successful, the result corresponds to the matching POI information.
        console.log("Search result coordinates:", result)
        if (!result.poiList){<!-- -->
            return;
        }
        var pois = result.poiList.pois;
        $(".lay-search-content").css("display", "block");
        $(".lay-search-content>ul").empty();
        for (var i = 0; i < pois.length; i + + ) {<!-- -->
            var poi = pois[i];
            var s = '<li οnclick="clickPosition(' + poi.location.lng + ', ' + poi.location.lat + ')">';
            var index = i + 1;
            if (index == 1) {<!-- -->
                s + = ' <span class="lay-search-mark" style="background: #ff8e63;">' + index + '</span>' + poi.name;
            } else if (index == 2) {<!-- -->
                s + = ' <span class="lay-search-mark" style="background: #edd07d;">' + index + '</span>' + poi.name;
            } else if (index == 3) {<!-- -->
                s + = ' <span class="lay-search-mark" style="background: #cddb82;">' + index + '</span>' + poi.name;
            } else {<!-- -->
                s + = ' <span class="lay-search-mark">' + index + '</span>' + poi.name;
            }
            s + = ' <span style="color: #999;font-size: 12px">（' + poi.address + ')</span>';
            s + = '</li>';
            $(".lay-search-content>ul").append(s);
            var marker = [];
            marker[i] = new AMap.Marker({<!-- -->
                position: poi.location, // latitude and longitude object, or a one-dimensional array of latitude and longitude [116.39, 39.9]
                offset: new AMap.Pixel(0, -20),//Offset position relative to the base point
                title: poi.name
            });
            // [Display content information above the mark]
            var infoWindow = new AMap.InfoWindow({<!-- -->offset: new AMap.Pixel(0, -30)});//Map location object
            // Click to pop up content
            marker[i].content = poi.name;
            marker[i].on('click', markerClick);

            function markerClick(e) {<!-- -->
                var position = e.target.getPosition();
                var content = "<div>" + e.target.content + "</div>"; // Content to be displayed
                content + = "<div style='text-align: center'><a class='layui-btn layui-btn-sm' οnclick='clickPosition(" + position.lng + ", " + position.lat + " )'>Choose to set up a fence</a></div>"
                infoWindow.setContent(content);
                infoWindow.open(tempMap.map, position);
            }
            // Add the created point markers to the existing map instance:
            tempMap.map.add(marker[i]);
        }
        tempMap.map.setFitView();
    })
}

/**
 *------------------------------------------------ -------------------------------------------------- ------------------
 *Search results and choose to set up a fence
 * @param lng
 * @paramlat
 */
function clickPosition(lng, lat, state) {<!-- -->
    $(".lay-search-content").css("display", "none");
    clearMap(state);
    temp_lnglat = [lng, lat];
    //Add point mark
    var markers = new AMap.Marker({<!-- -->
        position: temp_lnglat, // latitude and longitude object, or a one-dimensional array of latitude and longitude [116.39, 39.9]
        offset: new AMap.Pixel(0, -20),//Offset position relative to the base point
    });
    tempMap.map.add(markers);
    tempMap.map.setCenter(temp_lnglat)
    createPolygon(temp_lnglat, temp_fence_lnglat);
}
/**
 *------------------------------------------------ -------------------------------------------------- ----------
 * Create polygon
 * @param {Object} paths
 */
function createPolygon(lngLat, paths){<!-- -->
    // Draw the longitude and latitude of each corner of the polygon (use this if not available and create a default polygon at the current location)
    if(!paths || paths.length < 1){<!-- -->
        paths = [
            [lngLat[0] + 0.003048, lngLat[1] + 0.014442],
            [lngLat[0] + 0.010429, lngLat[1] - 0.008257],
            [lngLat[0] + 0.002018, lngLat[1] - 0.013458],
            [lngLat[0] - 0.010427, lngLat[1] - 0.014446]
        ]
    }
    // Assign to the temporary array (the longitude and latitude of these polygon corners are required when submitting)
    temp_fence_lnglat = paths;
    //Create painting
    var polygon = new AMap.Polygon({<!-- -->
        path: paths,
        strokeColor: "#0f79d7",
        strokeWeight: 3,
        strokeOpacity: 0.6,
        fillOpacity: 0.4,
        fillColor: '#1791fc',
        zIndex: 50,
    })
    tempMap.map.add(polygon)
    //Zoom the map to the appropriate field of view level
    tempMap.map.setFitView([polygon])
    //Edit drawing object
    tempMap.polyEditor = new AMap.PolyEditor(tempMap.map, polygon)
    // event
    tempMap.polyEditor.on('addnode', function(event) {<!-- -->
        console.log('Trigger event: addnode ----------------------------------------- -')
        console.log("Add:", event)
        console.log("Add-Longitude:", event.lnglat.lng, "Latitude:", event.lnglat.lat)
    })
    tempMap.polyEditor.on('adjust', function(event) {<!-- -->
        console.log('Trigger event: adjust ---------------------------------------------- -')
        console.log("Modification:", event)
        console.log("Modification-Longitude:", event.lnglat.lng, "Latitude:", event.lnglat.lat)
    })
    tempMap.polyEditor.on('removenode', function(event) {<!-- -->
        console.log('Trigger event: removenode ----------------------------------------- -')
        console.log("removenode：", event)
    })
    tempMap.polyEditor.on('end', function(event) {<!-- -->
        console.log('Trigger event: end ----------------------------------------- -')
        console.log("end：", event)
        // event.target is the edited polygon object
    })
    //Open for editing
    tempMap.polyEditor.open();
}

/**
 *------------------------------------------------ -------------------------------------------------- ----------
 * Start editing
 */
function startEdit(){<!-- -->
    //Open for editing
    tempMap.polyEditor.open();
}

/**
 *------------------------------------------------ -------------------------------------------------- ----------
 *Submit latitude and longitude
 */
function submitMap() {<!-- -->
    // Close painting
    //tempMap.polyEditor.close();
    // Get all latitude and longitude
    if(tempMap.polyEditor.bu){<!-- -->
        temp_fence_lnglat = tempMap.polyEditor.bu[0];
    }
    //Remove the Q and R attribute values and retain the values of lng and lat
    temp_fence_lnglat = temp_fence_lnglat.map(function(item, index){<!-- -->
        return [item.lng, item.lat];
    })
    console.log("Get all coordinates:", JSON.stringify(temp_fence_lnglat));
}

Calling instructions

Based on the js written above, just copy and call it

When added

initMap();

When modifying

data.lngLat and data.fenceLngLat are the latitude and longitude that we have stored and set.

temp_lnglat = JSON.parse(data.lngLat);
temp_fence_lnglat = JSON.parse(data.fenceLngLat);
initMap(true);

Judge whether it is within the range

Reference API: https://lbs.amap.com/demo/javascript-api/example/relationship-judgment/point-surface-relation

//Create a point (display the current user’s point)
var marker = new AMap.Marker({<!-- -->
map: map,
position: [116.566298, 40.014179]
});
// Determine whether it is within the range
var point = marker.getPosition();
var isPointInRing = AMap.GeometryUtil.isPointInRing(point, paths); // paths are the coordinate arrays of polygons
console.log("Is it within the range:", isPointInRing?'Yes':'No')

java painting and determining whether it is within the range

Method 1

Reference URL 1: https://blog.csdn.net/qq_39190679/article/details/102524601
Reference website 2: https://www.jianshu.com/p/5a2398a84889
Reference URL 3: https://zhuanlan.zhihu.com/p/534997829

package cn.geesuntar.utils;

import com.alibaba.fastjson.JSONArray;

import java.awt.geom.Point2D;
import java.util.ArrayList;
import java.util.List;

public class RegionUtil {<!-- -->

    private static double EARTH_RADIUS = 6378137;

    private static double rad(double d) {<!-- -->
        return d * Math.PI / 180.0;
    }
 
    /**
     *Polygon
     * @param point The horizontal and vertical coordinates of the point to be judged
     * @param polygon A collection of vertex coordinates
     * @return
     */
    public static boolean isInPolygon(Point2D.Double point, List<Point2D.Double> polygon) {<!-- -->
        java.awt.geom.GeneralPath peripheralPath = new java.awt.geom.GeneralPath();
        Point2D.Double first = polygon.get(0);
        peripheralPath.moveTo(first.x, first.y);
        polygon.remove(0);
        for (Point2D.Double d : polygon) {<!-- -->
            peripheralPath.lineTo(d.x, d.y);
        }
        peripheralPath.lineTo(first.x, first.y);
        peripheralPath.closePath();
        return peripheralPath.contains(point);
    }
 
    /**
     * Get the distance by latitude and longitude (unit: meters)
     *
     * @param lat1 latitude 1
     * @param lng1 longitude 1
     * @param lat2 latitude 2
     * @param lng2 longitude 2
     * @return distance
     */
    public static double getDistance(double lat1, double lng1, double lat2,
                                     double lng2) {<!-- -->
        double radLat1 = rad(lat1);
        double radLat2 = rad(lat2);
        double a = radLat1 - radLat2;
        double b = rad(lng1) - rad(lng2);
        double s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
                Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
        s = s * EARTH_RADIUS;
        s = Math.round(s * 10000d) / 10000d;
        return s;
    }
 
    /**
     * round
     * @param lat1 latitude
     * @param lat2 longitude
     * @param lng1 latitude
     * @param lng2 longitude
     * @param radius Determines whether a point is within a circular area and compares whether the distance between the coordinate point and the center of the circle is less than the radius
     */
    public static boolean isInCircle(double lng1, double lat1, double lng2, double lat2, double radius) {<!-- -->
        double distance = getDistance(lat1, lng1, lat2, lng2);
        System.out.println("Radius:" + radius + "Analysis radius:" + distance);
        if (distance > radius) {<!-- -->
            return false;
        } else {<!-- -->
            return true;
        }
    }

    public static void main(String[] args) {<!-- -->
        String str = "[[114.125986,22.607612],[114.125241,22.607122],[114.125547,22.606775],[114.126303,22.607236]]";
        JSONArray jsonArray = JSONArray.parseArray(str);
        JSONArray jsonArray1 = null;
        List<Point2D.Double> polygon = new ArrayList<>();
        for (Object o : jsonArray) {<!-- -->
            jsonArray1 = JSONArray.parseArray(o.toString());
            polygon.add(new Point2D.Double(jsonArray1.getDouble(0),jsonArray1.getDouble(1)));
        }
        System.out.println(RegionUtil.isInPolygon(new Point2D.Double(114.125872,22.606983), polygon));
    }
 
}

Method 2

Reference URL 1: https://www.php.cn/faq/584994.html
Reference URL 2: https://blog.51cto.com/u_16175486/6825616

pom.xml dependency introduction

<dependency>
<groupId>com.amap.api</groupId>
<artifactId>amap-java-sdk</artifactId>
<version>1.4.0</version>
</dependency>

import introduction

import com.amap.api.maps.AMap;
import com.amap.api.maps.AMapOptions;
import com.amap.api.maps.CameraUpdateFactory;
import com.amap.api.maps.MapView;
import com.amap.api.maps.model.LatLng;
import com.amap.api.maps.model.LatLngBounds;
import com.amap.api.maps.model.Polygon;
import com.amap.api.maps.model.PolygonOptions;

Implementation

Create a map view object and add it to the layout

MapView mapView = new MapView(context, new AMapOptions());
//layout.addView(mapView);

Initialize map

AMap aMap = mapView.getMap();
aMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(39.90923, 116.397428), 10));

Here we can add the set polygon points to the collection

List<LatLng> points = new ArrayList<>();
points.add(new LatLng(39.910698, 116.399406));
points.add(new LatLng(39.909819, 116.405778));
points.add(new LatLng(39.919719, 116.405814));
points.add(new LatLng(39.919657, 116.399362));

Set polygonal painting

PolygonOptions polygonOptions = new PolygonOptions();
polygonOptions.addAll(points);
polygonOptions.strokeColor(Color.RED);
polygonOptions.fillColor(Color.argb(50, 255, 0, 0));
polygonOptions.strokeWidth(10);

Add polygons to the map

Polygon polygon = aMap.addPolygon(polygonOptions);

Here is to determine whether the user’s point is within the polygon range we set.

LatLng location = new LatLng(39.913678, 116.403873);
boolean contains = polygon.contains(location);
System.out.println("Whether the position is within the polygon: " + contains);

The functions applied are probably like this!

Please refer to the circular fence: https://blog.csdn.net/weixin_43992507/article/details/130731955

Directory

Foreword

Effect

Implementation

Introduce js

Use in project

Renderings

Introduction

html

CSS

Specific implementation of JS

Calling instructions

When added

When modifying

Judge whether it is within the range

java painting and determining whether it is within the range

Method 1

Method 2

pom.xml dependency introduction

import introduction

Implementation