Cesium高级技巧一

标签： Cesium 分类： Gis 创建时间：2020-10-24 02:48:50 更新时间：2024-12-03 13:01:36

1.泛光特效

通过参考文章4,我陆续找到了各种特效的展示方式。

参考文章：
1.[cesium]基于cesium城市效果示例 (这是一个个人博客，感觉写的很好，至少比我好多了)
2.动态线效果 (这是一个城市动态线的效果，还包括了好多的其他的动态效果)
3.三维功能、超图相关、数据可视化(集成开源插件) (等等各种三维特效的显示)
4.[cesium] 基于Cesium的动态泛光效果示例 (我从这篇文章开始，发现了博主真的是一个三维的高手啊，从此发现了上面的各个效果和示例)
5.cesium着色器学习系列7- PostProcessStage渲染 后处理，以圆形扩散为例
6.cesium实现线圈发光效果

2.粒子系统

参考文章:
1.Cesium雨雪雾天气效果 主要使用的是着色器实现的

3.行政区拉伸

这个效果其实就是说把行政区抬升，比周围高的效果。

参考文章:
1.Cesium实现更实用的3D描边效果(附源码)
2.展示城市行政区划信息 数据转换：1.在线转换（个人推荐）:https://mapshaper.org/;2.工具软件转换:QGIS 等专业GIS软件;3.编码实现:使用 geotools 等开发库。
3.Cesium之3D拉伸显示行政区

4.mvt

cesium加载pbf数据，读取并通过mapbox-streets-v6-style.js进行数据可视化的渲染

参考文章:
1.使用cesium读取mapbox vector tile矢量数据并进行渲染

5.反转遮罩

这里的主要需求可以描述为，显示一个行政区，行政区外的内容都是较暗的，只有行政区内的地图是清晰的。主要方案就是使用带洞多边形的形式实现的，这里我用了阿里云的范围线进行了一个挖洞处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// 区域掩膜
function addMasker (viewer) {
  console.log("dd")
  let point = []
  axios.get("https://geo.datav.aliyun.com/areas_v3/bound/330110.json")
    .then(function (res) {
      const geojson = res.data
      // handle success
      for (let i = 0; i < geojson.features[0].geometry.coordinates[0][0].length; i++) {
        point = point.concat(geojson.features[0].geometry.coordinates[0][0][i])
      }
      // 地球需要高亮突出的边界坐标
      const hole = Mars3DCesium.Cartesian3.fromDegreesArray(point)

      // 新建dataSources
      const dataSource = new Mars3DCesium.CustomDataSource("inverseShade")
      viewer.dataSources.add(dataSource)
      // dataSource.entities.add({
      //   polygon: {
      //     hierarchy: {
      //       // 左下左上右上右下
      //       positions: Mars3DCesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 150, 89, 150, 0]),
      //       holes: []
      //     },
      //     // 填充的颜色，withAlpha透明度
      //     material: Mars3DCesium.Color.BLACK.withAlpha(1),
      //     // 是否被提供的材质填充
      //     fill: true,
      //     // 是否显示
      //     show: true,
      //     // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
      //     zIndex: 10,
      //     // 贴地属性
      //     classificationType: Mars3DCesium.ClassificationType.TERRAIN
      //   }
      // })
      dataSource.entities.add({
        polygon: {
          // 获取指定属性（positions，holes（图形内需要挖空的区域））
          hierarchy: {
            // 左下左上右上右下
            // 比较合理的 可能是 Mars3DCesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 150, 89, 150, 0]),
            positions: Mars3DCesium.Cartesian3.fromDegreesArray([0, 60, 0, -60, 180, -60, 150, 0]),
            holes: [{ 
              positions: hole,
              holes: []
            }]
          },
          // 填充的颜色，withAlpha透明度
          material: Mars3DCesium.Color.BLACK.withAlpha(0.4),
          // 是否被提供的材质填充
          fill: true,
          // 是否显示
          show: true,
          // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
          zIndex: 10,
          // 贴地属性
          classificationType: Mars3DCesium.ClassificationType.TERRAIN
        }
      })
      // dataSource.entities.add({
      //   polyline: {
      //     positions: hole,
      //     width: 5,
      //     material: Mars3DCesium.Color.AQUA.withAlpha(1),
      //     clampToGround: true,
      //     // 贴地属性
      //     classificationType: Mars3DCesium.ClassificationType.TERRAIN
      //   }
      // })
    })  
}

但是这种方案也还是存在问题:就是当你遮罩层的覆盖范围过大，或者是不合理的时候，就会出现遮罩层问题,比如覆盖不全，或者是出现空白地方。

参考文章:
1.Cesium实现地图反选遮罩 这里也是使用了 Cesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 150, 89, 150, 0,]) 这个范围。
2.Cesium地图反遮罩 这个是主要的参考文章，上面的代码就是，它这里的代码主要就是 x,y,z 的形式进行的。
3.cesium点线面贴地 使用的是点线面的 classificationType: ClassificationType.TERRAIN 属性。
4.cesium设置entity实体贴地 billboard的设置，heightReference: Cesium.HeightReference.CLAMP_TO_GROUND //设置HeightReference高度参考类型为CLAMP_TO_GROUND贴地类型
5.Cesium实现全球遮罩 这里使用了一个word.json数据进行了全球的图层绘制，使用到了 clampToGround: true 贴地属性，还有 classificationType 属性
6.cesium绘制反选遮罩层 Cesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 150, 89, 150, 0]) 绘制的区域太大容易卡顿

6.后期处理

参考文章:
1.Cesium开发高级篇 | 05场景后期处理 这篇文章的后期处理说的比较详细，基本上看完一遍之后，就有一个大概的样子了。
2.Cesium源码剖析—Post Processing之物体描边（Silhouette）

7.显示网格

参考文章:
1. cesium控制及效果(一)：显示瓦片编号和网格
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.泛光特效
  2. 2. 2.粒子系统
  3. 3. 3.行政区拉伸
  4. 4. 4.mvt
  5. 5. 5.反转遮罩
  6. 6. 6.后期处理
  7. 7. 7.显示网格
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文