cesium备忘录

ie中cesium无法正常显示的问题

//根据ie中的报错选择一个就可以
if(!Uint8Array.prototype.slice){
	Uint8Array.prototype.slice = function(){
		return new Uint8Array(this).subarray(this.arguments);
	}
};

if (!String.prototype.startsWith) {
	String.prototype.startsWith = function(search, pos) {
		return this.substr(!pos||pos<0?0:+pos,search.length) === search
	}
}

如果不是上面的情况，更改cesium资源路径也可能解决这个问题

//在vue.config.js文件中更改cesium的路径，选择未打包的文件
let cesiumSource = './node_modules/cesium/Build/Cesium' 
let cesiumWorkers = '../Cesium/Workers' 

服务发布

//如果是地图服务，需要添加请求头
Access-Control-Allow-Headers：Content-Type, api_key, Authorization
Access-Control-Allow-Method:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin：*

//如果是三维模型服务，除请求头外，还需要添加mime类型，
//并在“请求筛选中”设置“允许二重转义”
.b3dm:application/octet-stream
.pnts:application/octet-stream

viewer配置

var localMap=new Cesium.UrlTemplateImageryProvider({
          // url: '3Dmap/baseMap/{z}/{x}/{y}.jpg'
          url:'http://10.198.12.183/ditu/World/{z}/{x}/{y}.jpg'//自己发布的服务地址
      })
var viewer = new Cesium.Viewer("gisContainer", {
        animation: false, //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        homeButton: false,
        timeline: false, //是否显示时间线控件aa
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //取消原生弹窗
        selectionIndicator: false, //关闭点击绿框
        imageryProvider:localMap,//添加世界地图
        //terrainProvider : terrainProvider//启用地形
        shouldAnimate: true,//启用动画
});
//去除logo
viewer.cesiumWidget.creditContainer.style.display = "none";
//相机的高度的最小值
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; 
viewer.scene.postProcessStages.fxaa.enabled = false;//抗锯齿
//显示三维简图时移除地球
viewer.scene.sun.show = false; //太阳和月亮，不关闭会影响展示
viewer.scene.moon.show = false;
viewer.scene.skyAtmosphere.show=false;//关闭大气层
viewer.scene.skyBox.show = false;//关闭天空盒，否则会显示天空颜色
viewer.scene.globe.show = false; //不显示地球

根据属性值设置样式

var simpleTileset = new Cesium.Cesium3DTileset({
  url: "simpleTileset/tileset.json",
  shadows:Cesium.ShadowMode.DISABLED,//去除阴影
});
simpleTileset.style = new Cesium.Cesium3DTileStyle({
	 color: {
	   conditions: [
	     ['${type} >= 1', "rgba(153,201,255,0.5)"],
	     ['${type} < 1', "rgba(0,95,204,0.5)"],
	     ['true', 'rgb(127, 59, 8)']
	   ]
	 }
});

小工具

切图使用：osg2cesiumApp、pcl2cesiumApp

几种坐标拾取方法及适用范围

