Cesium 框架介绍和在 Vue 上的应用(详细)

现阶段二维地图框架介绍

Openlayer：稳定可靠的集成式地图开发脚本，兼容老旧版本的 IE 浏览器，适合传统 webGIS 开发。
Leaflet：轻量级的地图脚本，丰富插件，优秀拓展性，适合轻应用及移动端 webGIS 开发。

现阶段 2.5D 地图框架介绍

Mapbox：高清经纬度矢量瓦片，个性化前端表达，前端矢量绘制，支持海量地名地址

cesium 三维地图框架介绍

Cesium 是一个基于 WebGL 渲染机制、跨平台，跨浏览器的展示三维地球和地图的 JavaScript 库。

cesium 作用

优势

支持 2D/2.5D/3D 形式的地图展示
可以支持 3D 模型导入（如城市建筑等）
支持地形加载（需要获取地形数据）
支持 gltf 等模型的加载，在轨迹回放等功能上相较于 2D/2.5D 有更好地展示效果

劣势

3D 模型、地形数据加载慢
比较吃 GPU 性能、如果 3D 模型较大，需要设置独立显卡

cesium 在 vue 上的使用（这篇文章围绕这块介绍）

webpack 相关配置

可以参考我的这篇文章 cesium 安装依赖和 webpack 相关配置

引入 cesium 方式

在 main.js 中引入 cesium 的样式 import "cesiumStyle";
在.vue 文件中按需引入, 如 import { SceneMode } from "cesium";

创建 3 维底图

可以参考我的这篇文章 cesium 创建 3 维底图

实体按类型渲染

在Openlayer上存在图层点位的概念，可以按图层的方式控制不同种类的点位数据。但在 cesium 上，不存在这种概念。可以通过CustomDataSource这个类来实现点位的数据源区分。

// 数据源创建方式
const dataSource = new CustomDataSource(layerName);
this.layersMap.set(layerName, dataSource); // 将所有的数据源存于Map中统一管理
viewer.dataSources.add(dataSource);
// 通过show方法可以控制该数据源是否显示
dataSource.show = layerState;

// 数据源点位交互方式
dataSource.entities.add({
    id,
    position,
    description:info,
    billboard: {
        image,
        verticalOrigin: VerticalOrigin.Center
    }
})

鼠标移入、点击事件注册

鼠标点击事件可通过ScreenSpaceEventHandler这个类来实现，大致实现方式代码如下

function initMapEventHandler(viewer) {
    const handler = new ScreenSpaceEventHandler(viewer.scene.canvas);
    registMapClickEvent(viewer, handler);
    registMapMouseMoveEvent(viewer, handler);
};
// 地图点击事件注册，移入事件同理 将其handler.setInputAction的第二个参数改为ScreenSpaceEventType.MOUSE_MOVE
function registMapClickEvent(viewer, handler) {
    handler.setInputAction((event) => {
        // 获取地图上的点位实体(entity)坐标
        const pick = viewer.scene.pick(event.position);
        if (pick && pick.id && pick.id.description) {
            // 可以从description属性中获取该实体的数据(在添加实体的时候将数据注入该属性中)
            const data = pick.id.description.getValue();
        }
    }, ScreenSpaceEventType.LEFT_CLICK);
};

点位弹框

可以参考我的这篇文章 cesium 点位弹框

地图缩放监听 + 后端聚合点位实现

可以参考我的这篇文章 cesium 地图缩放监听 + 后端聚合点位实现

cesium 地形加载方式

可以参考我的这篇文章 cesium 地形加载

cesium 的一些优化方案

可以参考我的这篇文章 cesium 优化方案