中国分省份像素地图（HTML+JS 轻量级实现地图数据展示）

oho155

已于 2022-11-24 19:52:04 修改

阅读量1.9w

点赞数

分类专栏：前端开发文章标签： javascript html 前端

于 2022-11-17 11:47:28 首次发布

本文链接：https://blog.csdn.net/oho155/article/details/127900302

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

中国分省份像素地图

想法由来
先看效果（东三省）
实现过程

想法由来

"美丽国"经常搞得那些大选，头条上铺天盖地的报道，经常用到一个类似地图的图例，如：
美丽国大选图例
这个虽然不是太标准，但简约表明了各个州的方位，数据等信息。想着我们大中国是不是也可以这么做，避免要用地图，都要引入echart之类的庞大组件。网络上去搜索，只有一份中国地图像素化，也没有数据，也没有分省。于是动手自己整理一份（过程繁琐，因为中国面积大，省份界限不规则，大小差异巨大，怎样尽量保持大概形态，又尽量少的像素，确实是个难题）。

先看效果（东三省）

只展示东三省，做个示意，全国地图应该现在是需要授权，否则平台不敢轻易放

这个地图用到了44*37 像素表达，大概表达了省份的方位，形状，大小，个人觉得还是比美丽国那个单州单像素好太多（那个牺牲较大的准确性，特别是大小跟形状）

实现过程

ps上画个大概

地图管的研，就算是像素的也会被屏蔽。这边就略过

看着这个图，编制js数据


var provinceList =
[
	{
		"province":"新疆",
		"abbreviation":"新",
		"center":[11,11],
		"pixel":[[4,12,13],[5,10,14],[6,9,14],[7,7,14],[8,7,15],[9,2,16],[10,1,17],[11,2,17],[12,1,15],[13,2,14],[14,3,12],[15,3,12],[16,12,12]]
	},
	...
]

编制规则如下：
province：省份名称（两个字到三个字）
abbreviation：简称（一个字）
center：中心点（也参考一点省会所在位置）
pixel：像素集合，[[行号，起始列号，终止列号],…] （采用这个规则，尽量压缩数据量）

HTML + JS 代码

<!DOCTYPE html>
<!-- 作者：oho155 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国分省份像素地图</title>
    <style>
        ul,li {
            list-style: none;
            margin: 0;
            padding: 0
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        .pixeltable {
            /* 横向44格的宽度，每格宽度在下面li*/
            width: 660px;
            border-top: 1px solid black;
            border-bottom:  1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
        }
        .pixeltable li {
            /* 每格的宽高 */
            width: 15px;
            height: 15px;
            float: left;
            box-sizing: border-box;
            font-size:10px;
            padding: 0px;
        }
    </style>
</head>
<body>
<div class="pixeltable">
    <ul id = "pixelboxul" class="clearfix">
 
    </ul>
</div>
</body>
</html>

<script src="./chinapixelmapdata.js"></script>
<script src="./data.js"></script>
<script>
    // 设置各省份的某项数据，这边以人口为例，保存在一个Map中方便查找
    var dataMap = new Map();
    for(let i = 0; i< dataList.length; i++){
        dataMap.set(dataList[i].province,Number(dataList[i].value))
    }

    // 初始化方格底图二位数组
    var cells=new Array();       
    for(let i=0;i<37;i++){
          cells[i]=new Array(); 
          for(let j = 0; j < 44; j++){
               cells[i][j] = {}; 
               cells[i][j].province = ""
          }
    }
    // 从像素地图基础数据更新方格地图二维数组
    for (let i = 0; i < provinceList.length; i++) {
        let province = provinceList[i]
        for(let j = 0; j <province.pixel.length; j++){
            let pixel = province.pixel[j]
            for(let k = pixel[1];k<=pixel[2];k++){
                // 省份
                cells[pixel[0]][k].province = province.province
                // 简称
                cells[pixel[0]][k].abbreviation = province.abbreviation
                // 是否该省中心点（用来显示简称）
                if((pixel[0]==province.center[0]) && (k == province.center[1])){
                    cells[pixel[0]][k].center = true
                }else{
                    cells[pixel[0]][k].center = false
                }
            }
            
        }
    }
    // 设置每个小方格的边框样式
    var htmlStr = ""
    for(let i = 0; i < 37; i++) {
        for(let j = 0; j < 44; j++){
            let styleStr = ''
            let pc = ''
            if(cells[i][j].province != ''){
                if((cells[i][j].province != cells[i-1][j].province) &&  (cells[i-1][j].province =='')){
                    styleStr += 'border-top: 1px solid black;'
                }
                if(cells[i][j].province != cells[i+1][j].province ){
                    styleStr += 'border-bottom: 1px solid black;'
                }
                if((cells[i][j].province != cells[i][j-1].province) && (cells[i][j-1].province == '')){
                    styleStr += 'border-left: 1px solid black;'
                }
                if(cells[i][j].province != cells[i][j+1].province ){ 
                    styleStr += 'border-right: 1px solid black;'
                }
                // 这个是颜色渐变的方式，这边是求一下各省人口（万）除于50（人口最多的广东除50后为227，尽量靠近255）
                let m50 = 227 - Math.round(dataMap.get(cells[i][j].province)/50)
                styleStr += "background-color: rgb(255," + m50 + "," + m50 + ");" 
                // 增加鼠标经过提示信息
                let title =  cells[i][j].province + "人口：" + (dataMap.get(cells[i][j].province)) + "万"

                // 中心点，写上省份简称
                if(cells[i][j].center){
                    pc = cells[i][j].abbreviation
                }
                htmlStr += '<li style="' + styleStr + '" title ="' + title + '">' + pc + '</li>'
            }else{
                // 以下几行是南海九段线，宣誓下主权
                if(i==30&&(j>=39 && j<=42)){
                    styleStr += 'border-top: 1px dashed black;'
                }
                if(i==35 &&(j>=39 && j<=42)){
                    styleStr += 'border-bottom: 1px dashed black;'
                }
                if(j==39 &&(i>=30 && i<=35)){
                    styleStr += 'border-left: 1px dashed black;'
                }
                if(j==42 &&(i>=30 && i<=35)){
                    styleStr += 'border-right: 1px dashed black;'
                }
                if(i==31 && j==41){
                    pc = '中国南海'
                }

                htmlStr += '<li style="' + styleStr + '">' + pc + '</li>'
            }
            
        }
    }


    //通过id获取节点对象
    var d = document.getElementById('pixelboxul');
    d.innerHTML = d.innerHTML + htmlStr;
</script>