利用高德地图实现一个点是否在一个任意多边形内

最新推荐文章于 2023-11-09 16:28:20 发布

cyw930

最新推荐文章于 2023-11-09 16:28:20 发布

阅读量3k

点赞数 2

本文链接：https://blog.csdn.net/qq_43458323/article/details/88747023

版权

利用高德地图实现一个点是否在一个任意多边形内

在网上看了许许多多的利用射线法，还有什么之类的方法来判断一个点是否在噢多边形的内部，但是不知道为什么我就是没办法成功，应该技术太水吧！这个方法个人试验了无数次基本都可以，先解释一下原理，首先我们都知道高德地图api中有专门的描述判断一个点是否在任意一多边形内部，下面直接上代码：

<!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>点是否在多边形内</title>
    <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.13&key=你的高德ak"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        html,body,#container{
            height: 100%
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class='info'>拖动Marker可调整位置</div>
<script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13
    });
    // 创建多边形
    var path = [
        [116.169465,39.932670],
        [116.160260,39.924492],
        [116.186138,39.879817],
        [116.150625,39.710019],
        [116.183198,39.709920],
        [116.226950,39.777616],
        [116.421078,39.810771],
        [116.442621,39.799892],
        [116.463478,39.790066],
        [116.588276,39.809551],
        [116.536091,39.808859],
        [116.573856,39.839643],
        [116.706380,39.916740],
        [116.657285,39.934545],
        [116.600293,39.937770],
        [116.540039,39.937968],
        [116.514805,39.982375],
        [116.499935,40.013710],
        [116.546520,40.030443],
        [116.687668,40.129961],
        [116.539697,40.080659],
        [116.503390,40.058474],
        [116.468800,40.052578]
    ];
    var polygon = new AMap.Polygon({
        map: map,
        fillOpacity:0.4,
        path: path
    });

    // 创建点
    var marker = new AMap.Marker({
        map: map,
        draggable:true,
        position: [116.566298, 40.014179]
    });

    function compute(){
        var point = marker.getPosition();
        var isPointInRing = AMap.GeometryUtil.isPointInRing(point,path);
        marker.setLabel({
           content:isPointInRing?'内部':'外部',
           offset:new AMap.Pixel(20,0)
         });
    }

    compute();
    // 为marker绑定拖拽事件
    marker.on('dragging',compute)
    map.setFitView();

</script>
</body>
</html>

大家在这里插入图片描述大家应该看到了这是高德的实列下面给大家看看我写的由于涉及内容过多只展示相关代码还请大家多多包涵在下面我也会做出相应的解释，

    var checkPoint=localStorage.getItem("c");//这是我利用localStorage存的坐标点的
    var polygonPoints=localStorage.getItem("p");//这是我利用localStorage存的坐标多边形的
	var ace = new Array(); //定义一数组
	var strs= new Array(); //定义一数组 
    strs=checkPoint.split(","); //字符分割 这里把坐标转化为数组，类似于 [116.468800,40.052578]
	ace=group(polygonPoints.split(","), 2)//这里先将他转化为大数组在转化为类似于两个一对的小数组 类似于 [
       // [116.169465,39.932670],
       // [116.160260,39.924492],
       // [116.186138,39.879817],
       // ]
	console.log(strs);
	console.log(ace);

	 // 创建点
    var marker = new AMap.Marker({
        map: map,
        draggable:true,
        position: strs
    });

    function compute(){
        var point = marker.getPosition();
        var isPointInRing = AMap.GeometryUtil.isPointInRing(point,ace);
        // marker.setLabel({
        //     content:isPointInRing?'内部':'外部',
        //     offset:new AMap.Pixel(20,0)
        // });
        alert(isPointInRing?'内部':'外部',)
    }

    compute();
  
function group(array, subGroupLength) {
    var index = 0;
    var newArray = [];

    while(index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
    }

    return newArray;
}