高德地图进阶开发实战案例(7):点是否在多边形内和内外部的数量统计的解决方案

    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=ca11d9894383ee611ed5**"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

        html, body, #container {
            height: 100%
        }
        .amap-marker-label {
            border: 0;
            background-color: #FFF;
        }
        .info >span{
            margin: auto 10px;
        }

<div id="container"></div>
<div class='info'><span id="inRing"></span><span id="outRing"></span></div>
<script type="text/javascript">

 //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        center: [121.548181, 29.806906],
        zoom: 15,
        resizeEnable: true,
    });
    //数据格式化;
    var data = "121.546266,29.80975;121.54543,29.806845;121.548713,29.806752;121.549957,29.809508";
    var points = data.split(";");
    var path = [];
    for (var i = 0; i < points.length; i++) {
        var point = points[i].split(",");
        path.push([point[0], point[1]]);
    }
    // 创建多边形
    var polygon = new AMap.Polygon({
        map: map,
        path: path,
        strokeColor: "#1E9FFF",
        strokeWeight: 2,
        strokeStyle: 'dashed',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#1E9FFF',
        zIndex: 50,
    });
    // 创建点
    var markers = [
        {
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
            position: [121.548181, 29.806906]
        },
        {
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
            position: [121.550219, 29.807674]
        },
        {
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
            position: [121.547244,29.808037]
        },
        {
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
            position: [121.546252,29.807549]
        }
    ];
    var cTotal = [];
    //添加标注;
    var count = markers.length;
    var total = [];//返回的状态数组;
    for (var i = 0; i < count; i++) {
        compute(addMaker(markers[i]));
        total[i] = compute(addMaker(markers[i]));
    }
    //视图;
    map.setFitView();
    //数量统计;
    //console.log(total);
    var inRing = total.filter(item => item =="1").length;//内部;
    var outRing = total.filter(item => item =="0").length;//外部;
    //console.log('内部数量:'+inRing);
    document.getElementById("inRing").innerHTML='内部数量：'+inRing;
    //console.log('外部数量:'+outRing);
    document.getElementById("outRing").innerHTML='外部数量：'+outRing;
    //添加标注;
    function addMaker(marker) {
        var newMaker = new AMap.Marker({
            map: map,
            //icon: marker.icon,
            //draggable: true,
            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(-13, -30)
        });
        return newMaker;
    }
    //判断是否在围栏内;
    function compute(marker) {
        var point = marker.getPosition();
        var isPointInRing = AMap.GeometryUtil.isPointInRing(point, path);
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        marker.setLabel({
            content: isPointInRing ? '内部' : '外部',
            offset: new AMap.Pixel(-5, 35)
        });
        //返回状态,予以统计;
        if (isPointInRing == true) {
            return 1;
        } else {
            return 0;
        }
    }