当前位置：首页 > article >正文

【教程】数据可视化处理之2024年各省GDP排名预测！

article 2025/1/11 11:52:55

过去的一年里，我国的综合实力显著提升，在新能源汽车、新一代战机、两栖攻击舰、航空航天、芯片电子、装备制造等领域位居全球前列。虽然全国各省市全年的经济数据公布还需要一段时间，但各地的工业发展数据，财政收入数据已大概揭晓，从统计学来看各地全年的经济数据也基本稳定。

由于预测版本众多，本文仅选取一份，并借助Mapmost SDK for WebGL这款Web端三维地图开发引擎进行数据可视化处理操作演示。

数据参考： https://www.163.com/dy/article/JKP7LIRR05563WUS.html

注：数据仅供参考（不含港澳台）

一、静态图标展示

基于Mapmost SDK for WebGL 实现

该图通过静态图标直观展示了2024年全国各省GDP预测排名情况，并将31个省份划分为三个梯队，每个梯队采用不同的图标进行区分。

步骤如下：

地图初始化：首先，我们设置了地图的基本样式，其中仅包含一个纯色背景图层，以确保地图的简洁性。

let map = new mapmost.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {},
    glyphs: "https://delivery.mapmost.com/font/{fontstack}/{range}.pbf",
    layers: [  // 设置背景图层
      {
        id: "land",
        type: "background",
        layout: {},
        paint: { 'background-color': "#ccc" }
      }
    ]
  },
  center: [106.57423432175028, 32.01709169307357],
  zoom: 4.175765971417573,
  userId: '***',  // 授权码
});

绘制省界图层：通过调用map.addLayer接口，我们添加了一个类型为fill的图层，用以展示各省的边界。利用match表达式，我们为不同省份赋予了不同的颜色，颜色越深表示GDP值越高。

map.on('load',function(){
  // 添加数据源
  map.addSource('zg', {
    "type": "geojson",
    "data": "./zg.geojson" // 替换为你的数据路径
  })

  // 按照GDP值将省份分成5个梯队
  const colorGroups = {
    first: ["广东省", "江苏省", "山东省", "浙江省", "四川省", "河南省"],
    second: ["湖北省", "福建省", "湖南省", "安徽省", "上海市", "北京市"],
    third: ["河北省", "陕西省", "江西省", "重庆市", "辽宁省", "云南省"],
    fourth: ["广西壮族自治区", "内蒙古自治区", "山西省", "贵州省", "新疆维吾尔自治区", "天津市"],
    fifth: ["黑龙江省", "吉林省", "甘肃省", "海南省", "宁夏回族自治区", "青海省", "西藏自治区"]
  };

  // 为每个梯队的省份设置颜色
  function getColorForProvince(provinceName) {
    if (colorGroups.first.includes(provinceName)) return "#ef6548";
    if (colorGroups.second.includes(provinceName)) return "#fc8d59";
    if (colorGroups.third.includes(provinceName)) return "#fdbb84";
    if (colorGroups.fourth.includes(provinceName)) return "#fdd49e";
    if (colorGroups.fifth.includes(provinceName)) return "#fef0d9";
    return "#fff"; 
  }

  // 定义颜色匹配数组
  let colorData = ["match", ["get", "name"],]
  Object.values(colorGroups).flat().map(province => { colorData.push(province, getColorForProvince(province)) })
  colorData.push("#fff")

  // 添加省界图层
  map.addLayer({
    "id": "zg",     // 图层id
    "type": 'fill', // 图层类型
    "source": "zg", // 图层数据源
    "paint": {      // 绘制属性
      "fill-color": colorData,       // 填充颜色
      "fill-outline-color": "#fff",  // 填充轮廓颜色
      "fill-opacity": 1,             // 填充不透明度
    }
  });
})

标注省份名称：接着，我们使用map.addLayer接口添加了一个类型为symbol的图层，用于显示省份名称。通过在layout参数中设置text-field为数据中的name属性，实现了省份名称的文字标注。

// 添加数据源
map.addSource('labels', {
  "type": "geojson",
  "data": "./labels.geojson"
})

// 添加省份标注图层
map.addLayer({
  "id": "name",       // 图层id
  "type": "symbol",   // 图层类型
  "source": "labels", // 图层数据源
  "layout": {         // 布局属性
    "text-field": ["get", "name"],   // 文本字段，从GeoJSON数据中获取'name'属性作为文本
    "text-variable-anchor": ["top"], // 文本锚点位置，始终在顶部
    "text-allow-overlap": true, // 允许文本重叠
    "text-size": 12, // 文本大小
  },
  "paint": { // 绘制属性
      "text-color": "#5c2223", // 文本颜色
  }
})

自定义图标：在添加图标之前，我们使用map.loadImage和map.addImage方法加载自定义图标。随后，再次通过map.addLayer接口添加一个类型为symbol的图层，并利用match表达式为每个省份指定相应的图标，从而清晰地展示了各省份的GDP预测排名情况。

