北京到上海,Three.js 旅行轨迹的可视化

·  阅读 5952
北京到上海,Three.js 旅行轨迹的可视化

最近从北京搬到了上海,开始了一段新的生活,算是人生中一个比较大的事件,于是特地用 Three.js 做了下可视化。

在这个地理信息相关的可视化的案例中,我们能学到地图怎么画、经纬度如何转成坐标值,这些是地理可视化的通用技术。

那我们就开始吧。

思路分析

Three.js 画立方体、画圆柱、画不规则图形我们都画过,但是如何画一个地图呢?

其实地图也是由线、由多边形构成的,有了数据我们就能画出来,缺少的只是数据。

地图信息的描述是一个通用需求,所以有相应的国际标准,就是 GeoJson,它是通过点、线、多边形来描述地理信息的。

通过指定点、线、多边形的类型、然后指定几个坐标位置,就可以描述出相应的形状。

geojson 的数据可以通过 geojson.io 这个网站做下预览。

比如中国地图的 geojson:

有了这个 json,只要用 Three.js 画出来就行,通过线和多边形两种方式。

但是还有一个问题,geojson 中记录的是经纬度信息,应该如何转成二维坐标来画呢?

这就涉及到了墨卡托转换,它就是做经纬度转二维坐标的事情。

这个转换也不用我们自己实现,可以用 d3 内置的墨卡托坐标转换函数来做。

这样,我们就用 Three.js 根据 geojson 来画出地图。

我们还要画一条北京到上海的曲线,这个用贝塞尔曲线画就行,知道两个端点的坐标,控制点放在中间的位置。

那怎么知道两个端点,也就是上海和北京的坐标呢?

这个可以用“百度坐标拾取系统”这个工具,点击地图的某个位置,就可以直接拿到那个位置的经纬度。然后我们做一次墨卡托转换,就拿到坐标了。

地图画出来了,旅行的曲线也画出来了,接下来调整下相机位置,从北京慢慢移动到上海就可以了。

思路理清了,我们来写下代码。

代码实现

我们要引入 d3,然后使用 d3 的墨卡托转换功能,

const projection = d3.geoMercator()
    .center([116.412318,39.909843])
    .translate([0, 0]);
复制代码

中间点的坐标就是北京的经纬度,就是我们通过“百度坐标拾取工具”那里拿到的。

北京和上海的坐标位置也可以把经纬度做墨卡托转换得到:

let beijingPosition= projection([116.412318,39.909843]);
let shanghaiPosition = projection([121.495721,31.236797]);
复制代码

先不着急画旅行的曲线,先来画地图吧。

先加载 geojson:

const loader = new THREE.FileLoader();
loader.load('./data/china.json', (data) => {
    const jsondata = JSON.parse(data);
    generateGeometry(jsondata);
})
复制代码

然后根据 json 的信息画地图。

遍历 geojson 的数据,把每个经纬度通过墨卡托转换变成坐标,然后分别用线和多边形画出来。

画多边形的时候遇到北京和上海用黄色,其他城市用蓝色。

function generateGeometry(jsondata) {
  const map = new THREE.Group();
    
  jsondata.features.forEach((elem) => {
    const province = new THREE.Group();

    // 经纬度信息
    const coordinates = elem.geometry.coordinates;
    coordinates.forEach((multiPolygon) => {
      multiPolygon.forEach((polygon) => {
        // 画轮廓线
        const line = drawBoundary(polygon);

        // 画多边形
        const provinceColor = ['北京市', '上海市'].includes(elem.properties.name) ? 'yellow' : 'blue';
        const mesh = drawExtrudeMesh(polygon, provinceColor);

        province.add(line);
        province.add(mesh);
      });
    });

    map.add(province);
  })

  scene.add(map);
}
复制代码

然后分别实现画轮廓线和画多边形:

轮廓线(Line)就是指定一系列顶点来构成几何体(Geometry),然后指定材质(Material)颜色为黄色:

