高德地图根据不规则数组生成多边形

最新推荐文章于 2024-07-18 10:02:42 发布

周公挚友

最新推荐文章于 2024-07-18 10:02:42 发布

阅读量1.5k

点赞数 1

分类专栏：原创前端 JavaScript 文章标签：前端高德地图原创 JavaScript

本文链接：https://blog.csdn.net/a1272146/article/details/89672136

版权

原创同时被 3 个专栏收录

20 篇文章 1 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

<!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"/>
    <style>html, body, #container {height: 100%;width: 100%;margin: 0;}</style>
</head>
<body>

<p><input type="text" value="1" id="inputText" style="width: 100px;"><input type="button" value="生成多边形" onclick="newfgw()"><input type="button" value="清除覆盖物" onclick="removeAllOverlay()"></p>

<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key={输入你的key}"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/food.js?v=1.0"></script>
<script type="text/javascript">

    /*
    1.获取所有要渲染多边形的坐标数组
    2.根据坐标数组计算矩形及中心点
    3.根据中心点计算坐标数组的角度并排序
    4.建立角度分组，根据0-360度圆形进行分组，并通过参数划分分组区域
    5.根据中心点与获取划分区域内最远坐标，并保存到新的数组。
    6.根据数组渲染多边形
    */


    //生成地图全局对象
    var marker=[];//坐标点集合
    var map = new AMap.Map('container', {zoom: 8,   resizeEnable: true,  center: [118,25]});
    //console.log("渲染坐标点",str,zb)
    function addMarker(map,str,zb){marker.push( new AMap.Marker({map: map, position: zb, content:"<span style='background-color: #ffa400;'>["+str+"]</span>"}));}
    function newPolygon(type,map,path) {
        //画出多边形
        if(type==1){
            new AMap.Polygon({map:map,path:path,strokeColor:"#FF33FF",strokeOpacity:0.2,strokeWeight:3,fillColor:"#1791fc",fillOpacity:0.35});
        }else if(type==2){
            new AMap.Polygon({map:map,path:path,strokeColor:"#f3ff00",strokeOpacity:0.2,strokeWeight:6,fillColor:"#fc0019",fillOpacity:0.35});
        }
    }
    function removeAllOverlay(){
        // 清除地图上所有添加的覆盖物
        map.clearMap();
    }
    //添加坐标到地图
    function mapAddMarker(map,arr) {for(var i=0;i<arr.length;i++){addMarker(map,i,arr[i]);}}

    var gdFN={
        calcAngle:function (start, end) {
            // 计算两点间的角度
            var p_start = map.lngLatToContainer(start), p_end = map.lngLatToContainer(end);
            var diff_x = p_end.x - p_start.x, diff_y = p_end.y - p_start.y;
            return 360 * Math.atan2(diff_y, diff_x) / (2 * Math.PI) + 180;
        },

        rectangleAdnCore: function (arr) {
            //获取矩形四个角及中心点
            arr.sort(function (x, y) {return x[0] - y[0]});
            var x0 = arr[0][0];  //横轴最小值
            var x1 = arr[arr.length - 1][0];  //横轴最大值
            arr.sort(function (x, y) {return x[1] - y[1]});
            var y0 = arr[0][1];  //纵轴最小值
            var y1 = arr[arr.length - 1][1];  //纵轴最大值
            return {rectangle: [[x0, y0], [x0, y1], [x1, y1], [x1, y0]], core: [x0+((x1-x0) / 2), y0+((y1-y0) / 2)]}
        },

        polygonArraySort:  function (arr, a2) {
            //根据角度进行排序
            var that=this;
            var arr2 = [];
            for (var i = 0; i < arr.length; i++) {arr2.push({"jd": that.calcAngle([arr[i][0], arr[i][1]],a2), "zb": [arr[i][0], arr[i][1]]});}
            arr2.sort(function (x, y) {return x.jd - y.jd;});
            for(var i=0;i<arr2.length;i++){
                console.log("角度排序",JSON.stringify(arr2[i]));
            }
            return arr2;
        },


        arrayData2: function (n,data,zxzb) {
            var sortArray=[];
            var arr=[];
            for(var i=0;i<360;i=i+n){arr.push([i, i+n]);}
            // console.log(JSON.stringify(arr));
            for(var i=0;i<arr.length;i++){
                // console.log("分组分段arr[i]",JSON.stringify(arr[i]));
                var ai0=arr[i][0];
                var ai1=arr[i][1];
                var zczb=[];
                for(var j=0;j<data.length;j++){
                    var dj=data[j];
                    var jd=data[j].jd;
                    if( dj && jd>ai0 && jd<ai1){
                        // console.log("分组数据",JSON.stringify(data[j]));
                        zczb.push(data[j]);
                    }
                }
                // console.log("角度分组长度",zczb.length);
                if(zczb.length>0){
                    var arrk = [];
                    for (var k = 0; k < zczb.length; k++) {
                        var a = AMap.GeometryUtil.distance(zxzb,zczb[k].zb);
                        arrk.push({jl: a, zb: zczb[k].zb});
                    }
                    arrk.sort(function (x, y) {return y.jl - x.jl;});
                    // console.log("完成的排序",arrk[0]);
                    sortArray.push(arrk[0].zb);
                }
            }
            return sortArray;
        }

    };

    var arr=[
        [116.467456,39.984996],
        [116.469412,39.986412],
        [116.471871,39.995616],
        [116.468098,39.993729],
        [116.464471,39.99669],
        [116.468599,39.995847],
        [116.462483,39.992492],
        [116.465586,39.99678],
        [116.472881,39.997064],
        [116.472881,39.987064],
        [116.462881,39.997064],
    ];


function newfgw() {
    map.clearMap();
    var n=Number(document.getElementById("inputText").value);
    var rAndC=gdFN.rectangleAdnCore(arr);//获取矩形和中心
    mapAddMarker(map,arr);//添加坐标并画出中心点
    addMarker(map,"中心点",rAndC.core);//画出中心点
    var arra2p = gdFN.polygonArraySort(arr, rAndC.core);        //根据角度进行排序
    var arrD2=gdFN.arrayData2(n,arra2p,rAndC.core);//根据角度排序
    console.log("多边形数据",JSON.stringify(arra2p));
    newPolygon(1,map,arrD2);//画出多边形
    map.setFitView();//渲染动画
}

window.onload=function () {
    newfgw();
}



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