高德地图根据不规则数组生成多边形
程序员文章站
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>
上一篇： Unity 物理系统--射线
推荐阅读