// 图标路径数组
const iconPaths = ['./icons/icon1.png', './icons/icon2.png', ..., './icons/icon31.png'];

// 遍历图标路径数据并加载图标
iconPaths.forEach((path, index) => {
  map.loadImage(path, (error, image) => {
     if (error) throw error;
     map.addImage(`icon${index + 1}`, image);
  });
});

// 设置数据源
map.addSource('icons', {
  "type": "geojson",
  "data": "./icons.geojson"
})

// 添加自定义图标图层
map.addLayer({
  "id": "icons",     // 图层id
  "type": "symbol",  // 图层类型
  "source": "icons", // 图层数据源
  "layout": {        // 布局属性
    "icon-image": [  // 图标图片，使用'match'表达式根据'name'属性匹配不同的图标
      'match',
      ['get', 'name'],
      "广东省", "icon1",
      "江苏省", "icon2",
      // ...省略其余图标匹配规则
      "icon" 
    ],
    "icon-size": 0.25,          // 图标大小
    "icon-allow-overlap": true  // 允许图标重叠
  }
})

二、图层展示

基于Mapmost SDK for WebGL 实现

该图根据各省GDP的数值将31个省份划分为五个梯队，每个梯队采用不同大小和颜色的点进行区分。步骤如下：

添加底图：首先，我们通过map.addRasterLayer2接口引入了天地图作为底图。

let option = {
  'id': 'tdt',
  'project': '4490',
  'source': {
    'tiles': ['<your TDT url>'],  // 替换成你的天地图地址
  }
}
map.addRasterLayer2(option)

标注省份名称：虽然可以使用天地图的标注，但为了控制文字位置，我们选择了使用map.addLayer接口添加一个symbol类型的图层。在这个图层中，我们通过layout参数的text-field设置，从数据中提取name属性，以实现省份名称标注。代码参考静态图标展示第三步。
点状图层绘制：接着，我们通过调用map.addLayer接口，添加了一个circle类型的图层。利用step表达式，我们根据GDP数值范围设定了不同的点样式，从而为每个梯队分配了独特的大小和颜色，以区分各省份的经济表现。

// 添加数据源
map.addSource("points", {
  type: "geojson",
  data: "./points.geojson",
});

// 添加点图层
map.addLayer({
  id: "points",     // 图层id
  type: "circle",   // 图层类型
  source: "points", // 图层数据源
  paint: { // 绘制属性
    "circle-color": [  // 圆的颜色，使用'step'表达式根据数值分段
      "step",
      ["get", "num"], // 获取GeoJSON数据中的"num"属性，即GDP值
      "rgb(76,175,80)", 13000,  // 如果num小于13000，颜色为"rgb(76,175,80)"
      "rgb(33,150,243)", 27000, // 如果num在13000到27000之间，颜色为"rgb(33,150,243)"
      "rgb(255,152,0)", 47000,
      "rgb(244,67,54)", 60000,
      "rgb(156,39,176)" // 如果num大于60000，颜色为"rgb(156,39,176)"
     ],
    "circle-stroke-width": 7, // 圆形边框的宽度
    "circle-stroke-color": [  // 圆形边框的颜色，使用'step'表达式根据数值分段
      "step",
      ["get", "num"],
      "rgba(76,175,80,0.4)", 13000, // 如果num小于13000，颜色为"rgba(76,175,80,0.4)"
      "rgba(33,150,243,0.4)", 27000, // 如果num在13000到27000之间，颜色为"rgba(33,150,243,0.4)"
      "rgba(255,152,0,0.4)", 47000,
      "rgba(244,67,54,0.4)", 60000,
      "rgba(156,39,176,0.4)" // 如果num大于60000，颜色为"rgba(156,39,176,0.4)"
     ],
     "circle-radius": [ // 圆形的半径，使用'step'表达式根据数值分段
       "step",
       ["get", "num"],
       10, 13000, // 如果num小于13000，半径为10
       14, 27000, // 如果num在13000到27000之间，半径为14
       18, 47000,
       22, 60000,
       26 // 如果num大于60000，半径为26
     ],
  }
});

基于Mapmost SDK for WebGL 实现

此外，我们可以在该图层上实现点击交互功能，当我们点击某个省份时，将以弹框的形式展示该省的排名及其GDP数据等详细信息，从而增强互动性和信息呈现效果。

// 当点击图层id为'points'的图层时，执行以下函数
map.on('click', 'points', function (e) {
  // 添加弹框
  new mapmost.Popup()
    .setLngLat(e.lngLat) // 设置弹框位置
    .setHTML(e.features[0].properties.no + "<br>" + e.features[0].properties.name + "：" + e.features[0].properties.num) // 设置弹框内容
    .addTo(map);
});