前言

本人所学GIS专业，毕业后一直从事Cesium相关的GIS开发工作，在业余时间将Ceium中常用的一些功能进行封装，形成能够高效复用的组件。实战项目中的多数功能均来源于实际项目，紧贴业务特性，实用性强，能够在最大程度上帮助个人、团队、公司、企业提高工作效率，节省开发成本。

一、项目说明

Cesium实战项目目前共168个实例（后面会继续增加），项目基于Cesium1.8.0+VUE 实现（支持到1.7.2），现有实例如下：
基础底图
1 ArcGIS在线底图
2 ​MapBox在线底图
3 ​高德在线底图
4 ​天地图在线底图
5 ​超图在线底图
6 ​本地单张图片
7 ​底图参数
地形叠加
8 ​中国地形
9 ​ArcGIS地形
10 局部地形（本地）
点状对象
11 Cesium点聚合1
12 Cesium点聚合2
13 Billboard加载Gif图片
14 Cesium 闪烁点
15 Primitives加载大量图标点
16 div文本点
17 动态效果点
18 图标点+文字(primitive方式)
19 动态文本标记
20 图片+canvas画图billboard文字动画
21 简单标注
22 简单渐变标注
23 竖立文本标注
24 弹跳点动画（billboard）
25 水球图
线状对象
26 动态线
27 迁徙线效果
28 光晕线
29 动态传输线
30 尾迹线
31 发光线（材质）
32 北京公交线路（entity+自定义材质）
33 北京公交线路（primitive+自定义材质）
34 管道流动
单体化
35 倾斜模型分栋单体化（基于geoserver）
36 倾斜模型分层单体化（基于geoserver）含教程
37 倾斜模型分户单体化（基于geoserver）含教程
编辑绘制
38 点线面绘制
39 点线面编辑
40 点线面绘制扩展
41 点线面编辑扩展
自定义信息框
42 多字段自适应信息框
43 气泡窗口样式1
44 气泡窗口样式2
45 设备状态窗口
46 图表窗口
标注标绘
47 自定义html标注图层
48 军事标绘
49 军事标绘编辑
50 gltf 标绘绘制
51 gltf 标绘编辑
52 行政区标注
53 体对象绘制编辑
54 渐变区域
55 区域标注
轨迹漫游
56 轨迹回放
57 跟随视角漫游
58 第一人称漫游
59 上帝视角漫游
60 行人漫游
61 实时点位动画（单个点位）
空间分析
62 Cesium 2维点转3维点
63 Cesium 空间线段等分
64 地表透明（地下模式）
65 通视分析
66 可视域分析
67 缓冲区分析
68 双屏对比
69 二三维联动（基于openlayers)
70 限高分析
71 模型位置编辑
72 模型位置编辑（交互）
裁剪开挖
73 地表开挖（材质贴图）
74 地形开挖（材质贴图）
75 模型裁剪（Planes）
76 矿区岩层效果
场景控制
77 场景出图（导出图片）
78 自定义天空盒
79 自定义空间背景
80 场景泛光
81 雨雪雾天气效果
82 宏观数字地球
83 鹰眼地图（基于openlayers）
84 云层
85 底图对比
86 纯色地球
87 昼夜
场景控件
88 位置信息状态栏控件
89 导航控件
90 Tooltip鼠标移入信息
相机及视角
91 限定视角范围
92 绘制反选遮罩
93 书签管理
94 旋转的地球
95 绕点旋转
96 视角中心点
工具
97 场景测量工具
98 鼠标位置拾取工具
键盘控制
99 控制视角
100 模型移动
101 模型移动（第一人称）
102 模型移动（第一人称，模型）
103 模型移动显示附近点
粒子系统
104 火焰粒子
105 喷泉粒子
106 烟雾粒子
模型动画、特效
107 矢量白膜自定义shader（不改源码）
108 矢量白膜自定义shader（透明）
109 数字工厂
110 模型热力图
111 数字社区
112 白膜特效选中高亮
113 立体建筑物闪烁效果
114 建筑物渐变（Primitive）
115 透明渲染
墙体动画、特效
116 动态立体墙
117 动态立体墙（升级）
118 圆形、规则多边形动态围墙
119 围墙扩散动画
120 立体墙呼吸灯效果
扩散动画、特效
121 动态扩散圆
122 圆形波纹效果
123 六边形扩散扫描
124 圆形扩散扫描
其他动画、特效
125 动态水面效果
126 光柱椎体
127 扫描线
128 飞线
129 柱状人口统计（动画）
130 球体材质
131 部分模型可见
132 界面蒙板
数字城市
133 数字城市1
134 数字城市2
135 数字城市3
136 城市建筑白模
行业应用
137 雷达扫描效果
138 雷达追踪圆锥体
139 雷达追踪四棱锥体
140 雷达遮罩扫描
141 相控阵雷达范围
142 雷达放射波
143 卫星视椎体（四棱锥体）
144 目标跟踪
145 动态目标检测
146 室内相机朝向
水利水域
147 动态水域
148 水闸放水效果
149 淹没效果
视频应用
150 视频贴图参数调整
151 视频融合
152 视频融合（Hls协议）
153 视频窗口（普通视频）
154 视频窗口（rtmp视频）
155 视频窗口（hls视频）
156 视频墙（含编辑）
Echarts可视化支持
157 Echarts 迁徙图1
158 Echarts 迁徙图2
159 Echarts 散点图
160 Echarts 流入线
161 Echarts 流出线
MapV可视化支持
162 MapV 迁徙图
163 MapV 大迁徙图
164 MapV 热力图
165 MapV 强边界图
其他
166 3dtiles高度调整
167 文字贴图
168 热力图（基于heatmap.js插件）

