mapbox添加山地模型

1,318 阅读2分钟

mapbox添加山地模型

一.数据下载

上相关数据网站下载对应的地形DEM高程数据,,如下图:
01.png

二.建模


根据DEM格式数据构建地形模型,这里我们使用的是cityEngine。

  1. 首先,打开cityEngine,新建一个cityEngine Project,将上面下载的tif格式数据拷贝到项目目录下。
  2. import 一个Terrain Import

02.png
03.png
  选择对应的高程数据和纹理贴图,如果报错超过4000pixels,将下面的X-Size和Z-Size调小,然后可以在scene中看  到如下模型:
04.png

显然,模型是由问题的,可以调节高度信息来改变模型
05.png

此时,再看地形模型就好很多了;

  1. 导出模型,file -> Export Models 选择导出FBX模型。

如果对CityEngine 不太熟悉的同学也可以使用QGis的Qgis2threejs插件导出模型;

三.模型调整

使用blender打开导出的fbx模型文件,发现存在一些问题:

06.png

我们需要把四周的平面去掉,可以使用blender来进行调整,

07.png

最后可以得到下图最终的模型:

08.png

最后,导出成glb格式的模型。

四.将模型添加到地图

使用mapbox的custom Layer,其中涉及到坐标的转换,如果对坐标转换不太了解,可以直接使用Threebox根据经纬度添加,可以先使用添加区域轮廓图的中心点位置。

var loader = new THREE.GLTFLoader(); 
map.on('style.load', function () {
      map.addLayer({
          id: 'custom_layer',
          type: 'custom',
          onAdd: function (map, mbxContext) {
              tb = new Threebox(
                  map,
                  mbxContext,
                  { defaultLights: false }
              );
              let lightGroup = new THREE.Group();
              let sunlight = new THREE.DirectionalLight(0xffffff, 0.015);
              sunlight.position.set(0, 3000, 1200);
              sunlight.matrixWorldNeedsUpdate = true;
              sunlight.name = 'light';
              lightGroup.add(sunlight);
              tb.world.add(lightGroup);
              loader.load(
                  'models/Terrain.glb',
                  function (model) {
                      let terrain = model.scene;
                      let position = tb.projectToWorld([112.33593, 37.940017]);
                      terrain.position.set(position.x, position.y, 10); //z要慢慢调整到一个合适的高度
                      terrain.scale.set(10, 10, 10); //根据地形调整
                      terrain.rotation.x = Math.PI / 2; //角度调整
                      terrain.rotation.y = Math.PI;
                      terrain.children[0].children[0].material.color.setRGB(6, 16, 24);
                      tb.add(terrain);
                      //用于chrom扩展程序three.js inspector进行调试
                      window.scene = tb.scene;
                      window.THREE = THREE;
                  },
                  function (xhr) {
                      console.log((xhr.loaded / xhr.total * 100) + '% loaded');
                  },
                  function (error) {
                      console.log('An error happened');
                  }
              );
          },
          render: function (gl, matrix) {
              tb.update();
          }
      }, 'water');
  })

此时在浏览器显示肯定还是存在一些问题,主要是位置,缩放比例,角度等不一致,此时需要进行一些微调;可以使用three.js inspector

调整关照参数:

09.png

调整模型参数:

10.png

调整模型材质:

11.png

最后,将调整的参数在代码中修改即可。