欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-16 19:55:16
...
<!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>