Cesium引入SuperMap 倾斜摄影模型并自定义Marker(覆盖物)

欢迎加入前端交流群：749539640

简介

使用Cesium引入超图提供的倾斜摄影模型后，如何在模型中添加自定义图标呢？

• SurperMap官网示例
• Cesium官方Api
• Cartesian3

使用

预先准备好模拟数据(此数据可由后端返回)

• x 、y、 z坐标可以在下方的setInputAction方法中的回调拿到

markerList: [
    {
      x: -1889379.057952601, // 空间直角坐标系
      y: 5308413.248005506,
      z: 2989044.554219647,
      des: {
        name: '数字大楼',
        height: 300
      }
    },
    {
      x: -1889890.7571457538,
      y: 5308116.247449161,
      z: 2989189.6404864625,
      des: {
        name: '财务大楼',
        height: 100
      }
    }
]

添加自定义图标的方法：

// 添加自定义marker
createPoint(worldPosition, des) {
  this.viewer.entities.add({
    position: worldPosition,
    billboard: {
      image:
        'http://support.supermap.com.cn:8090/webgl/examples/webgl/images/location4.png',
      width: 25, // default: undefined
      height: 25
    },
    name: '建筑物信息', // 自带infoBox的title
    description: des || undefined // 自定义官方描述信息
  })
}

循环添加覆盖物(接口回调后的方法)

forMarker() {
  for (let index = 0; index < this.markerList.length; index++) {
    const element = this.markerList[index]
    var length = Object.keys(element.des).length
    var des
    for (var i = 0; i < length; i++) {
      var key = Object.keys(element.des)[i]
      var value = element.des[key]

      if (i === 0) {
        des =
          '<table class="cesium-infoBox-defaultTable"><tbody>' +
          '<tr><th>' +
          key +
          '</th><td>' +
          value +
          '</td></tr>'
      } else if (i === length - 1) {
        des +=
          '<tr><th>' +
          key +
          '</th><td>' +
          value +
          '</td></tr>' +
          '</tbody></table>'
      } else {
        des += '<tr><th>' + key + '</th><td>' + value + '</td></tr>'
      }
    }
    this.createPoint(element, des)
  }
}

添加完效果图：

自定义弹框

annotate(cartesian, lng, lat, height) {
  this.remove_primitives(this.viewer)

  this.annotations.add({
    position: cartesian,
    text:
      'Lon: ' +
      lng.toFixed(5) +
      '\u00B0' +
      '\nLat: ' +
      lat.toFixed(5) +
      '\u00B0' +
      '\nheight: ' +
      height.toFixed(2) +
      'm',
    showBackground: true,
    font: '14px monospace',
    horizontalOrigin: this.$Cesium.HorizontalOrigin.LEFT,
    verticalOrigin: this.$Cesium.VerticalOrigin.BOTTOM,
    disableDepthTestDistance: Number.POSITIVE_INFINITY
  })
}
// 移除信息提示框
remove_primitives(viewer) {
  if (this.annotations.length > 0) {
    this.viewer.scene.primitives.remove(this.annotations)
    this.annotations = this.viewer.scene.primitives.add(
      new this.$Cesium.LabelCollection()
    )
  }
}

添加覆盖物点击监听事件

setInputAction(viewer) {
  var that = this
  this.annotations = this.viewer.scene.primitives.add(
    new this.$Cesium.LabelCollection()
  )

  /* 在模型上创建点 */
  var handler = new this.$Cesium.ScreenSpaceEventHandler(
    this.viewer.canvas
  )

  // todo：拾取模型表面的位置
  handler.setInputAction(function(evt) {
    console.log('evt: ', evt)
    console.log('拾取模型表面的位置')
    var scene = that.viewer.scene
    var pickedObject = scene.pick(evt.position) // 判断是否拾取到模型
    var position = scene.pickPosition(evt.position)
    console.log('position: ', position)//这里可以拿到x y z坐标

    that.remove_primitives(that.viewer)

    if (scene.pickPositionSupported && that.$Cesium.defined(pickedObject)) {
      var cartesian = that.viewer.scene.pickPosition(evt.position)
      if (that.$Cesium.defined(cartesian)) {
        var cartographic = that.$Cesium.Cartographic.fromCartesian(
          cartesian
        ) // 根据笛卡尔坐标获取到弧度
        var lng = that.$Cesium.Math.toDegrees(cartographic.longitude) // 根据弧度获取到经度
        var lat = that.$Cesium.Math.toDegrees(cartographic.latitude) // 根据弧度获取到纬度
        var height = cartographic.height // 模型高度
        that.annotate(position, lng, lat, height)
      }
    }
  }, this.$Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

• 点击效果图