百度地图删格化方案

最新推荐文章于 2023-11-01 11:47:08 发布

原创最新推荐文章于 2023-11-01 11:47:08 发布 · 3.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#删格 #百度地图

技术总结专栏收录该内容

102 篇文章

订阅专栏

本文介绍了一种基于百度地图的栅格化实现方案，通过将地图划分为200m*200m的网格，并定义了一套栅格ID命名规则。利用该方案可以快速定位并绘制地图上的特定区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于百度地图需要删格化的实现方案

例如，以200m*200m为单位栅格化，那么转换为横线经度：0.00231888 纵向纬度为：0.00179864

效果图：

以中心点（恒定中心）向外扩张的四象限坐标系。栅格id变更为P200_E1_N1,这个代表200米精度的第一象限的第一个栅格。P200_W1_S1代表四象限的第一个栅格。东西向在前，南北向在后。

W------------------------------------E

左下角坐标系和四象限坐标系是可以换算的，假定从中心点开始栅格数分别是东向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);
				
			});
		
		
		}
		
		
	}