function drawBoundary(polygon) {
    const lineGeometry = new THREE.Geometry();

    for (let i = 0; i < polygon.length; i++) {
      const [x, y] = projection(polygon[i]);
      lineGeometry.vertices.push(new THREE.Vector3(x, -y, 0));
    }

    const lineMaterial = new THREE.LineBasicMaterial({ 
      color: 'yellow'
    });

    return new THREE.Line(lineGeometry, lineMaterial);
}
复制代码

现在的效果是这样的:

多边形是 ExtrudeGeometry,也就是可以先画出形状(shape),然后通过拉伸变成三维的。

function drawExtrudeMesh(polygon, color) {
    const shape = new THREE.Shape();

    for (let i = 0; i < polygon.length; i++) {
      const [x, y] = projection(polygon[i]);

      if (i === 0) {
        shape.moveTo(x, -y);
      }

      shape.lineTo(x, -y);
    }

    const geometry = new THREE.ExtrudeGeometry(shape, {
      depth: 0,
      bevelEnabled: false
    });

    const material = new THREE.MeshBasicMaterial({
      color,
      transparent: true,
      opacity: 0.2,
    })

    return new THREE.Mesh(geometry, material);
}
复制代码

第一个点用 moveTo,后面的点用 lineTo,这样连成一个多边形,然后指定厚度为 0,指定侧面不需要多出一块斜面(bevel)。

这样,我们就给每个省都填充上了颜色,北京和上海是黄色,其余省是蓝色。

接下来,在北京和上海之间画一条贝塞尔曲线:

const line = drawLine(beijingPosition, shanghaiPosition);
scene.add(line);
复制代码

贝塞尔曲线用 QuadraticBezierCurve3 来画,控制点指定中间位置的点。

function drawLine(pos1, pos2) {
  const [x0, y0, z0] = [...pos1, 0];
  const [x1, y1, z1] = [...pos2, 0];

  const geomentry = new THREE.Geometry();
  geomentry.vertices = new THREE.QuadraticBezierCurve3(
      new THREE.Vector3(-x0, -y0, z0),
      new THREE.Vector3(-(x0 + x1) / 2, -(y0 + y1) / 2, -10),
      new THREE.Vector3(-x1, -y1, z1),
  ).getPoints();

  const material = new THREE.LineBasicMaterial({color: 'white'});

  const line = new THREE.Line(geomentry, material);
  line.rotation.y = Math.PI;

  return line;
}
复制代码

这样,地图和旅行轨迹就都画完了:

当然,还有渲染器、相机、灯光的初始化代码:

渲染器:

const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
复制代码

渲染器设置背景颜色为黑色,画布大小为窗口大小。

灯光:

let ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
复制代码

灯光用环境光,也就是每个方向的明暗都一样。

相机:

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
复制代码

相机用透视相机,特点是近大远小,需要指定看的角度,宽高比,和远近的范围这样四个参数。

位置设置在 0 0 10 的位置,在这个位置去观察 0 0 0,就是北京上方的俯视图(我们做墨卡托转换的时候指定了北京为中心)。

修改了相机位置之后,看到的地图大了许多:

接下来就是一帧帧的渲染,在每帧渲染的时候移动下相机位置,这样就是从北京到上海的一个移动的效果:

