WebGIS开发漫谈之Cesium在Vue上实现三维地图

2023-09-14 23:30:37

前言

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

作为一名WebGIS开发人员，从前端向GIS靠拢，虽然不是纯GIS，但也了解了一些相关GIS上的东西。平时接触到的

Cesium简介

Cesium是一个开源JavaScript库，用于创建三维地图和地理空间应用程序。它基于WebGL，提供了一系列强大的功能，如三维地形、影像、模型和矢量数据可视化、相机控制、测量、动画和事件处理等。Cesium已被广泛应用于地理信息系统、城市规划、环境监测、矿产勘探、航空航天等领域。

Vue集成Cesium

Vue是一个流行的前端JavaScript框架，以其简洁、高效和灵活性而著称。Cesium可以与Vue轻松集成，从而使开发者能够使用Vue的组件化和响应式编程特性来构建三维地图应用程序。

安装Cesium和Vue

首先，需要安装Cesium和Vue。可以使用以下命令：

npm install cesium
npm install vue

创建Vue项目

使用Vue CLI创建新的Vue项目：

vue create cesium-app

集成Cesium

在项目根目录下创建src/components/CesiumMap.vue文件，并添加以下代码：

<template>
  <div id="cesium-map"></div>
</template>

<script>
import * as Cesium from 'cesium';

export default {
  mounted() {
    const viewer = new Cesium.Viewer('cesium-map');

    // 添加地形
    viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
      url: 'https://assets.agi.com/stk-terrain/world',
    });

    // 添加影像
    viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
      key: 'YOUR_BING_MAPS_KEY',
    }));

    // 添加模型
    const model = viewer.scene.primitives.add(new Cesium.Model({
      uri: 'https://models.sketchup.com/3dmodel/824a4d63b9f0809a0b3b098c714d8d3a/download',
    }));

    // 设置相机
    viewer.camera.setView({
      destination: new Cesium.Cartesian3(0, 0, 1000000),
      orientation: {
        heading: Cesium.Math.toRadians(45),
        pitch: Cesium.Math.toRadians(-15),
        roll: 0,
      },
    });
  },
};
</script>

在Vue应用程序中使用CesiumMap组件

在项目根目录下创建src/App.vue文件，并添加以下代码：

<template>
  <CesiumMap />
</template>

<script>
import CesiumMap from './components/CesiumMap.vue';

export default {
  components: {
    CesiumMap,
  },
};
</script>

三维地图开发

接下来，就可以使用Cesium进行三维地图开发了。Cesium提供了丰富的API，可以满足各种三维地图开发需求。

添加地形

要添加地形，可以使用Cesium的CesiumTerrainProvider类。该类提供了多种地形数据源，包括全球地形、区域地形和局部地形。

viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
  url: 'https://assets.agi.com/stk-terrain/world',
});

添加影像

要添加影像，可以使用Cesium的ImageryProvider类。该类提供了多种影像数据源，包括卫星影像、航空影像、地形影像等。

viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
  key: 'YOUR_BING_MAPS_KEY',
}));

添加模型

要添加模型，可以使用Cesium的Model类。该类可以加载各种格式的模型，如Collada、GLTF和OBJ等。

const model = viewer.scene.primitives.add(new Cesium.Model({
  uri: 'https://models.sketchup.com/3dmodel/824a4d63b9f0809a0b3b098c714d8d3a/download',
}));

设置相机

要设置相机，可以使用Cesium的Camera类。该类提供了各种相机模式，如第一人称视角、第三人称视角和上帝视角等。

viewer.camera.setView({
  destination: new Cesium.Cartesian3(0, 0, 1000000),
  orientation: {
    heading: Cesium.Math.toRadians(45),
    pitch: Cesium.Math.toRadians(-15),
    roll: 0,
  },
});