Cesium实战专栏说明
一、说明
Cesium实战专栏共20篇文章，来自于Cesium实战项目，基于Cesium1.7.2+VUE 实现，具有完整代码。
1.Cesium点线面实体绘制
2.Cesium点线面实体编辑
3.Cesium场景出图
4.Cesium自定义信息框
5.Cesium点聚合功能
6.Cesium轨迹回放功能
7.Cesium动态线、水流线效果
8.Cesium动态扩散圆效果
9.Cesium动态立体墙效果
10.Cesium雷达扫描效果
11.Cesium gltf标绘
12.Cesium gltf 标绘编辑
13.Cesium自定义html标注图层
14.Cesium建筑白模生成及高度调整
15.Cesium军事标绘绘制
16.Cesium军事标绘编辑
17.Cesium鼠标位置拾取工具封装
18.Echarts图层
19.Echarts动态水面
20.二维点转三维点
二、源码格式
源码采用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实战专栏 Cesium实战专栏 订阅后联系我获取，私信或者加我QQ