对于百度地图需要删格化的实现方案
例如,以200m*200m为单位栅格化,那么转换为横线经度:0.00231888 纵向纬度为:0.00179864
效果图:
以中心点(恒定中心)向外扩张的四象限坐标系。栅格id变更为P200_E1_N1,这个代表200米精度的第一象限的第一个栅格。P200_W1_S1代表四象限的第一个栅格。东西向在前,南北向在后。
N
|
|
|
W------------------------------------E
|
|
|
S
左下角坐标系和四象限坐标系是可以换算的,假定从中心点开始栅格数分别是东向100,南向110,西向100,北向120
那么对于左下角坐标系来说,栅格范围是1-1到200-230
以精度200米为例
1-1对应四象限的P200_W100_S110
100-110对应四象限的P200_W1_S1
拟设中心点为天津站("117.216651", "39.141724")
通过地图点击事件获取点击坐标(req_lng, req_lat)则有以下公式
var jianlng = parseFloat(req_lng)-parseFloat("117.216651");
var jianlat = parseFloat(req_lat)-parseFloat("39.141724");
结果:
正正 -> E_N 第一象限
负正 -> W_N 第二象限
负负 -> W_S 第三象限
正负 -> E_S 第四象限
那么在地图上就可以根据删格编号来绘制删格了
/**
* 绘制删格方法【按删格编号】
* reqModel -> 'POPULATE'、'MIGRATION'
*/
drawShanGeByCode:function(datas, map, colorList, reqModel,topGrid){
var one_x, one_y, two_x, two_y, thr_x, thr_y, fou_x, fou_y;
var codesArray = datas.id.split("_");
var firElement = codesArray[1].substr(0, 1);
var twoElement = codesArray[2].substr(0, 1);
var firNum = parseInt(codesArray[1].substr(1));
var twoNum = parseInt(codesArray[2].substr(1));
var xiangXian;
if(firElement=='E' && twoElement=='N'){
xiangXian = 1;
}else if(firElement=='W' && twoElement=='N'){
xiangXian = 2;
}else if(firElement=='W' && twoElement=='S'){
xiangXian = 3;
}else if(firElement=='E' && twoElement=='S'){
xiangXian = 4;
}
switch(xiangXian){
case 1:
one_x = +(center_lng) + firNum * +(unit_lng);
one_y = +(center_lat) + twoNum * +(unit_lat);
two_x = +(center_lng) + (firNum-1) * +(unit_lng);
thr_y = +(center_lat) + (twoNum-1) * +(unit_lat);
break;
case 2:
one_x = +(center_lng) - (firNum-1) * +(unit_lng);
one_y = +(center_lat) + twoNum * +(unit_lat);
two_x = +(center_lng) - firNum * +(unit_lng);
thr_y = +(center_lat) + (twoNum-1) * +(unit_lat);
break;
case 3:
one_x = +(center_lng) - (firNum-1) * +(unit_lng);
one_y = +(center_lat) - (twoNum-1) * +(unit_lat);
two_x = +(center_lng) - firNum * +(unit_lng);
thr_y = +(center_lat) - twoNum * +(unit_lat);
break;
case 4:
one_x = +(center_lng) + firNum * +(unit_lng);
one_y = +(center_lat) - (twoNum-1) * +(unit_lat);
two_x = +(center_lng) + (firNum-1) * +(unit_lng);
thr_y = +(center_lat) - twoNum * +(unit_lat);
break;
default:
alert('删格编号命名有误!');
}
two_y = one_y;
thr_x = two_x;
fou_x = one_x;
fou_y = thr_y;
if(reqModel=='POPULATE'){
var fillColor = $.getColorByRange(datas.peopleCount, colorList);
var polygon = new BMap.Polygon([
new BMap.Point(one_x, one_y),
new BMap.Point(two_x, two_y),
new BMap.Point(thr_x, thr_y),
new BMap.Point(fou_x, fou_y)
], {strokeColor:"#DDDDDD", strokeWeight:2, strokeOpacity:0.5, fillColor:fillColor}); //创建多边形
map.addOverlay(polygon);
rastersArray.push(polygon);
rastersData.push(datas.id+"@@"+fillColor+"@@"+datas.peopleCount+"@@"+"1");
polygon.addEventListener("click",function(){
var flowInfoWindow;
//var label = '<font style="font-size:14px;font-weight:bold;">删格编号:'+datas.id+'<br>人次:1.2万<br>人数:'+datas.count+'万</font>';
var label = '<div style="margin:0;line-height:20px;padding:2px;"><img src="'+$('#ctx').val()
+ '/images/areaimg/'+getAreaPic()+'" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/><font style="font-size:12px;font-family:"微软雅黑";">编号:'
+ datas.id+'<br>人数:'+datas.peopleCount+'</font></div>';
var title = "<font style='font-size:14px;font-weight:bold;'>删格分布</font>"
flowInfoWindow = new BMapLib.SearchInfoWindow(map, label, {
title: title, //标题
width: 70, //宽度
height: 105, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
enableSendToPhone : false,//去掉发送到手机
searchTypes :[
]
});
//var point = new BMap.Point(polygon.getPath()[0].lng, polygon.getPath()[0].lat);
var point = $.getRasterCenterPoint4Populate(one_x, one_y, two_x, fou_y);
flowInfoWindow.open(point);
//刷新删格画像环图
var config = {};
config.para = {
"uiPopulate.areaId": getAreaId(),
"uiPopulate.peoId": getPeoId(),
"uiPopulate.statisDate": null,
"uiPopulate.statisHour": null,
"uiPopulate.rasterId": datas.id,
"uiPopulate.userScope": "SCOPE",
"uiPopulate.drType": "CLICK"
};
config.async = true;
popuCust.reLoadPeoChart(config);
});
polygon.addEventListener("mouseover",function(config){
strokeColor = polygon.getStrokeColor();
strokeStyle = polygon.getStrokeStyle();
polygon.setStrokeStyle("dashed");
polygon.setStrokeColor("blue");
});
polygon.addEventListener("mouseout",function(config){
//cancelHeightLightPolygon(polygon);
polygon.setStrokeStyle(strokeStyle);
polygon.setStrokeColor(strokeColor);
});
}
}