GIS-3D：Cesiumjs

前言

之前在GIS地图：加载GeoServer中介绍了前端页面中加载GIS地图，但是只能加载平面地图，随着项目的要求越来越高，需要将2D的地图替换为3D版本。
3D版本的GIS地图开发，我使用了Cesiumjs进行开发，开发框架依旧是vite+vue3+typescript。

一、安装库 Cesiumjs

• 使用pnpm安装

pnpm add vite-plugin-cesium@1.2.22
pnpm add cesium

• 配置vite.config.mts，安装插件

import cesium from 'vite-plugin-cesium'
export default defineConfig(async () => {
  return {
    application: {},
    vite: {
      plugins: [
        cesium(), 
      ],
    },
  };
});

插件vite-plugin-cesium建议使用1.2.22版本；
当在项目中配置了vite的公共基础路径base后，如果使用1.2.23版本的插件，打包后的dist文件夹下，组件cesium会放在base目录下(此处指代设置的公共路径),从而导致项目报错Cesium is not defined；

image.png

二、使用Cesiumjs 加载GIS地图

<script setup lang="ts">
import { onMounted } from 'vue';

import * as Cesium from 'cesium';

onMounted(() => {
  createMap();
});

async function createMap() {
  // 隐藏操作栏
  const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
  });
  viewer._cesiumWidget._creditContainer.style.display = 'none'; // 取消版权信息
}
</script>

<template>
  <div class="h-full w-full" id="cesiumContainer"></div>
</template>

效果

三、切换展示区域

地图默认展示全球地图，当我们想让他默认展示到某个区域时，则可通过区域中心的经纬度，将地图移动到该区域（将相机的视角移动到该区域）。

  viewer.value.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(108.917_822, 34.134_564, 697.74),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-49),
    },
  });

效果图

三、添加点击事件

给地图添加点击事件，可获取到当前鼠标点击点的坐标

const handler = new Cesium.ScreenSpaceEventHandler(viewer.value.canvas);
  // 监听鼠标点击事件
  handler.setInputAction((click: any) => {
    // 使用pick函数获取点击位置的实际位置
    const cartesian = viewer.value.scene.pickPosition(click.position);
    if (Cesium.defined(cartesian)) {
      // 将笛卡尔坐标转换为经纬度坐标
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const longitudeString = Cesium.Math.toDegrees(
        cartographic.longitude,
      ).toFixed(6);
      const latitudeString = Cesium.Math.toDegrees(
        cartographic.latitude,
      ).toFixed(6);
      const heightString = cartographic.height.toFixed(2);
      console.log(
        `经度：${longitudeString}，纬度：${latitudeString}，高度：${heightString}`,
      );
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

参数Cesium.ScreenSpaceEventType.LEFT_CLICK表示事件的类型为左键点击事件，当然还有其他的事件类型:

• LEFT_DOUBLE_CLICK: 鼠标左键双击
• RIGHT_CLICK：鼠标右键点击
• MOUSE_MOVE：鼠标移动

四、地图的操作

• 地图放大

      const position = viewer.value.camera.position;
      const cameraHeight =
        viewer.value.scene.globe.ellipsoid.cartesianToCartographic(
          position,
        ).height;
      // 每次缩小 20 倍，参数可改
      const moveRate = cameraHeight / 20;
      viewer.value.camera.moveForward(moveRate);

• 地图缩小

      const position = viewer.value.camera.position;
      const cameraHeight =
        viewer.value.scene.globe.ellipsoid.cartesianToCartographic(
          position,
        ).height;
      // 每次缩小 20 倍，参数可改
      const moveRate = cameraHeight / 20;
      viewer.value.camera.moveBackward(moveRate);

五、源代码

demo