function render() {
    if(camera.position.x < shanghaiPosition[0]) {
        camera.position.x += 0.1;
    }  
    if(camera.position.y > -shanghaiPosition[1]) {
        camera.position.y -= 0.2;
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
复制代码

大功告成!我们来看下最终的效果吧:

代码上传到了 github: github.com/QuarkGluonP…

也在这里贴一份:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>map-travel</title>
    <style>
      html body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <script src="./js/three.js"></script>
    <script src="./js/d3.js"></script>
    <script>
      const scene = new THREE.Scene();

      const renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(0x000000);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(0, 0, 10);
      camera.lookAt(scene.position);

      let ambientLight = new THREE.AmbientLight(0xffffff);
      scene.add(ambientLight);

      function create() {
          const loader = new THREE.FileLoader();
          loader.load('./data/china.json', (data) => {
            const jsondata = JSON.parse(data);
            generateGeometry(jsondata);
          })
      }

      const projection = d3.geoMercator()
            .center([116.412318,39.909843])
            .translate([0, 0]);

      let beijingPosition= projection([116.412318,39.909843]);
      let shanghaiPosition = projection([121.495721,31.236797]);

      function drawBoundary(polygon) {
        const lineGeometry = new THREE.Geometry();

        for (let i = 0; i < polygon.length; i++) {
          const [x, y] = projection(polygon[i]);
          lineGeometry.vertices.push(new THREE.Vector3(x, -y, 0));
        }

        const lineMaterial = new THREE.LineBasicMaterial({ 
          color: 'yellow'
        });

        return new THREE.Line(lineGeometry, lineMaterial);
      }

      function drawExtrudeMesh(polygon, color) {
        const shape = new THREE.Shape();

        for (let i = 0; i < polygon.length; i++) {
          const [x, y] = projection(polygon[i]);

          if (i === 0) {
            shape.moveTo(x, -y);
          }

          shape.lineTo(x, -y);
        }

        const geometry = new THREE.ExtrudeGeometry(shape, {
          depth: 0,
          bevelEnabled: false
        });

        const material = new THREE.MeshBasicMaterial({
          color,
          transparent: true,
          opacity: 0.2,
        })
        
        return new THREE.Mesh(geometry, material);
      }

      function generateGeometry(jsondata) {
          const map = new THREE.Group();

          jsondata.features.forEach((elem) => {
            const province = new THREE.Group();

            const coordinates = elem.geometry.coordinates;
            coordinates.forEach((multiPolygon) => {
              multiPolygon.forEach((polygon) => {
                const line = drawBoundary(polygon);

                const provinceColor = ['北京市', '上海市'].includes(elem.properties.name) ? 'yellow' : 'blue';
                const mesh = drawExtrudeMesh(polygon, provinceColor);
                
                province.add(line);
                province.add(mesh);
              });
            });

            map.add(province);
          })

          scene.add(map);
          const line = drawLine(beijingPosition, shanghaiPosition);
          scene.add(line);

      }

      function render() {
        if(camera.position.x < shanghaiPosition[0]) {
            camera.position.x += 0.1;
        }  
        if(camera.position.y > -shanghaiPosition[1]) {
            camera.position.y -= 0.2;
        }
        renderer.render(scene, camera);
        requestAnimationFrame(render);
      }

      function drawLine(pos1, pos2) {
          const [x0, y0, z0] = [...pos1, 0];
          const [x1, y1, z1] = [...pos2, 0];

          const geomentry = new THREE.Geometry();
          geomentry.vertices = new THREE.QuadraticBezierCurve3(
              new THREE.Vector3(-x0, -y0, z0),
              new THREE.Vector3(-(x0 + x1) / 2, -(y0 + y1) / 2, -10),
              new THREE.Vector3(-x1, -y1, z1),
          ).getPoints();

          const material = new THREE.LineBasicMaterial({color: 'white'});

          const line = new THREE.Line(geomentry, material);
          line.rotation.y = Math.PI;

          return line;
      }

      create();
      render();
    </script>
  </body>
</html>
复制代码

总结

地图形状的表示是基于 geojson 的规范,它是由点、线、多边形等信息构成的。

用 Three.js 或者其他绘制方式来画地图只需要加载 geojson 的数据,然后通过线和多边型把每一部分画出来。

画之前还要把经纬度转成坐标,这需要用到墨卡托转换。

我们用 Three.js 画线是通过指定一系列顶点构成 Geometry,而画多边形是通过绘制一个形状,然后用 ExtrudeGeometry(挤压几何体) 拉伸成三维。墨卡托转换直接使用了 d3 的内置函数。旅行的效果是通过一帧帧的移动相机位置来实现的。

熟悉了 geojson 和墨卡托转换,就算是入门地理相关的可视化了。

你是否也想做一些和地理相关的可视化或者交互呢?不妨来尝试下吧。

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改