var handlerFeature = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handlerFeature.setInputAction(function(click) {
        var latlon={lat:null,lng:null}
        //1、适用于需要加载地形后拾取经纬度和高度
		var ray=viewer.camera.getPickRay(click.position);
		var pRadians = viewer.scene.globe.pick(ray, viewer.scene);
		//2、适用于拾取模型表面或者椭球表面
		//拾取3dtiles模型表面时不许哟啊开启深度检测
		//拾取椭球面需要开启深度检测，否则坐标不准
		viewer.scene.globe.depthTestAgainstTerrain = true //深度检测
		var pRadians = viewer.scene.pickPosition(click.position);
		//将弧度坐标转换为Cartesian3世界空间直角坐标系坐标
		var cartographic = Cesium.Cartographic.fromCartesian(pRadians);
		latlon.lng = Cesium.Math.toDegrees(cartographic.longitude); //经度
		latlon.lat = Cesium.Math.toDegrees(cartographic.latitude); //纬度
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handlerFeature.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除事件    

通过canvas绘图实现iconfont图标

//第一种方法在，在ie中会有问题，报：SecurityError
var canvas = document.createElement('canvas');
canvas.width = 20;
canvas.height = 20;
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(【此处填写svg代码】);
image.onload = function() {

	canvas.getContext('2d').drawImage(image, 0, 0);
	//添加实体时，image属性填image.src、image、canvas均可
}
//第二种方法，可以实现在ie中使用
//不过需要安装插件canvg插件，安装方式如后图
var canvas = document.createElement('canvas');
canvas.width = 20;
canvas.height = 20;
var svgIconType= 【此处填svg代码】
canvas.getContext('2d').drawSvg(svgIconType, 0, 0,20,20);
var imageURL=canvas.toDataURL("image/png")
//添加实体时，image属性填imageURL

动态路线

  var timeStepInSeconds = 30
      //carflightData为路线的点位数组
      var totalSeconds = timeStepInSeconds * (carflightData.length - 1)
      var start = Cesium.JulianDate.fromIso8601('2020-03-09T23:10:00Z')
      var stop = Cesium.JulianDate.addSeconds(
        start,
        totalSeconds,
        new Cesium.JulianDate()
      )
      viewer.clock.startTime = start.clone()
      viewer.clock.stopTime = stop.clone()
      viewer.clock.currentTime = start.clone()
      // 加快播放速度50倍
      viewer.clock.multiplier = 50
      // 开始播放场景
      viewer.clock.shouldAnimate = true
      //循环播放
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP 
      // SampledPositionedProperty 存储沿雷达样本系列的每个样本的位置和时间戳
      positionProperty = new Cesium.SampledPositionProperty()
      
      for (let i = 0; i < carflightData.length; i++) {
        var dataPoint = carflightData[i]
        // 声明此单个样本的时间，并将其存储在新的JulianDate实例中
        var time = Cesium.JulianDate.addSeconds(
          start,
          i * timeStepInSeconds,
          new Cesium.JulianDate()
        )
        var position = Cesium.Cartesian3.fromDegrees(
          dataPoint.longitude,
          dataPoint.latitude,
          dataPoint.height
        )
        positionProperty.addSample(time, position)
      }
      // STEP 4 CODE (green circle entity)
      // 创建一个实体，以一条直线可视化整个雷达样本系列，并添加一个沿样本移动的点(绿色的点)。
      carEntity = viewer.entities.add({
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({ start: start, stop: stop }),
        ]),
        position: positionProperty,
        //point: { pixelSize: 30, color: Cesium.Color.GREEN },
        model: {
          uri: 'GroundVehicle.glb',
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          minimumPixelSize: 128,
          maximumScale: 15,
          color: Cesium.Color.RED,
          colorBlendAmount: 1, //材质混合方式
          scale: 5.0,
          runAnimations: true,
        },
        orientation: new Cesium.VelocityOrientationProperty(positionProperty),
        path: new Cesium.PathGraphics({
          material: Cesium.Color.GREEN,
          width: 3,
        }),
      })
      // 使相机跟踪此移动实体
      //viewer.trackedEntity = carEntity;

视频插件

//首先安装需要安装插件  VideoPlayer 
//main.js中配置
import VideoPlayer from 'vue-video-player' 
import 'vue-video-player/src/custom-theme.css' 
import 'video.js/dist/video-js. css' 
Vue.use(VideoPlayer) 
const hls = require('videojs-contrib-hls') 
Vue.use(hls) <video-player :src="centerDialogVisible.url" v-if="centerDialogVisible.show">< /视频播放器>

vue使用Cesium的插件提示Cesium is not defined

//这种情况是由于直接加载插件时可能还没有把Cesium传过来
//将使用到插件的vue组件按需加载即可解决这个问题
//在route中的index.js中使用  ()=>import('')  的形式
const cesiumPage=()=> import('../page/cesiumPage.vue')
const index =()=> import("../page/index.vue")
const leafletPage =()=> import('../page/leafletPage.vue')

获取当前相机姿态

// 获取 相机姿态信息
var head = viewer.scene.camera.heading
var pitch = viewer.scene.camera.pitch
var roll = viewer.scene.camera.roll
var info = { 'head': head, 'pitch': pitch, 'roll': roll }
console.log('head', info)
// 获取位置 wgs84的地心坐标系，x,y坐标值以弧度来表示
var position = viewer.scene.camera.positionCartographic // with longitude and latitude expressed in radians and height in meters.
// 以下方式也可以获取相机位置只是返回的坐标系不一样
// var position = viewer.scene.camera.position //cartesian3 空间直角坐标系
// var ellipsoid = scene.globe.ellipsoid;
// var position =ellipsoid.cartesianToCartographic(viewer.scene.camera.position)//
// 弧度转经纬度
var longitude = Cesium.Math.toDegrees(position.longitude).toFixed(6)
var latitude = Cesium.Math.toDegrees(position.latitude).toFixed(6)
var height = position.height
console.log('lat：', { lng: longitude, lat: latitude, h: height, mat: info })

绘制热力图

cesiumHeatmap.js 下载地址

// 绘制热力图
import Heatmap from "@/utils/CesiumHeatmap.js"
// data - 数据数组，结构应为 [{lat:32,lng:112,value:5}]
// z - 用来绘制热力图的数值字段
// radius - 绘制半径
initHeatMap(data, z = 'count', radius = 2) {
    if (data.length < 3) {
        this.$message({
            type: "warning",
            message: "热力图点位不得少于3个！",
        });
        return
    }
    data = data.map(res => {
        return { ...res, value: res[z] }
    })
    // init heatmap
    let heatMap = new Heatmap(viewer, {
        list: data,
        raduis: radius
    })
    console.log('heatMap', heatMap)
    return heatMap
}