# 三维可视化效果实现原理

陈倩 2021-01-22

# 前言

此次主要是对项目上做过的一些简单的三维效果进行分享，从而让大家了解三维实际上做了些什么，并了解一些三维实现的方式，揭开三维的面纱。这次我选取了三维应用中最常用的两个方面的素材和大家分享：有属于三维的基础常用的部分：即对单个地理要素的表达，不涉及到地理大数据中多一方面的展现；也有三维中复杂的一面：三维分析。

实现的原理采用了三维常见的较简单的实现方式，大家如果有更好的实现方式可以告知于我，共同进步。

# 一、流动长江及自定义 lable

# 效果

大家看到，这里是一个流动的长江的效果，并且在长江左边源头处还有一个自定义的“长江”字体。这里的实现效果很简单。

# 技术要点解释

主要的思路是添加三个 entity 要素。（在三维中，entity 是展现地理要素的最常见的方式）

长江的外部轮廓

let en1 = manager.viewer.entities.add({
  name: "轮廓",
  polyline: {
    positions: carsians,
    width: 5,
    material: new manager.cesium.Color.fromCssColorString("#53ADFF"),
    clampToGround: true,
    zIndex: 1,
  },
});

1
2
3
4
5
6
7
8
9
10

长江内部流动线条

let en2 = manager.viewer.entities.add({
  name: "流动",
  polyline: {
    positions: carsians,
    width: 4.0,
    material: new manager.cesium.PolylineTrailMaterialProperty({
      color: new manager.cesium.Color.fromBytes(3, 253, 190, 255),
      outlineWidth: 0.1,
      trailLength: 0.1,
      period: 15.0,
    }),
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13

“长江”字体。这里使用的是一张 svg 图片。这种格式在地图上渲染比之文字和 png 等效果要好，体现在更为高清无毛边。

let en3 = manager.viewer.entities.add({
  name: "字体",
  position: new manager.cesium.Cartesian3.fromDegrees(
    97.24992278600001,
    32.94874152800003,
    200
  ),
  billboard: {
    image: this.publicPath + "static/assets/changJiangRiver.svg",
    scale: 1,
    pixelOffset: new manager.cesium.Cartesian2(-29, -10),
    disableDepthTestDistance: Number.POSITIVE_INFINITY,
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

将三者通过位置坐标组织起来，就形成了地图上的效果。

# 二、淹没分析

# 效果

这是淹没分析的效果，采用的思路是地形的分层设色功能，粒子效果采用 canvas 绘制。通过动态的设置不同高度的地形，不同的颜色，从而达到一种洪水上升的效果。这里也有其他的实现思路：比如利用多边形（ polygon ）的 extrudedHeight 属性随时间动态增长，从而模拟出洪水蔓延上升的效果

# 技术点解释

实现这个效果的是 HypsometricSetting 类。中文意思是地形的设置。通过动态设置地形各个高度的颜色，来模拟出淹没的效果。

新建一个 HypsometricSetting 对象 this.hyp = new manager.cesium.HypsometricSetting();
设置颜色表（一个含有高度和颜色的数据结构） this.hyp.ColorTable = this.colorTable;
设置洪水最大高度 this.hyp.MinVisibleValue= 100;
设置淹没分析中的范围 this.hyp.CoverageArea = positions;
然后将改实例对象设置赋值给当前的地球地形 manager.viewer.scene.globe.HypsometricSetting;
最后是通过 setInterval 动态修改this.hyp.MaxVisibleValue值即可
这是最基础的模拟效果，想要实现比较真实，复杂的效果，还有其他的参数进行设置。比如透明度 Opacity、等值线颜色 LineColor、等值线间隔 LineInterval 等。此外，还可以通过淹没算法自行绘制多边形，并通过修改 extrudedHeight 属性，达到更加科学的淹没分析。