CesiumJs学习笔记1

最新推荐文章于 2024-05-28 14:48:46 发布

alshat

最新推荐文章于 2024-05-28 14:48:46 发布

阅读量208

点赞数

分类专栏： cesium 文章标签：学习笔记

本文链接：https://blog.csdn.net/nihuanfygyuhj/article/details/130641461

版权

cesium 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

此为课程 Three.js可视化企业实战WEBGL课的CesiumJs篇学习笔记

1. vue3 安装使用CesiumJs

在 npm install cesium 之后,
复制node_modules - cesium - Build - Cesium下面的文件
Assets
ThirdParty
Widgets
Workers
复制到public下面的cesium下面。
同时复制Widgets复制到src目录下一份
App.vue 代码初始化

<template>
  <div class="cesiumBody" id="cesiumBody" ref="cesiumBody">
  </div>
</template>

<script setup>
import * as Cesium from 'cesium'
import "./Widgets/widgets.css";
import {onMounted} from "vue";
// 设置cesium的静态资源路径
window.CESIUM_BASE_URL = '/'
onMounted(() => {
  var viewer = new Cesium.Viewer('cesiumBody')
})
</script>
<style lang="scss" scoped>
.cesiumBody {
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>

2. CesiumJs 如何使用自己的token

当我们成功安装运行cesium后，在页面底部会有一个提示：
在这里插入图片描述

在cesium官网注册登陆后, 进入页面

点击 Access Tokens 复制右边的 Default Token 下方的 Token
右边的 Regenerate 按钮用来重新生成 token
代码中, 通过 Cesium.Ion.defaultAccessToken 设置token

// 设置cesium token
Cesium.Ion.defaultAccessToken = '你的token'

3. 隐藏各种按钮和logo

logo 显示和隐藏

onMounted(() => {
  var viewer = new Cesium.Viewer('cesiumBody')
  viewer.cesiumWidget.creditContainer.style.display = 'none' // 隐藏logo
})

右上角按钮的显示和隐藏

  var viewer = new Cesium.Viewer('cesiumBody', {
    // 是否显示查询按钮
    geocoder: false,
    // 是否显示home按钮
    homeButton: false,
    // 控制查看器的显示模式
    sceneModePicker: false,
    // 是否显示图层选择器
    baseLayerPicker: false,
    // 是否显示帮助
    navigationHelpButton: false
  })

时间轴和全屏按钮显示和隐藏

var viewer = new Cesium.Viewer('cesiumBody', {
    // 隐藏左下角的仪表盘
    animation: false,
    // 隐藏底部时间轴
    timeline: false,
    // 是否显示全屏按钮
    fullscreenButton:false
  })

4 cesium 的背景改成天空盒子

var viewer = new Cesium.Viewer('cesiumBody', {
    //天空背景
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: 'texture/sky/px.jpg',
        negativeX: 'texture/sky/nx.jpg',
        positiveY: 'texture/sky/py.jpg',
        negativeY: 'texture/sky/ny.jpg',
        positiveZ: 'texture/sky/pz.jpg',
        negativeZ: 'texture/sky/nz.jpg',
      }
    })
  })

5. 使用地图

使用地图其他的地图, 在 viewer 的第二个参数内添加

 // 天地图矢量路径图
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=开发者key',
      layer: 'tdtBasicLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible'
    })

//  使用openStreetMap地图
 	imageryProvider: new Cesium.OpenStreetMapImageryProvider({
      url: 'https://a.tile.openstreetmap.org/'
    })

// 高德矢量地图,
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      layer: "tdtVecBasicLayer",
      style: "default",
      format: "image/png",
      tileMatrixSetID: "GoogleMapsCompatible",
    }),

叠加地图

// 地图叠加
var imageryLayers = viewer.imageryLayers;
var layer = imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
	url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
	layer: "tdtVecBasicLayer",
	style: "default",
	format: "image/png",
	tileMatrixSetID: "GoogleMapsCompatible",
}))
layer.alpha = 0.5

设置地形在 viewer 的第二个参数内添加

    // 设置地形, 让山脉看起来有凹凸不平的效果,
    terrainProvider:Cesium.createWorldTerrain(),

// 设置水面有一种波光粼粼的波浪效果
	terrainProvider: Cesium.createWorldTerrain({
  		requestWaterMask: true,
  		requestVertexNormals: true
	}),

// 设置自定义地形数据
	terrainProvider: new Cesium.CesiumTerrainProvider({
  		url: './terrains/gz'
	}),

6. cesium 坐标系

  // 角度转弧度
  var radians = Cesium.Math.toRadians(90)

// 弧度转角度
  var degrees = Cesium.Math.toDegrees(2 * Math.PI);

  // 将经纬度转为笛卡尔坐标
  var cartesian3 = Cesium.Cartesian3.fromDegrees(
      // 经度
      89.5,
      // 纬度
      20.4,
      // 高度
      100
  )

// 将笛卡尔坐标转为经纬度坐标
var cartographic = Cesium.Cartographic.fromCartesian(cartesian3)

7. cesium 相机

cesium 相机位置

// 生成position北京天安门位置
  var cartesian3 = Cesium.Cartesian3.fromDegrees(
      // 经度
      116.397428,
      // 纬度
      39.90923,
      // 高度
      100
  )
  viewer.camera.setView({
    // 指定相机的位置
    destination: cartesian3,
  })


viewer.camera.setView({
    // 指定相机的位置
    destination: cartesian3,
    orientation: {
      // 指定相机的朝向
      heading: Cesium.Math.toRadians(0),
      // 控制相机的俯仰角
      pitch: Cesium.Math.toRadians(-90),
      // 指定相机的滚转角
      roll: 0
    }
  })

cesium让相机飞到某个位置

viewer.camera.flyTo({
    // 指定相机的位置
    destination: cartesian3,
    orientation: {
      // 指定相机的朝向
      heading: Cesium.Math.toRadians(0),
      // 控制相机的俯仰角
      pitch: Cesium.Math.toRadians(-90),
      // 指定相机的滚转角
      roll: 0
    }
  })

通过按键移动相机

document.addEventListener("keydown", (e) => {
    var height = viewer.camera.positionCartographic.height;
    var moveRate = height / 100
    if (e.key == 'w') {
      // 设置相机向前移动
      viewer.camera.moveForward(moveRate)
    } else if (e.key == 's') {
      // 设置相机向后移动
      viewer.camera.moveBackward(moveRate);
    } else if (e.key == 'a') {
      // 设置相机向左移动
      viewer.camera.moveLeft(moveRate);
    } else if (e.key == 'd') {
      // 设置相机向右移动
      viewer.camera.moveRight(moveRate);
    } else if (e.key == 'q') {
      // 设置相机向左旋转
      viewer.camera.lookLeft(Cesium.Math.toRadians(0.1));
    } else if (e.key == 'e') {
      // 设置相机向右旋转
      viewer.camera.lookRight(Cesium.Math.toRadians(0.1));
    } else if (e.key == 'r') {
      // 设置相机向上旋转
      viewer.camera.lookUp(Cesium.Math.toRadians(0.1));
    }else if (e.key == 'f') {
      // 设置相机向下旋转
      viewer.camera.lookDown(Cesium.Math.toRadians(0.1));
    }else if (e.key == 'g') {
      // 设置相机逆时针翻滚
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.1));
    }else if (e.key == 'h') {
      // 设置相机逆时针翻滚
      viewer.camera.twistRight(Cesium.Math.toRadians(0.1));
    }
  })