Vue3+Cesium—第一章 Cesium入门

sowhat88
2,245 阅读4分钟

1.1 Cesium简介

        Cesium是一个基于JavaScript开发的WebGL三维地球和地图可视化库。它利用了现代Web技术，如HTML5、WebGL和WebAssembly，来提供跨平台和跨浏览器的三维地理空间数据可视化。

        官网：www.cesium.com/

        文档：cesium.com/learn/ion-s…

        Cesium的主要特点包括：

  • 跨平台、跨浏览器：无需额外插件，即可在多种操作系统和浏览器上运行。
  • 海量数据支持：Cesium定义了3D Tiles数据格式，支持大规模三维模型和地形数据的加载与渲染。
  • 丰富的地图模式：支持三维、二维和哥伦布视图（2.5D），提供多种地图和地形图层选择。
  • 交互功能：支持地址搜索、信息属性框等用户交互功能，以及全屏模型和WebVR虚拟现实体验。

        Cesium主要的功能有：

        1、使用3d tiles格式流式加载各种不同的3d数据，包含倾斜摄影模型、三维建筑物、CAD和BIM的外部和内部，点云数据。并支持样式配置和用户交互操作。

        2、全球高精度地形数据可视化，支持地形夸张效果、以及可编程实现的等高线和坡度分析效果。

        3、支持多种资源的图像图层，包括WMS，TMS，WMTS以及时序图像。图像支持透明度叠加、亮度、对比度、GAMMA、色调、饱和度都可以动态调整。支持图像的卷帘对比。

        4、支持标准的矢量格式KML、GeoJSON、TopoJSON、以及矢量的贴地效果。

        5、三维模型支持gltf2.0标准的PRB材质、动画、蒙皮和变形效果。贴地以及高亮效果。

        6、使用CZML支持动态时序数据的展示。

        7、支持各种几何体：点、线、面、标注、公告牌、立方体、球体、椭圆体、圆柱体、走廊、管径、墙体。

        8、可视化效果包括：基于太阳位置的阴影、自身阴影、柔和阴影。

        9、支持大气、雾、太阳、阳光、月亮、星星、水面。

        10、粒子特效：烟、火、火花。

        11、地形、模型、3d tiles模型的面裁剪。

        12、对象点选和地形点选。

        13、支持鼠标和触摸操作的缩放、渲染、惯性平移、飞行、任意视角、地形碰撞检测。

        14、支持3d地球、2d地图、2.5d哥伦布模式。3d视图可以使用透视和正视两种投影方式。

1.2 Cesium资源

image.png

image.png

image.png

1.2 搭建Cesium的Vue3项目

    1、使用vite创建vue3项目

npm create vue@latest

image.png

        如果对Vue3不太熟悉，可以参考Vue3+vite+Ts+pinia—第一章 初识Vue3。

    2、安装Cesium插件

        目前Vite提供了很多插件，其中包括Cesium，我们可以去Vite社区插件进行下载。

        (1)首先我们先访问Vite的官网：cn.vitejs.dev/ ，然后在头部导航选择插件

image.png

        (2)进入社区插件

image.png

        (3)搜索Cesium插件

image.png

        (4)安装并引用Cesium插件

image.png

            这里就按照指示在工程里配置即可：

image.png

image.png

    3、设置Cesium的密钥token

        Cesium在没有设置token的情况下，它会给你使用一个默认的token，在一段时间内你是可以正常使用的，但是不久后它会提示token过期，地图无法加载。

image.png

        这个问题其实可以通过设置token来解决，以下是设置token的步骤:

        (1)登录Cesium官网，进入"OPEN ION"

image.png

        (2)选择"Access Tokens"选项

image.png

        (3)复制token

image.png

        (4)在Vue3工程的main.ts里设置token

            在main.ts文件里，先引入Cesium模块，然后通过设置Cesium.Ion.defaultAccessToken，保存刷新页面，地图可以恢复正常。

image.png

    4、初始化Cesium实例

        实例化Cesium还是很简单的，给它一个指定的容器，然后把容器作为参数调用Cesium.Viewer构造函数就完成了。

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer');
}) 

</script>

<template>
  <div id="cesiumContainer"></div>
</template>

image.png

1.3 查看器基本功能

    1、搜索功能

        cesium自带了搜索地理位置组件，而且还能很好的兼容中文。

da42e0e5-1b11-421f-a9c8-5a1c1b87ec88.gif

    2、恢复默认视角

        搜索按钮旁边有一个"View Home"按钮，可以让搜索后的位置快速回归到默认的视角。

57386392-2b90-4803-9444-94d5c8a1234f.gif

    3、2D/2.5D/3D切换

        在右上角的球形图标那里，可以进行2D/2.5D/3D的切换。

        (1)2D

image.png

        (2)2.5D

image.png

        (3)3D

image.png

    4、切换地图风格

        在右上角的球形图标的旁边，有一个类似于地形的图标，点开它会展开一些Cesium自带提供的一些地图风格供我们选择。

image.png

    5、操作指引

        在右上角的问号图标，点开它会展开一些比较基础的鼠标操作指引。

image.png

    6、时间轴播放器

        这地图的底部Cesium还自带了一个时间轴播放器，它支持正放和倒放。

4458373b-9a60-4cfc-a72d-3ed19c7ce728.gif

1.4 查看器基本配置

    查看器的各个功能都是有配置进行控制的，一般开发者未必用得着这些功能，我们可以根据需求控制其显示或隐藏。

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 搜索按钮
    geocoder: false,
    // 地图风格切换按钮
    baseLayerPicker: false,
    // 恢复默认视角按钮
    homeButton: false,
    // 2D/2.5D/3D切换按钮
    sceneModePicker: false,
    // 操作指引按钮
    navigationHelpButton: false,
    // 动画播放控件
    animation: false,
    // 时间轴控件
    timeline: false,
    // 全屏按钮
    fullscreenButton: false,
  });
  // 隐藏Cesium的logo
  viewer._cesiumWidget._creditContainer.style.display = "none";
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

image.png

avatar
文章
阅读
粉丝