基于 WebGIS 的身份证首位数字与六大区域可视化展示

二、数字与空间展示可视化

本节我们将深入介绍如何基于 Leaflet 和 SpringBoot 来进行数字与空间信息的展示可视化。通过本节的介绍，不仅可以详细掌握一些地理与区域分布的常识，同时可以从地理的角度来查看这些区域信息知识。要想实现区域的空间展示，我们需要在后台返回相应的省份信息，同时要求对地域信息进行划分。

1、地域及图例的前端定义

为了直观的在地图上展示 6 大地域，需要定义地域的编码，即首位数字，地域的名字还有在 WebGIS 展示的时候需要渲染的颜色值，这里在 Javascript 代码中进行以下声明：

//区域定义及颜色配置
var sixregionsList = [
 {index:"1",name:"华北",color:"#df2222"},
 {index:"2",name:"东北",color:"#e39014"},
 {index:"3",name:"华东",color:"#14e3e3"},
 {index:"4",name:"中南",color:"#17e314ed"},
 {index:"5",name:"西南",color:"#e3147d"},
 {index:"6",name:"西北",color:"#e3dd14"}
];

同时为了在展示地图的时候可以直观的对区域信息进行标识，我们还需要动态的根据区域信息来绘制相应的图例，关于图例的创建关键代码如下所示：

var legendData = new Array();
for(var i = 0;i<sixregionsList.length;i++){
 var _tempData = sixregionsList[i];
 legendData.push({ label: "\xa0\xa0"+_tempData.name + _tempData.index, type: "rectangle", radius: 12, color: _tempData.color, fillColor: _tempData.color, fillOpacity: 0.8, weight: 2});
}
initLegend(legendData);
});

2、省份与区域信息展示

如果需要在地图上展示省份与区域的信息，首先需要对返回的省份信息进行截取，在返回的数据中可以看到具体的省份代码。

在前端展示的时候，需要将省份编码信息的首位数组截取后结合区域信息进行识别判断。处理方法如下：

for(var i = 0;i< result.data.length;i++){
 var areaData = result.data[i];
 var regionConfig = areaData.provinceCode == "710000" ? {index:"7",name:areaData.provinceName,color:getRandomColor()} : getSixregionColor(areaData.provinceCode);
 var color = regionConfig.color;
 var regionName = regionConfig.name;
 var areaLayer = L.geoJSON(JSON.parse(areaData.geomJson),{style: {color:color,fillColor:color,weight:3,"opacity":0.65, fillOpacity: 0.65 }}).addTo(collisionLayer);
 var myIcon = L.divIcon({ iconSize: null, className: '', popupAnchor:[5,5], shadowAnchor:[5,5], html: buildShowInfo(i,color,areaData,regionName) });
 showLayerGroup.addLayer(areaLayer);
 //中心点位
 L.marker([areaData.cityLat,areaData.cityLon ], { icon: myIcon}).addTo(collisionLayer);
 showLayerGroup.addLayer(collisionLayer);
}

通过编码获取区域配置信息的代码如下：

//根据区域获取颜色，与标注保持一致
function getSixregionColor(provinceCode){
 var prefix = provinceCode.substring(0,1);
 for(var i = 0;i<sixregionsList.length;i++){
 var _tempData = sixregionsList[i];
 if(prefix == _tempData.index){ return _tempData; break; }
 else{ continue; }
 }
}

通过以上的代码后，可以确保生成的图例的样式与地图绘制的颜色等保持一致，让大家一目了然。

三、成果展示

本节将使用效果图的方式对我国的身份证首位数字与传统六大区域的关联关系的展示成果跟大家展示，通过 WebGIS 页面的展示可以直观的看到结果。

1、华北地区

华北区域的省份首位数字以 1 开头，从 11-15 一共五个省份。从区域来说，华北区域中，内蒙古自治区的空间范围是最大的一个区域。其它的如北京市和天津市等，均是直辖市。

2、东北地区

东北地区的首位数字以 2 开头从 21-23 一共三个省份。从区域来说，东北区域中，黑龙江省的空间范围是最大的一个区域。

3、华东地区

华东地区的首位数字以 3 开头从 31-37 一共七个省份。从区域来说，华东的区域中，经济都是比较强的，而且沿海的省份很多，经济趋势也很强。江苏省、山东省、浙江省、上海市这些绝度都是神一样的存在。

4、中南地区

中南地区的首位数字以 4 开头从 41-46 一共六个省份。从区域来说，中南的区域中，经济分布不太一致，比如沿海的广东省，经济就很强，而河南则相对弱一些。

5、西南地区

西南地区的首位数字以 5 开头从 50-54 一共五个省份。与比的省份不一样，重庆市的编码是 50 开始，这待遇子全国都是独一份的。从区域来说，西南的区域中，经济基本差不多，行政范围面积最大的肯定是西藏自治区。

6、西北地区

西北地区的首位数字以 6 开头从 61-65 一共五个省份。从区域来说，西北区域中，经济基本差不多也是比较靠后的，陕西省的经济应该比较强的，其它省就相对会弱一些，行政范围面积最大的肯定是新疆自治区。

四、总结

本文通过身份证首位数字与地理空间的结合，展示了地理信息技术在日常生活中的应用。利用 WebGIS 这一现代化的技术手段，让读者能够直观地感受到地理空间的魅力，从而更好地认识和理解我们所生活的世界。