Vue+Vite 项目引入Cesium JS加载高德地图

gongzemin
1,589 阅读3分钟

这篇笔记主要记录

  1. Vue+Vite项目引入cesiumJS
  2. cesiumJS加载高德地图
  3. 地图的俯视角 垂直向下角度解释
  4. 销毁cesium
Vue+Vite项目引入cesiumJS
安装cesium和vite-plugin-cesium包

Vue+Vite项目引入CesiumJS，需要用到cesium和vite-plugin-cesium包，执行安装pnpm i cesium vite-plugin-cesium -D,安装好包

 "dependencies": {
    "vue": "^3.4.23",
 },
  "devDependencies": {
    "cesium": "^1.118.2",
    "vite-plugin-cesium": "^1.2.22",
    "vite": "^5.2.7",
  }
配置vite.config.js，引入cesium
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
export default defineConfig({
  plugins: [vue(), cesium()],
})
加载Cesium
<script setup lang="ts">
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

let viewer
function initCesium() {
  // Initialize a new Cesium Viewer with customized options
  viewer = new Cesium.Viewer('cesiumContainer', {
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
    selectionIndicator: false,
    maximumRenderTimeChange: Infinity, // 无操作时自动渲染帧率，设为数字会消耗性能，Infinity为无操作不渲染
    shadows: false, // 是否显示光照投射的阴影
    // targetFrameRate: 10, // 帧率
    shouldAnimate: false,
    requestRenderMode: true,
    // sceneMode: Cesium.SceneMode.SCENE3D,
    infoBox: false,
  })
}

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZGRiMjUzZS1jZWNlLTRjMDYtODU5Mi05MjNiZDRjOGUwNTIiLCJpZCI6NDMxMDUsImlhdCI6MTY0NjI3MDQ2M30.ZH81WWILiz6RytEPHTdeRV-_Au5QuYN6JzJ8LsNqzLw'
  initCesium()
  // 不显示cesium ion Logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>
<style scoped>
#cesiumContainer {
  width: 1200px;
  height: 700px;
}
</style>

加载出来的样子

image.png

cesiumJS加载高德地图
定义加载高德地图的方法
function loadGaode() {
  const gaodeLayer = new Cesium.ImageryLayer(
    new Cesium.UrlTemplateImageryProvider({
      url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', // 纯地标图(地名)
      minimumLevel: 1,
      maximumLevel: 18,
    })
  )
  viewer.imageryLayers.add(gaodeLayer)
}
渲染高德地图
onMounted(() => {
  Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZGRiMjUzZS1jZWNlLTRjMDYtODU5Mi05MjNiZDRjOGUwNTIiLCJpZCI6NDMxMDUsImlhdCI6MTY0NjI3MDQ2M30.ZH81WWILiz6RytEPHTdeRV-_Au5QuYN6JzJ8LsNqzLw'

  initCesium()
  viewer.cesiumWidget.creditContainer.style.display = 'none'
  loadGaode()
  // 飞行动画效果
  viewer.camera.flyTo({
    // 相机视角目的地
    destination: Cesium.Cartesian3.fromDegrees(114.06, 22.54, 600),
    // 相机的方向或姿态
    orientation: {
      heading: Cesium.Math.toRadians(0.0), //偏航角
      // pitch: Cesium.Math.toRadians(-90), //俯视角 默认-90度 想要垂直向下视角 可以不写
      roll: 0.0,
    },
    duration: 1000, // 1秒钟动画效果 到达目的地视角
  })
})

加载效果，我加载的视角是深圳市民中心，垂直向下角度，坐标[114.06, 22.54],通过高德坐标工具拾取的，拾取工具链接

image.png

地图的俯视角 垂直向下角度解释

pitch: Cesium.Math.toRadians(-90), // 俯视角 -90 垂直向下

先看下Cesium文档描述，

image.png pitch的默认值是-CesiumMath.PI_OVER_TWO弧度，CesiumMath.PI_OVER_TWO = Math.PI / 2.0,而Math.PI弧度就是180度，所以pitch默认就是-90度.

image.png

为什么-90度就是垂直向下呢，因为pitch0度就是平行地面 看着前方的视角，-90度相机视角就是垂直向下，90度就是垂直向上。因此，如果想要垂直向下的视角，可以不用写pitch。

image.png

对于相机姿态，相机视角，想要进一步了解，可以看下这篇[文章] (blog.csdn.net/yuzhongchun…), 有动图阐释。

销毁cesium
  onUnmounted(() => {
    if (viewer && !viewer.isDestroyed()) {
      viewer.destroy()
    }
  })

image.png

完整代码

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import
cesium from 'vite-plugin-cesium' export default defineConfig({ plugins: [vue(),
cesium()], }) ``` ###### 加载Cesium ```
<script setup lang="ts">
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

let viewer
function initCesium() {
  // Initialize a new Cesium Viewer with customized options
  viewer = new Cesium.Viewer('cesiumContainer', {
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
    selectionIndicator: false,
    maximumRenderTimeChange: Infinity, // 无操作时自动渲染帧率，设为数字会消耗性能，Infinity为无操作不渲染
    shadows: false, // 是否显示光照投射的阴影
    // targetFrameRate: 10, // 帧率
    shouldAnimate: false,
    requestRenderMode: true,
    cesiumLogo: false,
    // sceneMode: Cesium.SceneMode.SCENE3D,
    // terrainExaggeration: 3,
    infoBox: false,
  })
}

function loadGaode() {
  const gaodeLayer = new Cesium.ImageryLayer(
    new Cesium.UrlTemplateImageryProvider({
      url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', // 纯地标图(地名)
      minimumLevel: 1,
      maximumLevel: 18,
    })
  )
  viewer.imageryLayers.add(gaodeLayer)
}

onMounted(() => {
  Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZGRiMjUzZS1jZWNlLTRjMDYtODU5Mi05MjNiZDRjOGUwNTIiLCJpZCI6NDMxMDUsImlhdCI6MTY0NjI3MDQ2M30.ZH81WWILiz6RytEPHTdeRV-_Au5QuYN6JzJ8LsNqzLw'

  initCesium()
  viewer.cesiumWidget.creditContainer.style.display = 'none'
  loadGaode()
  viewer.camera.flyTo({
    // 地图定位到指定位置 深圳市民中心 高德坐标拾取的 https://developer.amap.com/tools/picker?type=spa&ref=
    destination: Cesium.Cartesian3.fromDegrees(114.06, 22.54, 600), // 相机视角目的地
    orientation: {
      heading: Cesium.Math.toRadians(0.0), // 偏航角
      // pitch: Cesium.Math.toRadians(-90), // 俯视角 默认-90度 想要垂直向下视角 可以不写
      roll: 0.0,
    },
    duration: 0,
  })
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>
<style scoped>
#cesiumContainer {
  width: 1200px;
  height: 700px;
}
</style>
avatar
文章
阅读
粉丝