cesium地图交互工具类

平时工作会用到，自己总结成一个简单的工具类。方便各位使用，可能不是很成熟 互相交流学习吧！！！

export default {
  infoDetail: [],
  handler: null,
  detailBox: {},
  /**
   *
   * 地图初始化和加载
   *
   */
  //地图初始化方法
  createMap(divId = '', token = '', type = '', url = '', lon, lat, height) {
    if (token) {
      Cesium.Ion.defaultAccessToken = token
    }
    let viewer = new Cesium.Viewer(divId, {
      //sceneMode: Cesium.SceneMode.SCENE2D, // 默认二维
      animation: false, // 动画小组件
      baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
      fullscreenButton: false, // 全屏组件
      vrButton: false, // VR模式
      geocoder: false, // 地理编码（搜索）组件
      homeButton: true, // 首页，点击之后将视图跳转到默认视角
      infoBox: false, // 信息框
      sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
      selectionIndicator: false, //是否显示选取指示器组件
      timeline: false, // 时间轴
      navigationHelpButton: false, // 帮助提示，如何操作数字地球。
      // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
      navigationInstructionsInitiallyVisible: false,
      sceneMode: 3, //1 2D场景、2 2D循环、3 3D场景（默认）
    })
    return viewer
  },
  //加载地图影像(不可用)
  addImageProvider(viewer = null, type = '', url = '', lon, lat, height) {
    if (viewer === null) {
    }
    if (type == 'xyz') {
      viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: url, //在各地区数据库中获取加载的地址
        })
      )
    } else if (type == 'superMap') {
      viewer.imageryLayers.addImageryProvider(
        new Cesium.SuperMapImageryProvider({
          url: url,
          minimumLevel: 1,
          maximumLevel: 18,
          transparent: false,
          tilingScheme: new Cesium.GeographicTilingScheme(), //设置4326 EPSG:4610
        })
      )
    } else if (type == 'WMS') {
      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapServiceImageryProvider({
          url: url, 
          layers: 'cite:new-wgs84',
          parameters: {
            FORMAT: 'image/png',
            transparent: true,
            exceptions: 'application/vnd.ogc.se_inimage',
          },
        })
      )
    }
    // viewer.scene.camera.setView({
    //   destination: Cesium.Cartesian3.fromDegrees(lon, lat, height),
    // })
    // viewer.scene.globe.depthTestAgainstTerrain = false
    // viewer.trackedEntity = undefined
    // viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
  },
  //实时经纬度
  realTimeLocation(viewer, longitudeId, latitudeId, altitudeId) {
    // let viewer = window.Viewer;
    var longitude_show = document.getElementById(longitudeId)
    var latitude_show = document.getElementById(latitudeId)
    var altitude_show = document.getElementById(altitudeId)
    var canvas = viewer.scene.canvas
    //具体事件的实现
    var ellipsoid = viewer.scene.globe.ellipsoid
    var handler = new Cesium.ScreenSpaceEventHandler(canvas)
    handler.setInputAction(function (movement) {
      //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
      var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid)
      if (cartesian) {
        //将笛卡尔三维坐标转为地图坐标（弧度）
        var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian)
        //将地图坐标（弧度）转为十进制的度数
        var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6)
        var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6)
        var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2)
        longitude_show.innerHTML = log_String
        latitude_show.innerHTML = lat_String
        altitude_show.innerHTML = alti_String
        let data = {
          lat: lat_String,
          lon: log_String,
          alti: alti_String + 'km',
        }
        return data
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
  },

  /**
   * 地图交互
   */
  //点击获取wgs84点位坐标
  clickWgs84Point(viewer) {
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
    handler.setInputAction((event) => {
      let point = windowToWgs84(viewer, event.position)
      return point
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.setInputAction((event) => {
      handler.destroy()
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
  },
  //创建点位
  createPoint(viewer, position, imgUrl, id = '', name = '', labelTest = '', data) {
    if (id == '' && name == '' && labelTest == '') {
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(parseFloat(position.lon), parseFloat(position.lat)),
        billboard: {
          image: require(imgUrl),
          scale: 0.5,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
      })
    } else {
      viewer.entities.add({
        id: id,
        name: labelTest,
        position: Cesium.Cartesian3.fromDegrees(position.lon, position.lat),
        billboard: {
          image: imgUrl,
          scale: 0.5,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
        label: {
          text: labelTest,
          show: true,
          showBackground: true,
          font: '14px monospace',
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(-35, -20), //left top
        },
      })
    }
  },
  
  //地图缩放
  tipToPoint(viewer,position) {
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(position.lon, position.lat, position.height),
    })
  },

  /**
   * 坐标系转换
   */
  // 3维笛卡尔转WGS84坐标
  cartesain3ToWGS84(viewer, cartesian3) {
    // 笛卡尔坐标转wgs84坐标x、y、z
    var ellipsoid = viewer.scene.globe.ellipsoid
    var xyz = new Cesium.Cartesian3(cartesian3.x, cartesian3.y, cartesian3.z)
    var wgs84 = ellipsoid.cartesianToCartographic(xyz)
    let position = {
      lon: Cesium.Math.toDegrees(wgs84.longitude),
      lat: Cesium.Math.toDegrees(wgs84.latitude),
    }
    console.log(
      '84坐标：',
      Cesium.Math.toDegrees(wgs84.longitude) + ', ' + Cesium.Math.toDegrees(wgs84.latitude) + ', ' + wgs84.height
    )
    return position
  },
}