在线预览地址 Cesium实战在线预览1 用户名cesium@sz 密码cesium@sz#

目录结构

二、源码格式

源码采用ES6语法，未压缩未加密，可读性强。

import PlotBase from "../../PlotBase"
import PlotTypes from "../../PlotTypes"
//面标绘 面标绘类是所有面状军事标绘的父类 默认贴对象
export default class Polygon extends PlotBase {
    constructor(viewer, geoFeature) {
        super(viewer, geoFeature);

        this.properties.plotType = PlotTypes.POLYGON; //标绘类型
        this.properties.plotName = "面"; //标绘名称
        this.generateEntity();
        this.minPointCount = 3;
    }

    //构造Entity
    generateEntity() {
        this.polygonEntity = this.viewer.entities.add({
            plotType: this.properties.plotBase,
            plotCode: this.properties.plotCode,
            polygon: {
                hierarchy: new Cesium.PolygonHierarchy(this.positions || []),
                material: Cesium.Color.YELLOW.withAlpha(0.6),
                classificationType: Cesium.ClassificationType.BOTH
            },
        });
    }

    //选中效果
    setSelected(selected) {
        if (selected) {
            this.polygonEntity.polygon.material = Cesium.Color.RED.withAlpha(0.8);
        } else {
            this.polygonEntity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.6);
        }
    }

    //构造点坐标
    generate() {
        var count = this.getPointCount();
        if (count < 2) {
            return;
        }
        this.generatePositions(this.coordinates[0]);
    }

    //开启或关闭编辑模式
    openEditMode(isEdit) {
        if (isEdit) {
            this.polygonEntity.polygon.hierarchy = new Cesium.CallbackProperty(e => {
                return new Cesium.PolygonHierarchy(this.positions || []);
            }, false);

            this.polygonEntity.polyline = {
                positions: new Cesium.CallbackProperty(e => {
                    if (this.positions && this.positions.length > 0)
                        return this.positions.concat(this.positions[0]);
                    else {
                        return [];
                    }
                }, false),
                width: 2,
                clampToGround: true,
                material: new Cesium.PolylineDashMaterialProperty({
                    color: Cesium.Color.YELLOW,
                }),
                depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
                    color: Cesium.Color.YELLOW,
                }),
            }
        } else {
            this.polygonEntity.polygon.hierarchy = new Cesium.PolygonHierarchy(this.positions || []);
            if (this.polygonEntity.polyline) this.polygonEntity.polyline.width = 0;
        }
    }

    //转到geojson对象 用于存储操作
    toGeoJson() {
        return {
            "type": "Feature",
            "properties": this.properties,
            "geometry": {
                "type": "Polygon",
                "coordinates": this.coordinates
            }
        }
    }

    //移除标绘对象
    remove() {
        this.viewer.entities.remove(this.polygonEntity);
    }
}

