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

这篇笔记主要记录

1. Vue+Vite项目引入cesiumJS
2. cesiumJS加载高德地图

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,
    cesiumLogo: false,
    // sceneMode: Cesium.SceneMode.SCENE3D,
    // terrainExaggeration: 3,
    infoBox: false,
  })
}

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZGRiMjUzZS1jZWNlLTRjMDYtODU5Mi05MjNiZDRjOGUwNTIiLCJpZCI6NDMxMDUsImlhdCI6MTY0NjI3MDQ2M30.ZH81WWILiz6RytEPHTdeRV-_Au5QuYN6JzJ8LsNqzLw'
  initCesium()
})
</script>

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

加载出来的样子

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({
    // 地图定位到指定位置 深圳市民中心 高德坐标拾取的 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,
  })
})

加载效果

完整代码

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>