用 WebGIS 展示身份证首位数字与六大区域

有了这层映射，后面的地图展示就不复杂了，关键是把编码、颜色和图例统一起来。

二、用 Leaflet 和 SpringBoot 做可视化

这部分的核心思路很直接：前端负责展示，后端返回省份空间数据和属性，Leaflet 负责把 GeoJSON 画到地图上。

1. 区域定义和图例

先把六大区域的编号、名称和颜色固定下来，前端渲染时就不会乱。

//区域定义及颜色配置
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. 省份空间数据的展示

拿到后端返回的省份数据后，先根据行政区划代码确定所属区域，再把 GeoJSON 画出来。

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);
}

这里有个小处理：台湾单独按 7 处理，并且用了随机颜色，和六大区域分开。这个做法不算'统一'，但在展示上更清楚，至少不会把它硬塞进前面六类里。

取区域颜色的逻辑也很简单：截取首位数字，直接在配置里找。

//根据区域获取颜色，与标注保持一致
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;
        }
    }
}

这套写法的好处是规则放在前端一份就够了。后端只管把省份边界和属性吐出来，前端按首位数字分组、上色、挂图例，逻辑比较顺。

三、展示结果的理解

把这套映射跑起来后，身份证首位数字和区域之间的关系会很直观。

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。陕西相对强一些，新疆的行政范围最大，地图上也最容易一眼识别出来。

这类展示不追求花哨，重点是把原本藏在编码里的区域信息翻出来。数字本身没变，变的是它和空间的对应关系。