cesium基础使用分享

Posted 2021-09-13 码码码畜

html点位的实现

从2d地图转到cesium，对文档一顿输出后，发现cesium竟然没有html点位绘制的api，例如cesium的label只能绘制文字点位，billboard绘制图片点位，根本无法达到html字符串那种灵活性。

几经搜索后，发现大家都是css定位来模拟的，也就是创建一个div元素插入到页面，然后相对于cesium的canvas来进行相对定位，这里的核心就是将你的目标经纬度转换为css定位的位置。

但是上面还有一个致命的问题，那就是你的div元素是使用的css定位，当地图滑动后，你的css定位马上就露馅了，他是无法跟地图的经纬度实时矫正的。

上面的实时矫正操作就需要你来完成，也就是实时将经纬度转换为css定位单位（点位一多，性能可想而知）。

代码稍后补充。

飞到指定位置

这个操作比较常用，例如初始化定位到一个坐标点。
目前我主要用过下面列的api，
分别是
viewer.camera.flyTo

viewer.flyTo(target, options)

这个target有点强哦，支持很多目标物

Entity | Array.<Entity> | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | TimeDynamicPointCloud | Promise.<(Entity|Array.<Entity>|EntityCollection|DataSource|ImageryLayer|Cesium3DTileset|TimeDynamicPointCloud)>

清理Entity

geojson的数据转换

由于后台提供的是multipolygon数据，但是我这边只想绘制行政区的边界线，polygon数据会把面绘制出来（当然可以将面设为透明来达到线的效果，但是由于某种原因，还是需要绘制polyline），所以需要将其转换为polyline再来使用，在经过一番搜索后发现，turf这个库提供了转换方法，用起来也是相当简单，代码如下

const multiLineString = turf.polygonToLine(geojson);

点位聚合的方式

1. 将点位正常绘制到地图上（这里我使用的dataSource绘制）
2. 通过cesium配置开启聚合
3. 设置图标默认样式和非聚合样式

地图初始化加载完成事件

    const helper = new window.Cesium.EventHelper();
    helper.add(viewer.scene.globe.tileLoadProgressEvent, (number) => {
      if (number > 0) {
        return;
      }
      number是剩余瓦片的加载数量，当数量小于等于0时，可以判定地图初始化完成
      this.props.onLoaded();
    });

视距显示

通俗解释就是，一个元素，我可以控制它在一个高度范围中，是否可见，比如当前的观察高度是1000米，那么我如下配置后，这个元素，就不可见，当我把观察高度调整到999或者以下，就能看见了

      distanceDisplayCondition: new window.Cesium.DistanceDisplayCondition(
        1,
        999,
      )

事件绑定

点位聚合，初始化不生效

配置好聚合后，发现初始化时，图标没有聚合，需要缩放一下地图，触发聚合的clusterEvent事件回调，图标才会开始聚合，然后经过搜索，发现是因为初始化没有设置entity.billboard的宽高导致，也就是，如果你的图标用到了billboard，就需要为其设置width和height，否则初始化无法自动聚合

      // 指定默认图标
      dataSource.entities.values.forEach((entity) => {
        entity.billboard.image = icon;
        entity.billboard.width = 20;
        entity.billboard.height = 18;
      });