VUE-cesium（综合demo-01配置基础项）

目录

1. 项目创建

2. 地图初始化配置

3. 设置鼠标位置动态经纬度小组件

4. 配置cesium罗盘小组件

4.1 安装 cesium-navigation-es6 插件

4.2 配置罗盘样式

5. 修改App.vue

6. 实现效果：

---

1. 项目创建

VUE3构建Cesium项目_HM-hhxx！的博客-CSDN博客_cesium vue3使用VUE3构建cesium项目https://blog.csdn.net/damadashen/article/details/124896474?spm=1001.2014.3001.5502

2. 地图初始化配置

在文件夹中通过创建initViewer对cesium项目进行基础配置，initViewer.js如下：

import * as Cesium from "cesium";
 
export default function initViewer() {
  // 设置cesium token
  Cesium.Ion.defaultAccessToken =
    "-----------YourToken-----------------------";
 
  // 设置cesium静态资源路径
  window.CESIUM_BASE_URL = "/";
 
  // 设置cesium默认视角
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    // 西边的经度
    89.5,
    // 南边维度
    20.4,
    // 东边经度
    110.4,
    // 北边维度
    61.2
  );
 
  var viewer = new Cesium.Viewer("cesiumContainer", {
    // 是否显示信息窗口
    // infoBox: false,
    // 是否显示查询按钮
    geocoder: false,
    // 不显示home按钮
    homeButton: false,
    // 控制查看器的显示模式
    sceneModePicker: false,
    // 是否显示图层选择
    baseLayerPicker: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 是否播放动画
    animation: false,
    // 是否显示时间轴
    timeline: false,
    // 是否显示全屏按钮
    fullscreenButton: false,
    shouldAnimate: true,
  });
 
  // 设置沙箱允许使用js
  var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
  iframe.setAttribute(
    "sandbox",
    "allow-same-origin allow-scripts allow-popups allow-forms"
  );
  iframe.setAttribute("src", "");
 
  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
 
  viewer.scene.globe.enableLighting = true;
  // 取消天空盒显示
  viewer.scene.skyBox.show = false;
  // 设置背景为黑色
  viewer.scene.backgroundColor = Cesium.Color.BLACK;
  // 设置抗锯齿
  viewer.scene.postProcessStages.fxaa.enabled = true;
 
  // 设置相机飞机地点（广州塔）
  var postion = Cesium.Cartesian3.fromDegrees(
    // 经度
    113.3301,
    // 纬度
    23.0991,
    // 高度
    1500
  );
  viewer.camera.flyTo({
    destination: postion,
    orientation: {
      heading: Cesium.Math.toRadians(-45),
      pitch: Cesium.Math.toRadians(-30),
      roll: 0,
    },
    duration: 2,
  });
 
  return viewer;
}

3. 设置鼠标位置动态经纬度小组件

配置MousePosition.js如下：

import * as Cesium from "cesium";
export default class MousePosition {
  constructor(viewer) {
    this.divDom = document.createElement("div");
    this.divDom.style.cssText = `
      position: fixed;
      bottom:0;
      right:0;
      width:200px;
      height:40px;
      background-color: rgba(0,0,0,0.5);
      color: #fff;
      font-size: 14px;
      line-height: 40px;
      text-align: center;
      z-index: 100;
    `;
    document.body.appendChild(this.divDom);
 
    //   监听鼠标的移动事件
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 
    handler.setInputAction((movement) => {
      //   获取鼠标的坐标
      const cartesian = viewer.camera.pickEllipsoid(
        movement.endPosition,
        viewer.scene.globe.ellipsoid
      );
      if (cartesian) {
        //   转换成经纬度
        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        const longitudeString = Cesium.Math.toDegrees(
          cartographic.longitude
        ).toFixed(2);
        const latitudeString = Cesium.Math.toDegrees(
          cartographic.latitude
        ).toFixed(2);
        const heightString = cartographic.height;
        //   显示经纬度
        // console.log(
        //   `经度：${longitudeString} 纬度：${latitudeString} 高度：${heightString}`
        // );
        this.divDom.innerHTML = `经度：${longitudeString} 纬度：${latitudeString} `;
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  }
}

4.配置cesium罗盘小组件

4.1 安装 cesium-navigation-es6 插件

cesium-navigation是一个cesium的插件，提供指南针、导航仪和距离刻度用户图形界面。插件的github地址是

GitHub - cesium-plugin/cesium-navigation-es6https://github.com/cesium-plugin/cesium-navigation-es6#readme使用npm进行安装

npm install cesium-navigation-es6 --save

或使用yarn方式安装：

yarn add cesium-navigation-es6 -D

4.2 配置罗盘样式

罗盘初始化时，通过new CesiumNavigation(viewer, options);进行实例化，viewer为创建的初始化图层，options为罗盘的配置项。对于罗盘的样式重写，详见：

css请参考/githubhttps://github.com/richard1015/cesium-navigation-es6/blob/master/test/test.css

less请参考/githubhttps://github.com/richard1015/cesium-navigation-es6/blob/master/test/test.less

js请参考/githubhttps://github.com/richard1015/cesium-navigation-es6/blob/master/test/index.js

罗盘样式及内容可以根据用户需求自行更改，详见github地址中的介绍。 

官方案例：

import {  Viewer,Rectangle} from "cesium";
import 'cesium/Build/Cesium/Widgets/widgets.css';
 
const viewer = new Viewer("cesiumContainer",{
    animation:false,
    timeline:false
});
 
const options = {};
// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
// options.defaultResetView = Rectangle.fromDegrees(80, 22, 130, 50)
options.defaultResetView = new Cartographic(CesiumMath.toRadians(111.50623801848565), CesiumMath.toRadians(2.8997206760441205), 8213979.400955964)
//相机方向
options.orientation = {
    heading: CesiumMath.toRadians(350.94452087411315),
    pitch: CesiumMath.toRadians(-66.6402342251215),
    roll: CesiumMath.toRadians(360)
}
//相机延时
options.duration = 4//默认为3s
 
// 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
options.enableCompass= true;
// 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
options.enableZoomControls= true;
// 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
options.enableDistanceLegend= true;
// 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
options.enableCompassOuterRing= true;
 
//修改重置视图的tooltip
options.resetTooltip = "重置视图";
//修改放大按钮的tooltip
options.zoomInTooltip = "放大";
//修改缩小按钮的tooltip
options.zoomOutTooltip = "缩小";
 
//如需自定义罗盘控件，请看下面的自定义罗盘控件
new CesiumNavigation(viewer, options);

5. 修改App.vue

 App.vue如下：

<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>
 
<script setup>
// yarn add cesium
// 将cesium目录下的Build/Cesium4个目录拷贝到public，然后将widgets目录拷贝一份到src下
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import { onMounted } from "vue";
import initViewer from "@/cesium/initViewer";
import MousePosition from "@/cesium/MousePosition";
import CesiumNavigaion from "cesium-navigation-es6";
 
onMounted(() => {
  let viewer = initViewer();
  // 根据鼠标位置生成经纬度值
  let mousePosition = new MousePosition(viewer);
  // 设置导航罗盘的配置
  var options = {
    // 启用罗盘
    enableCompass: true,
    // 是否启用缩放
    enableZoomControls: false,
    // 是否启用指南针外环
    enableCompassOuterRing: true,
    // 是否启用距离的图例
    // enableDistanceLegend: false,
  };
  // 初始化导航罗盘
  let navigation = new CesiumNavigaion(viewer, options);
});
</script>
 
<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

6. 实现效果：