Cesium开发总结

Cesium开发总结

参考文章：
Cesium API使用指南
使用的Cesium版本为超图的封装版本。

Cesium API各类之间的关系结构图：

viewer、DataSource、entity三者之间的关系：

Viewer ==> DataSourceDisplay ==> DataSourceCollection ==> CustomDataSource ==> EntityCollection ==> Entity

常见操作

1. 监听entity的点击事件

Viewer.selectedEntityChanged.addEventListener((entity) => {
    EventBus.$emit('initPopup',entity);
});

2. 监听屏幕点击事件

initScreenSpaceEventHandler() {
let self = this;
if (!handler || handler.isDestroyed()) {
  handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
  handler.setInputAction(function (movement) {
      let position = movement.position;
    let pick = Viewer.scene.pick(movement.position);
    if (Cesium.defined(pick) ) {
      let entityId = pick.id.id;
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  //右键点击取消事件
  handler.setInputAction((e) => {
    Viewer.scene.screenSpaceCameraController.enableZoom = true;
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
}

2. 直接加载entity到场景中

if (!Viewer.entities.getById(no)) {
Viewer.entities.add({
  position : Cesium.Cartesian3.fromDegrees(parseFloat(SMX),parseFloat(SMY),parseFloat(height)),
  billboard :{
    image : './static/img/marker/camera1.png',
    width:30,
    height:40,
  },
  name : no,
  id: no,
  description: properties
})
}

4. 加载自定义绘制广告牌的图片

let img = new Image();
let imgUrl = options.defaultImageIcon;
img.src = "xxxxxxxx.jpg";
img.crossOrigin = 'Anonymous';
img.data = datas[n];
img.onload = function () {
  // 创建canvas DOM元素，并设置其宽高和图片一样
  let canvas = document.createElement("canvas");
  canvas.width = 32;
  canvas.height = 32;
  // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
  canvas.getContext("2d").drawImage(img, 0, 0);
  //将canvas贴到场景中
  Viewer.entities.add({
      position : Cesium.Cartesian3.fromDegrees(parseFloat(SMX),parseFloat(SMY),parseFloat(height)),
      billboard :{
        image : canvas,
        width:30,
        height:40,
      },
      name : no,
      id: no,
      description: properties,
      /*
      //文字标签
      label: { 
          text: "文字标签文字标签文字标签",
          font: '500 30px Helvetica',// 15pt monospace
          scale: 0.5,
          style: Cesium.LabelStyle.FILL,
          fillColor: Cesium.Color.WHITE,
          pixelOffset: new Cesium.Cartesian2(0, -75), //偏移量
          showBackground: true,
          backgroundColor: new Cesium.Color(0.5, 0.6, 1, 1.0)
        },
      //撑杆线效果
      polyline : {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([parseFloat(SMX), parseFloat(SMY),1.102,parseFloat(SMX),parseFloat(SMY),height]),
      	  width: 2,
          material: new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.WHITE
      })
    }*/
    })
}

6. 加载Geojson到场景中

let DS = new Cesium.GeoJsonDataSource(bufferDatasourceName);
self.clearDatasourceByName(bufferDatasourceName);
Viewer.dataSources.add(DS);
DS.load(featureCollection, {
  clampToGround: cameraCfg.clampToGround
}).then((datasource) => {
  let entities = datasource.entities.values;
  entities.forEach(entity => {
    entity.polyline.clampToGround = cameraCfg.clampToGround;
    entity.polyline.material = new Cesium.PolylineGlowMaterialProperty({ //设置Glow材质
      glowPower: 0.1,
      color: color
    });
    entity.polyline.width = 20;
    Viewer.selectedEntity = entity;
  });
});

8. 将entity加载到一个指定的自定义DataSource

//创建entityCollection
let myEntityCollection = new Cesium.CustomDataSource("myEntityCollection");
viewer.dataSources.add(myEntityCollection);
myEntityCollection.entities.add(new Cesium.Entity(options));