基础应用

说明

CesiumJS是国外一个基于javascript的地图引擎，支持3D、2D、2.5D形式的展示，可以自行绘制图形、高亮区域，并提供良好的触摸支持，并支持大多数的浏览器和移动端。

Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。
Cesium 使用WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL。
Cesium是基于Apache2.0 许可的开源程序。它可以免费的用于商业和非商业用途。

1. 使用 npm 安装

npm install --save cesium
# vue3+vite构建
npm i cesium vite-plugin-cesium vite -D

2. vite.config.js配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
export default defineConfig({
  plugins: [vue(),cesium()],
})

3. 使用方法

<template>
    <div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted } from "vue"
import { Viewer } from 'cesium'
onMounted(() => new Viewer('cesiumContainer'))
</script>
<style scoped>
.cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
}
</style>

4. 初始化常用参数

  viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, // 是否显示动画控件
    shouldAnimate: false, // 动画控件是否能用来控制旋转控件旋转场景
    homeButton: false,  // 是否显示Home按钮
    fullscreenButton: false, // 是否显示全屏按钮
    baseLayerPicker: false, // 是否显示图层选择控件
    geocoder: false, // 是否显示地名查找控件
    timeline: false, // 是否显示时间线控件
    sceneModePicker: false, // 是否显示投影方式控件
    navigationHelpButton: false, // 是否显示帮助信息控件
    infoBox: false, // 是否显示点击要素之后显示的信息
    requestRenderMode: true, // 启用请求渲染模式
    fullscreenElement: document.body, //全屏元素
    scene3DOnly: false, // 几何实例将只能以3D渲染以节省GPU内存
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式
    shadows: true, // 阴影是否由太阳投射
    terrainShadows: Cesium.ShadowMode.ENABLED, // 地形是投射还是接收来自太阳的阴影
    // 显示特效[requestWaterMask:水面的效果,requestVertexNormals:地形光照的效果]
    terrainProvider: Cesium.createWorldTerrain({ requestWaterMask: true, requestVertexNormals: true }) 
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = 'none'
  //开启地形深度检测[解决模型透过山体]
  viewer.scene.globe.depthTestAgainstTerrain = true
  // 修改场景时间 添加8小时，使地图时间和北京时间相同
  viewer.clock.currentTime = Cesium.JulianDate.addHours(Cesium.JulianDate.fromDate(new Date()), 0, new Cesium.JulianDate())
  // 激活基于太阳位置的光照
  viewer.scene.globe.enableLighting = true
  // 亮度设置
  viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createBrightnessStage()).uniforms.brightness = Number(1.2)

5. Cesium加载高德影

  /**
   * 注记要素地址http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8
   * 高德矢量地址http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
   * 高德影像地址https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
   */
  viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
      minimumLevel: 3, 
      aximumLevel: 16
    })
  );

6. 地图操控配置

  //相机高度最小值，即控制放大级别
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 300
//相机高度最大值，即控制缩小级别
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 3000000
// 将原来鼠标中键倾斜视图修改为鼠标右键触发
viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
// 将原来鼠标右键放大缩放修改为鼠标滚轮滚动
viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.WHEEL]
// 位置与角度
viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(84.1, 39.63, 2600000), orientation: new Cesium.HeadingPitchRoll(0, -1.5, 0) })