import LayerBase from "../Base"
import PlotFactory from "../../MilitaryPlot/PlotFactory"

//军事标绘图层类
export default class MilitaryPlotLayer extends LayerBase {
    constructor(viewer) {
        super(viewer);
        this.selectedPlotChanged = new Cesium.Event();
        this.initEvent();
    }

    //添加一个标绘
    addPlot(geoFeature) {
        let newPlot = PlotFactory.createPlot(this.viewer, geoFeature.properties.plotType, geoFeature);
        this.plots.push(newPlot);
        return newPlot;
    }

    //根据标绘编号飞行到标绘对象
    flyToByPlotCode(plotCode) {
        const plot = this.getByPlotCode(plotCode);
        if (!plot) {
            return;
        }
        this.setSelectedPlot(plot);
        //this.viewer.flyTo(plot.polygonEntity);//贴对象的面作为飞行目标飞行会不准确 所以新建一个不是贴对象的目标
        let flyTargetEntity = this.viewer.entities.add({
            polygon: {
                hierarchy: plot.positions,
                perPositionHeight: true,
                material: Cesium.Color.YELLOW.withAlpha(0.001),
                outline: false
            }
        });
        //飞行结束后将飞行目标删除
        this.viewer.flyTo(flyTargetEntity)
            .then(() => {
                this.viewer.entities.remove(flyTargetEntity);
            });
    }

    //设置标号选中
    setSelectedPlot(plot) {
        if (!this.plotSelecteable) return;
        if (this.selectedPlot) {
            this.selectedPlot.setSelected(false);
        }
        this.selectedPlot = plot;
        this.selectedPlot.setSelected(true);
        //触发选中事件
        this.selectedPlotChanged.raiseEvent(plot);
    }

    //清除选中标号
    clearSelectedPlot() {
        if (this.selectedPlot) {
            this.selectedPlot.setSelected(false);
            this.selectedPlot.openEditMode(false);
            this.selectedPlot = undefined;
        }
    }

    //初始化事件
    initEvent() {
        new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
            .setInputAction(e => {
                if (!this.plotSelecteable) return;
                let id = this.viewer.scene.pick(e.position);
                if (!id || !id.id) {
                    if (this.selectedPlot) {
                        this.selectedPlot.setSelected(false);
                        this.selectedPlot = undefined;
                        //触发选中事件
                        this.selectedPlotChanged.raiseEvent(undefined);
                    }
                    return; // 没有拾取到对象 直接返回 不做任何操作
                }
                // 拾取到对象 判断拾取到的对象类型
                if (!id.id || !id.id.type || id.id.type != "MilitaryPlot") {
                    if (this.selectedPlot) {
                        this.selectedPlot.setSelected(false);
                        this.selectedPlot = undefined;
                        //触发选中事件
                        this.selectedPlotChanged.raiseEvent(undefined);
                    }
                };

                //避免重复选择 
                if (this.selectedPlot && this.selectedPlot.properties.plotCode == id.id.plotCode) return;
                const plot = this.getByPlotCode(id.id.plotCode);
                if (!plot) {
                    if (this.selectedPlot) {
                        this.selectedPlot.setSelected(false);
                        this.selectedPlot = undefined;
                    }
                    //触发选中事件
                    this.selectedPlotChanged.raiseEvent(undefined);
                } else {
                    //触发选中事件
                    this.selectedPlot = plot;
                    this.selectedPlot.setSelected(true);
                    this.selectedPlotChanged.raiseEvent(plot);
                }

            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
}

三、源码获取方式

在线预览系统中点击 获取源码 按钮

在线预览地址 Cesium实战在线预览1 用户名cesium@sz 密码cesium@sz#