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如下：

6. 实现效果：