大疆无人机之Cesium地图加载

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

最近在写大疆无人机项目，大疆开源代码已经不满足现有的需求；客户要求要可以绘制航线和查看3D建模画面。所以我们首先重新加载个新地图吧

一、环境搭建

我是用的是vue搭建的框架，npm安装方便，但是最近在网不好的情况下，地图加载很慢；计划后面替换成离线地图

npm install cesium vite-plugin-cesium
# or
pnpm add cesium vite-plugin-cesium
# or
yarn add cesium vite-plugin-cesium

二、使用步骤

1.引入cesium

代码如下（示例）：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import cesium from "vite-plugin-cesium";
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), cesium()],
});

2.在模板页面中创建地图

代码如下（示例）：

viewer = new Cesium.Viewer('cesiumContainer', {
    sceneMode: Cesium.SceneMode.SCENE3D,
    baseLayerPicker: false,
    shouldAnimate: true,
    terrainProvider: Cesium.createWorldTerrain(),
    geocoder: false, // 右上角 搜索
    homeButton: false, // 右上角 Home
    sceneModePicker: false, // 右上角 2D/3D 切换
    navigationHelpButton: false, // 右上角 Help
    animation: false, // 左下角 圆盘动画控件
    timeline: false, // 时间轴
    fullscreenButton: false, // 右下角 全屏控件
    vrButton: false, // 如果设置为 true，将创建 VRButton 小部件。
    scene3DOnly: true, // 每个几何实例仅以 3D 渲染以节省 GPU 内存
    infoBox: false, // 隐藏点击要素后的提示信息
  })

具体使用请查看官方文档cesium中文网

3.相机初始位置

地图是加载出来了，可是想要定位到某个点，那就还需要设置相机位置，让相机带我们去到那个点

viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(lng,lat,height), // 经度, 纬度, 高度
    duration: 1
  })

4.去除logo

// 去除logo
viewer.cesiumWidget.creditContainer.style.display = "none";

---

总结

注意：安装cesium的时候，查看一下版本，我的是1.95，如果版本过低，部分功能受影响，更新cesium

npm install cesium@1.95

到这里地图就显示出来啦，下一章我们继续