• 
  
• 支持叠加地形图层、3DTiles图层、数据图层
  
• 支持多种方式分发图层数据
  

• 
  
• 鼠标移动时，使用屏幕事件处理器监听事件，获取当前屏幕坐标
  
• 如果已经有高亮的元素，将其恢复为正常状态
  
• 以当前屏幕坐标为起点发送射线，获取射线命中的元素，如果有命中的元素就高亮它
  
• 鼠标点击时使用屏幕事件处理器获取命中元素，如果命中了，就判断元素是否描边状态，有则取消描边，没有则增加描边轮廓
  

• 
  
• 模型与其他图层元素一样，可以被光标拾取
  
• 模型支持播放自带动画
  

// 方法1: 加载本地地形图层
async function initTerrainLayer() {
const tileset = await Cesium.CesiumTerrainProvider.fromUrl(
'http://localhost:9003/terrain/c8Wcm59W/',

    {
requestWaterMask: true,
requestVertexNormals: false

    }

  )

  viewer.terrainProvider = tileset

}

// 方法2: 加载Ion地形图层
async function initTerrainLayer() {
const tileset = await Cesium.CesiumTerrainProvider.fromIonAssetId(1,{
requestVertexNormals: true

    }

  )

  viewer.terrainProvider = tileset

}

const tileset = await Cesium.Cesium3DTileset.fromUrl(
'http://localhost:9003/model/tHuVnsJXZ/tileset.json',

  {}

)
// 将图层加入到场景

viewer.scene.primitives.add(tileset)

// 适当调整图层位置
const translation = getTransformMatrix(tileset, { x: 0, y: 0, z: 86 })

tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)

// 获取变化矩阵
function getTransformMatrix (tileset, { x, y, z }) {
// 高度偏差，正数为向上偏，负数为向下偏，根据真实的模型位置不断进行调整
const heightOffset = z
// 计算tileset的绑定范围
const boundingSphere = tileset.boundingSphere
// 计算中心点位置
const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
// 计算中心点位置坐标
const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, 

cartographic.latitude, 0)
// 偏移后的三维坐标
const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude + x, 

cartographic.latitude + y, heightOffset)

return Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())

}

// 缓存高亮状态
const highlighted = {
feature: undefined,
originalColor: new Cesium.Color()

}

// 鼠标与物体交互事件
function initMouseInteract () {
// 事件处理器
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

// 鼠标悬浮选中

  handler.setInputAction((event) => {
// 将原有高亮对象恢复
if (Cesium.defined(highlighted.feature)) {

      highlighted.feature.color = highlighted.originalColor

      highlighted.feature = undefined

    }
// 获取选中对象
const pickedFeature = viewer.scene.pick(event.endPosition)

if (Cesium.defined(pickedFeature)) {
// 高亮选中对象
if (pickedFeature !== moveSelected.feature) {

        highlighted.feature = pickedFeature
Cesium.Color.clone(pickedFeature.color, highlighted.originalColor)

        pickedFeature.color = Cesium.Color.YELLOW

      }

    }

  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

// 缓存后期效果
let edgeEffect = null

function initMouseInteract(){
// 鼠标点击选中

  handler.setInputAction((event) => {

// 获取选中对象
const pickedFeature = viewer.scene.pick(event.position)

if (!Cesium.defined(pickedFeature)) {
return null

    } else {

// 描边效果：兼容GLTF和3DTiles
setEdgeEffect(pickedFeature.primitive || pickedFeature)

// 如果拾取的要素包含属性信息，则打印出来
if (Cesium.defined(pickedFeature.getPropertyIds)) {
const propertyNames = pickedFeature.getPropertyIds()
const props = propertyNames.map(key => {
return {
name: key,
value: pickedFeature.getProperty(key)

          }

        })
console.info(props)

      }

    }

  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

}

// 选中描边
function setEdgeEffect (feature) {
if (edgeEffect == null) {
// 后期效果
const postProcessStages = viewer.scene.postProcessStages

// 增加轮廓线
const stage = Cesium.PostProcessStageLibrary.createEdgeDetectionStage()

    stage.uniforms.color = Cesium.Color.LIME //描边颜色

    stage.uniforms.length = 0.05 // 产生描边的阀值

    stage.selected = [] // 用于放置对元素

// 将描边效果放到场景后期效果中
const silhouette = Cesium.PostProcessStageLibrary.createSilhouetteStage([stage])

    postProcessStages.add(silhouette)


    edgeEffect = stage

  }

// 选多个元素进行描边
const matchIndex = edgeEffect.selected.findIndex(v => v._batchId === feature._batchId)
if (matchIndex > -1) {

     edgeEffect.selected.splice(matchIndex, 1)

   } else {

     edgeEffect.selected.push(feature)

   }


}

// 加载模型
async function loadGLTF () {

let animations = null

let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(lng,lat,altitude)

	)

const model = await Cesium.Model.fromGltfAsync({
url: './static/gltf/windmill.glb',
modelMatrix: modelMatrix,
scale: 30,
// minimumPixelSize: 128, // 设定模型最小显示尺寸
gltfCallback: (gltf) => {

	    animations = gltf.animations

	  }

	})


  model.readyEvent.addEventListener(() => {
const ani = model.activeAnimations.add({
index: animations.length - 1, // 播放第几个动画
loop: Cesium.ModelAnimationLoop.REPEAT, //循环播放
multiplier: 1.0 //播放速度

    })

    ani.start.addEventListener(function (model, animation) {
console.log(`动画开始: ${animation.name}`)

    })

  })


  viewer.scene.primitives.add(model)

}