cesium基础使用分享

码码码畜

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;
      });
阅读 1.1k

2.9k 声望
33 粉丝
0 条评论
你知道吗?

2.9k 声望
33 粉丝
文章目录
宣传栏