Cesium加载各类数据合集

3 阅读5分钟

加载天地图

 let viewer = mapView.map
    let webKey = '天地图token,官网申请'
    viewer.imageryLayers.addImageryProvider(
      new Cesium.WebMapTileServiceImageryProvider({
        url:
          'http://t1.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' +
          webKey,
        layer: 'tdtBasicLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible',
        show: false
      })
    )
    viewer.imageryLayers.addImageryProvider(
      new Cesium.WebMapTileServiceImageryProvider({
        url:
          'http://t1.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
          webKey,
        layer: 'tdtAnnoLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible',
        show: false
      })

加载星图地球

const token = '星图地球token'
    let imageryProvider = new Cesium.UrlTemplateImageryProvider({
      url: "https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=" + token,
      subdomains: "123"
    });
    let textProvider = new Cesium.UrlTemplateImageryProvider({
      url: "https://tiles1.geovisearth.com/base/v1/cia/{z}/{x}/{y}?format=png&tmsIds=w&token=" + token,
      subdomains: "123"
    });
    viewer.imageryLayers.addImageryProvider(imageryProvider);
    viewer.imageryLayers.addImageryProvider(textProvider);

加载和卸载wms服务

const baseState = useBaseState()
    const GEOSERVERURL = baseURL + '/geoserver/yh/wms'
    mapView.map.imageryLayers.addImageryProvider(
      new Cesium.WebMapServiceImageryProvider({
        url: GEOSERVERURL,
        layers: layerName,
        enablePickFeatures: false,
        parameters: {
          transparent: true, //是否透明
          format: 'image/png',
          srs: 'EPSG:4326',
          styles: '',
          service: 'WMS'
        },
        minimumLevel: 5,
        maximumLevel: 17
      })
    )
    
    **加载3857墨卡托坐标系wms服务**
     const GEOSERVERURL = '/geoserver/img/wms'
        let smart = mapView.map.imageryLayers.addImageryProvider(
          new Cesium.WebMapServiceImageryProvider({
            url: GEOSERVERURL,
            layers: 'img:yh-base',
            parameters: {
              service: 'WMS',
              version: '1.3.0',
              format: 'image/png',
              transparent: true,
              srs: 'EPSG:3857' // 关键:指定坐标系
            }
          })
        )

**卸载wms服务**
const layers = mapView.map.imageryLayers._layers
    for (const key in layers) {
      if (Object.hasOwnProperty.call(layers, key)) {
        const data = layers[key]
        if (layerName == data?._imageryProvider.layers) {
          mapView.map.imageryLayers.remove(data)
        }
      }
    }

加载glb文件(带label)

viewer.entities.add({
        id: setSession(),
        position: position,
        model: {
          uri: './Cesium/models/xx.glb',
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          disableDepthTestDistance: 99000000,
          shadows: Cesium.ShadowMode.CAST_ONLY,
          color: Cesium.Color.WHITE,
          colorBlendMode: Cesium.ColorBlendMode.MIX,
          minimumPixelSize: 28,
          colorBlendAmount: 0.15,
          scale: 10
        },
        label: {
          text: 'drill' + Math.random(100),
          showBackground: true,
          scale: 0.5,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          disableDepthTestDistance: 99000000,
          scaleByDistance: new Cesium.NearFarScalar(300, 1, 1000, 0.6)
        }
      })

加载polygon

    const dataSource = new Cesium.CustomDataSource('blasting')
    viewer.dataSources.add(dataSource)
    this.blastingCollection = dataSource.entities
     const centerHeight =
     this.viewer.scene.sampleHeight(new Cesium.Cartographic(Cesium.Math.toRadians(hole.point[0]), Cesium.Math.toRadians(hole.point[1])))
     this.blastingCollection.add({
      id: mapTask.data.task_id + '.task-warning',
      position: Cesium.Cartesian3.fromDegrees(center.geometry.coordinates[0], center.geometry.coordinates[1], centerHeight),
      polygon: {
        hierarchy: dynamicPositions,
        material: Cesium.Color.RED.withAlpha(0.2),
        classificationType: Cesium.ClassificationType.CESIUM_3D_TILE
      },
      properties: { type: 'blasting-warning', data: {distance:distance,endMill:endMill} }
    })

加载圆孔和文字

this.holeLabelCollection = this.viewer.scene.primitives.add(new Cesium.LabelCollection())
this.blastingCollection.add({
      position: Cesium.Cartesian3.fromDegrees(hole.point[0], hole.point[1], height),
      ellipse: {
        semiMajorAxis: 1.5,
        semiMinorAxis: 1.5,
        material: color
      }
    })
    this.holeLabelCollection.add({
      position: Cesium.Cartesian3.fromDegrees(hole.point[0], hole.point[1], height),
      text: hole.label,
      font: 'bold 12px 微软雅黑',
      fillColor: Cesium.Color.WHITE,
      eyeOffset: new Cesium.Cartesian3(-0.8, 1, 0)
    })

移除entity

//移除单个,通过循环
if(this.blastingCollection&&this.blastingCollection._entities.length>0){
        const index = this.blastingCollection._entities._array.findIndex((item)=>item.id==mapTask.data.task_id + '.task-warning')
        this.blastingCollection.remove(this.blastingCollection._entities._array[index])
    }
    
    //移除全部
    this.blastingCollection.removeAll()
    this.holeLabelCollection.removeAll()

加载三维3dtiles数据

async load3dtiles(data, callback) {
    //this.map.terrainProvider = Cesium.createWorldTerrain();
    this.modelURL = data.modelUrl
    this.modelHeight = data.modelHeight
    let isLocate = false
    isLocate = data?.isLocate
    //判断是否已经加载了3dtiles数据
    let containsUrl = this.map.scene.primitives._primitives.some((obj) => Object.prototype.hasOwnProperty.call(obj, '_url') && obj['_url'] === this.modelURL)
    if (containsUrl) {
      for (let index in this.map.scene.primitives._primitives) {
        if (Object.prototype.hasOwnProperty.call(this.map.scene.primitives._primitives[index], '_url') && this.map.scene.primitives._primitives[index]._url == this.modelURL) {
          this.map.scene.primitives._primitives[index].show = true
          break
        }
      }
    } else {
      let palaceTileset1 = await Cesium.Cesium3DTileset.fromUrl(this.modelURL, {
        url: this.modelURL,
        //modelMatrix: Cesium.Matrix4.fromArray([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),
        maximumMemoryUsage: 1024 * 1.5, //不可设置太高,目标机子空闲内存值以内,防止浏览器过于卡
        backFaceCulling: true,
        maximumScreenSpaceError: 64, //用于驱动细节错误;较高的值可提供更好的性能,但视觉质量较低。
        maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
        shadows: Cesium.ShadowMode.DISABLED, //是否显示阴影
        skipLevelOfDetail: true, // 确定是否应在遍历期间应用详细级别跳过(默认false)
        baseScreenSpaceError: 1024, //When skipLevelOfDetailis true,在跳过详细级别之前必须达到的屏幕空间错误(默认1024)
        skipScreenSpaceErrorFactor: 16, // 定义要跳过的最小屏幕空间错误的乘数。与 一起使用skipLevels来确定要加载哪些图块(默认16)
        skipLevels: 1, //skipLevelOfDetail是true 一个常量,定义了加载图块时要跳过的最小级别数。为 0 时,不跳过任何级别。与 一起使用skipScreenSpaceErrorFactor来确定要加载哪些图块。(默认1)
        immediatelyLoadDesiredLevelOfDetail: false, //当skipLevelOfDetail是时true,只会下载满足最大屏幕空间错误的图块。忽略跳过因素,只加载所需的图块(默认false)
        loadSiblings: true, // 如果为true则不会在已加载完概况房屋后,自动从中心开始超清化房屋 --- 何时确定在遍历期间skipLevelOfDetail是否true始终下载可见瓦片的兄弟姐妹(默认false)
        cullWithChildrenBounds: true, //是否使用子边界体积的并集来剔除瓦片(默认true)
        luminanceAtZenith: 0.2,
        dynamicScreenSpaceError: true, //减少距离相机较远的图块的屏幕空间错误(默认false)
        dynamicScreenSpaceErrorDensity: 0.0278, //数值加大,能让周边加载变快 --- 用于调整动态屏幕空间误差的密度,类似于雾密度(默认0.00278)
        dynamicScreenSpaceErrorFactor: 8, // 用于增加计算的动态屏幕空间误差的因素(默认4.0)
        dynamicScreenSpaceErrorHeightFalloff: 0.5, //密度开始下降的瓦片集高度的比率(默认0.25)
        preloadWhenHidden: true,
        show: true,
        classificationType: Cesium.ClassificationType.NONE,
        enableShowOutline: false,
        cullRequestsWhileMoving: true,
        cullRequestsWhileMovingMultiplier: 10,
        preferLeaves: true,
        progressiveResolutionHeightFraction: 0.5
      })
      if (this.modelHeight != 0 && this.modelHeight != undefined) {
        changeHeight(palaceTileset1, this.modelHeight)
      }
      this.map.scene.primitives.add(palaceTileset1)
      if (isLocate) {
        this.map.flyTo(palaceTileset1)
      }
      if (callback && typeof callback == 'function') callback()
    }
  }
  
  //之前的加载语法
  load3dtiles(data) {
    //this.map.terrainProvider = Cesium.createWorldTerrain();
    this.modelURL = data.modelUrl
    this.modelHeight = data.modelHeight
    let containsUrl = this.map.scene.primitives._primitives.some((obj) => obj.hasOwnProperty('_url') && obj['_url'] === this.modelURL)
    if (containsUrl) {
      for (let index in this.map.scene.primitives._primitives) {
        if (this.map.scene.primitives._primitives[index].hasOwnProperty('_url') && this.map.scene.primitives._primitives[index]._url == this.modelURL) {
          this.map.scene.primitives._primitives[index].show = true
          break
        }
      }
    } else {
      let palaceTileset = new Cesium.Cesium3DTileset({
        url: this.modelURL,
        //modelMatrix: Cesium.Matrix4.fromArray([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),
        maximumMemoryUsage: 1024, //不可设置太高,目标机子空闲内存值以内,防止浏览器过于卡
        backFaceCulling: true,
        maximumScreenSpaceError: 2, //用于驱动细节错误;较高的值可提供更好的性能,但视觉质量较低。
        maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
        shadows: Cesium.ShadowMode.DISABLED, //是否显示阴影
        skipLevelOfDetail: true, // 确定是否应在遍历期间应用详细级别跳过(默认false)
        baseScreenSpaceError: 1024, //When skipLevelOfDetailis true,在跳过详细级别之前必须达到的屏幕空间错误(默认1024)
        skipScreenSpaceErrorFactor: 16, // 定义要跳过的最小屏幕空间错误的乘数。与 一起使用skipLevels来确定要加载哪些图块(默认16)
        skipLevels: 1, //skipLevelOfDetail是true 一个常量,定义了加载图块时要跳过的最小级别数。为 0 时,不跳过任何级别。与 一起使用skipScreenSpaceErrorFactor来确定要加载哪些图块。(默认1)
        immediatelyLoadDesiredLevelOfDetail: false, //当skipLevelOfDetail是时true,只会下载满足最大屏幕空间错误的图块。忽略跳过因素,只加载所需的图块(默认false)
        loadSiblings: true, // 如果为true则不会在已加载完概况房屋后,自动从中心开始超清化房屋 --- 何时确定在遍历期间skipLevelOfDetail是否true始终下载可见瓦片的兄弟姐妹(默认false)
        cullWithChildrenBounds: true, //是否使用子边界体积的并集来剔除瓦片(默认true)
        luminanceAtZenith: 0.2,
        dynamicScreenSpaceError: false, //减少距离相机较远的图块的屏幕空间错误(默认false)
        dynamicScreenSpaceErrorDensity: 8, //数值加大,能让周边加载变快 --- 用于调整动态屏幕空间误差的密度,类似于雾密度(默认0.00278)
        dynamicScreenSpaceErrorFactor: 4.0, // 用于增加计算的动态屏幕空间误差的因素(默认4.0)
        dynamicScreenSpaceErrorHeightFalloff: 0.25, //密度开始下降的瓦片集高度的比率(默认0.25)
        preloadWhenHidden: true,
        show: true,
        classificationType: Cesium.ClassificationType.NONE
      })
      //var codecs = new Cesium.ThreeDTilesCodecs();
      palaceTileset.readyPromise.then((palaceTileset1) => {
        //this.map.scene.primitives.add(palaceTileset1)
        //this.map.scene.primitives._primitives.push(palaceTileset1);
        //this.map.scene.primitives._primitives.splice(0,0,palaceTileset1);
        //debugger
        if (this.modelHeight != 0 && this.modelHeight != undefined) {
          changeHeight(palaceTileset1, this.modelHeight)
        }
        this.map.scene.primitives.add(palaceTileset1)
        //this.map.flyTo(palaceTileset1)
      })
    }
  }