cesium 导入倾斜摄影数据并实现点击效果

1.导入倾斜摄影数据
首先倾斜摄影导出osgb文件，然后用3dtiles工具转换为cesium能用的3dtiles文件，转换工具是GitHub上别的大大提供的，连接为：3dtiles转换工具
cesium加载代码为：

var tileset =  new Cesium.Cesium3DTileset({
    
    
    url: "../out/tileset.json",
    show:true
  });

加载后经纬度坐标正确，高度一般不正确，需要调整，可参考官网示例中的模型高度调整代码调整到合适高度：官网示例链接
调整好后记录下要用的高度，稍微修改去掉高度调整框，修改高度为默认值即可。

2.创建实体
实体是cesium中很重要的东西，其属性包括id（唯一标示符）、name、availability、show（是否显示）、description（描述，类似详情）、position、orientation、viewFrom、parent等基础属性和对象属性label（文字）、billboard （图片）、point、box、mode（模型）和其他图形（很多，详见文档）。对象属性又有自己的属性,包括颜色，大小，偏移等，还有些对象自己特定属性。
如下写了一个创建实体的函数并调用，实体中包含必要的基础属性，并载入一个glb格式模型。

function sCreateModel(modelUrl,height){
    
    
  //移除全部实体，可根据情况移除特定实体
  viewer.entities.removeAll();
  //模型位置
  var position=Cesium.Cartesian3.fromDegrees(
    120.80020,
    32.067639,
    height
  );
  //模型旋转角度
  var heading=Cesium.Math.toRadians(45);
  var pitch=0;
  var roll=0;
  var hpr=new Cesium.HeadingPitchRoll(heading,pitch,roll);
  //模型朝向：位置+旋转
  var orientation=Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  );
  //添加模型实体
  var entity=viewer.entities.add({
    
    
    name:"模型名字",
    id:"id",
    position:position,
    orientation:orientation,
    model:{
    
    
      uri:sPath,
      minimumPixelSize:128,
      maximumScale:20000
    }
  });
  //场景默认相机跟踪实体
viewer.trackedEntity=entity;
}
//调用创建模型
//常用模型格式都支持，如.fbx,.obj等
sCreateModel( "../Apps/SampleData/models/CesiumAir/Cesium_Air.glb",
        5000.0);

对象的属性很多，可使用时看文档，下面写了一个椭圆的属性

viewer.entities.add({
    
    
    position:Cesium.Cartesian3.fromDegrees(103.0, 40.0),
    name:'Red ellipse on surface with outline',
    ellipse:{
    
    
        semiMinorAxis:300000.0,
        semiMajorAxis:300000.0,
        height:200000.0,
        fill:true,
        //半透明颜色
        //material:Cesium.Color.RED.withAlpha(0.5),
        //用图片填充
        material:"./sampledata/images/globe.jpg",
        outline:true, //必须设置height，否则ouline无法显示
        outlineColor:Cesium.Color.BLUE.withAlpha(0.5),
        outlineWidth:10.0//不能设置，固定为1
    }
});

添加一个实体时，可添加种个对象属性，比如又有文字又有图片

var imgData={
    
    
	"code":"007",
	"text":"1号灯",
	"position":{
    
    "long":120.800206,"lat":32.067639,"height":10},
}
function addImgLabel(imgData){
    
    
  viewer.entities.add( {
    
    
  name : "图标显示",
  id:imgData.id,
  position : Cesium.Cartesian3.fromDegrees( imgData.position.long,
  imgData.position.lat,
  imgData.position.height ),
  label : {
    
     //文字标签
    showBackground:true,
    backgroundColor :new Cesium.Color(1.0, 1.0, 1.0, 1),//Cesium.Color.WHITE,
      text : imgData.text,
      font : '13pt monospace',
      fillColor:Cesium.Color.GREEN,
      style : Cesium.LabelStyle.FILL,
      outlineWidth : 2,
      verticalOrigin : Cesium.VerticalOrigin.CENTER, //垂直方向以底部来计算标签的位置
      pixelOffset : new Cesium.Cartesian2( 0, -30 )   //偏移量
  },
  billboard : {
    
     //图标
      image  : '../sglImgs/'+tType+'.png',
      width : 30,
      height : 30
  }
} ); 
}

大致显示效果
viewer.entities属性实际上是一个EntityCollecton对象，是entity的一个集合，提供了add、remove、removeAll等等接口来管理场景中的entity。
如上面用到的添加，删除等可管理实体对象，具体看文档。

3.实体点击实现
我们经常需要点击某对象，做一些事情，cesium为我们用scene.pick接口来实现。下面代码实现创建了一个实体，当点击该实体时弹框显示name属性。

//创建一个实体
var entity= viewer.entities.add({
    
    
    position:Cesium.Cartesian3.fromDegrees(103.0, 40.0),
    name:'名字',
    ellipse:{
    
    
        semiMinorAxis:300000.0,
        semiMajorAxis:300000.0,
        height:200000.0,
        fill:true,
        //半透明颜色
        //material:Cesium.Color.RED.withAlpha(0.5),
        //用图片填充
        material:"./sampledata/images/globe.jpg",
        outline:true, //必须设置height，否则ouline无法显示
        outlineColor:Cesium.Color.BLUE.withAlpha(0.5),
        outlineWidth:10.0//不能设置，固定为1
    }
});
//视角切换到观察实体位置
viewer.zoomTo(entity);
//鼠标左击事件
 varhandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function(movement) {
    
    
            var pick = viewer.scene.pick(movement.position);
           //if(Cesium.defined(pick)){
    
    
            if(pick)) {
    
    
            	//弹框显示name属性值
                alert(pick.id.name');
            }
        },Cesium.ScreenSpaceEventType.LEFT_CLICK);

该代码，运行后点击，弹框显示name属性值，即为“名字”；

4.修改默认地图层
需要在官网创建账户，先获取了该图层数据（默认使用必应地图）

// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({
    
     assetId : 3954 }));

5.添加地形数据
让地图有起伏山脉显示

// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
    
    
    requestWaterMask : true, // required for water effects
    requestVertexNormals : true // required for terrain lighting
});
// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

6.激活太阳光照
地球会出现实时的黑夜白天显示

// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;