南风知我意的技术博客

一、中国城市PM2.5可视化案例

数据文件数据.json给出了各个城市的PM2.5值和城市坐标。解析的时候把城市的PM2.5大小用圆圈大小表示，城市坐标直接通过模型位置属性设置

json5

  [{
    "name": "海门",
    "value": 9,
    "coordinate": [121.15, 31.89]
  },
  {
    "name": "青岛",
    "value": 18,
    "coordinate": [120.33, 36.07]
  },{
    "name": "武汉",
    "value": 273,
    "coordinate": [114.31, 30.52]
  }]

精灵模型Sprite实现

javascript

/**
 * 一个精灵模型对象表示一个城市的位置和数据
 */
// 加载一个背景透明的圆形贴图，矩形精灵显示为圆形效果
const texture = new THREE.TextureLoader().load("sprite.png");
// 创建组对象，包含所有精灵对象
const group = new THREE.Group();
// 文件加载对象
const loader = new THREE.FileLoader().setResponseType('json');
// 加载PM2.5数据
loader.load('数据.json', function(data) {
  //遍历数据
  data.forEach(elem => {
    // 精灵材质
    const spriteMaterial = new THREE.SpriteMaterial({
      map: texture, //设置精灵纹理贴图
      transparent: true,
      opacity: 0.5,
    });
    // 创建精灵模型对象
    const sprite = new THREE.Sprite(spriteMaterial);
    group.add(sprite);
    // 控制精灵大小   使用PM2.5大小设置精灵模型的大小
    // 注意适当缩放pm2.5大小,以便得到更好的显示效果
    const k = elem.value / 200
    sprite.scale.set(k, k, 1);
    //获得城市坐标设置精灵模型对象的位置
    sprite.position.set(elem.coordinate[0], elem.coordinate[1], 0)
  });
  // 中国城市坐标整体的几何中心不在坐标原点，需要适当的平移
  group.position.set(-110, -30, 0);
  scene.add(group);//把精灵群组插入场景中
})

一、中国城市PM2.5可视化案例 ​

一、中国城市PM2.5可视化案例