@go-home-early/go-home-early98 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of @go-home-early/go-home-early98 might be problematic. Click here for more details.

Files changed (56) hide show
  1. package/README.md +28 -16
  2. package/dist/go-home-early.umd.js +5 -5
  3. package/package.json +2 -16
  4. package/src/packages/Cesium/DrawMap/DrawJs/CesiumEntityEdit.js +427 -0
  5. package/src/packages/Cesium/DrawMap/DrawJs/CreatePolygonOnGround.js +202 -0
  6. package/src/packages/Cesium/DrawMap/DrawJs/DrawAttackArrow.js +477 -0
  7. package/src/packages/Cesium/DrawMap/DrawJs/DrawBillboard.js +114 -0
  8. package/src/packages/Cesium/DrawMap/DrawJs/DrawCircle.js +311 -0
  9. package/src/packages/Cesium/DrawMap/DrawJs/DrawCircleTY.js +237 -0
  10. package/src/packages/Cesium/DrawMap/DrawJs/DrawCurve.js +256 -0
  11. package/src/packages/Cesium/DrawMap/DrawJs/DrawPincerArrow.js +584 -0
  12. package/src/packages/Cesium/DrawMap/DrawJs/DrawPoint.js +158 -0
  13. package/src/packages/Cesium/DrawMap/DrawJs/DrawPolygon.js +215 -0
  14. package/src/packages/Cesium/DrawMap/DrawJs/DrawPolyline.js +213 -0
  15. package/src/packages/Cesium/DrawMap/DrawJs/DrawPolylineJT.js +218 -0
  16. package/src/packages/Cesium/DrawMap/DrawJs/DrawProFile.js +314 -0
  17. package/src/packages/Cesium/DrawMap/DrawJs/DrawRectangle.js +215 -0
  18. package/src/packages/Cesium/DrawMap/DrawJs/DrawstraightArrow.js +364 -0
  19. package/src/packages/Cesium/DrawMap/DrawJs/MeasurePolygon.js +337 -0
  20. package/src/packages/Cesium/DrawMap/DrawJs/MeasurePolyline.js +285 -0
  21. package/src/packages/Cesium/DrawMap/DrawJs/ReminderTip.js +78 -0
  22. package/src/packages/Cesium/DrawMap/DrawJs/SlopeAspect.js +436 -0
  23. package/src/packages/Cesium/DrawMap/DrawJs/measureLength.js +177 -0
  24. package/src/packages/Cesium/DrawMap/index.vue +272 -0
  25. package/src/packages/Cesium/components/LocationDialog.vue +283 -0
  26. package/src/packages/Cesium/components/Popup.vue +591 -0
  27. package/src/packages/Cesium/components/PoumianDialog.vue +200 -0
  28. package/src/packages/Cesium/imgs/add-off.png +0 -0
  29. package/src/packages/Cesium/imgs/add.png +0 -0
  30. package/src/packages/Cesium/imgs/circle.png +0 -0
  31. package/src/packages/Cesium/imgs/icon-position-blue.png +0 -0
  32. package/src/packages/Cesium/imgs/line.png +0 -0
  33. package/src/packages/Cesium/imgs/map-delete.png +0 -0
  34. package/src/packages/Cesium/imgs/map.png +0 -0
  35. package/src/packages/Cesium/imgs/orientation-bg.svg +14 -0
  36. package/src/packages/Cesium/imgs/orientation.svg +21 -0
  37. package/src/packages/Cesium/imgs/poi.png +0 -0
  38. package/src/packages/Cesium/imgs/point.png +0 -0
  39. package/src/packages/Cesium/imgs/polygon.png +0 -0
  40. package/src/packages/Cesium/imgs/popup/back-popup-img.png +0 -0
  41. package/src/packages/Cesium/imgs/popup/backimg-btn.png +0 -0
  42. package/src/packages/Cesium/imgs/popup/dialog-bd.png +0 -0
  43. package/src/packages/Cesium/imgs/popup/dialog-btn.png +0 -0
  44. package/src/packages/Cesium/imgs/popup/dialog-ft.png +0 -0
  45. package/src/packages/Cesium/imgs/popup/dialog-hd.png +0 -0
  46. package/src/packages/Cesium/imgs/reduce-off.png +0 -0
  47. package/src/packages/Cesium/index.md +292 -0
  48. package/src/packages/Cesium/index.vue +3830 -0
  49. package/src/packages/Cesium/materials/CircularDiffusionMaterialProperty.js +98 -0
  50. package/src/packages/Cesium/materials/CircularRippleMaterialProperty.js +126 -0
  51. package/src/packages/Cesium/materials/PolylineArrowMaterialProperty.js +109 -0
  52. package/src/packages/Cesium/utils/MeasureHeight.js +261 -0
  53. package/src/packages/Cesium/utils/MeasureTools.js +1188 -0
  54. package/src/packages/index.js +33 -0
  55. package/src/packages/utils/charts.js +54 -0
  56. package/src/packages/utils/index.js +50 -0
@@ -0,0 +1,200 @@
1
+ <!--
2
+ * @Description: 文件描述
3
+ * @Author: 傅霄玮
4
+ * @Date: 2025-03-10 15:51:42
5
+ * @LastEditors: zwt
6
+ * @LastEditTime: 2025-12-23 19:39:23
7
+ -->
8
+ <template>
9
+ <div style="width:100%;height:400px">
10
+ <div ref="chartRef" :id="params.id" :style="`width:100%;height:100%`" />
11
+ </div>
12
+ </template>
13
+ <script>
14
+ import echarts from "@/packages/utils/charts";
15
+ export default {
16
+ name: "PoumianDialog",
17
+ props: {
18
+ params: {
19
+ type: Object,
20
+ default: () => {
21
+ return {
22
+ id: "PoumianChart",
23
+ title: "",
24
+ data: [],
25
+ };
26
+ },
27
+ },
28
+ // 是否大屏使用组件
29
+ isCesium:{
30
+ type: Boolean,
31
+ default: true,
32
+ },
33
+ name: {
34
+ type: String,
35
+ default: '(时)',
36
+ },
37
+ },
38
+ data() {
39
+ return {
40
+ chart: null,
41
+ };
42
+ },
43
+ watch: {
44
+ params: {
45
+ handler() {
46
+ this.initChart();
47
+ },
48
+ deep: true,
49
+ },
50
+ },
51
+ created() {
52
+ if(this.isCesium){
53
+ this.$nextTick(() => {
54
+ // 解决scale导致悬浮框错位问题
55
+ this.$refs['chartRef'].style.zoom = 1 / this.getScale();
56
+ // this.$refs['chartRef'].style.transform = `scale(${this.params.scaleNum})`;
57
+ // this.$refs['chartRef'].style.transformOrigin = '0 0';
58
+ this.initChart();
59
+ });
60
+ }
61
+ },
62
+ beforeDestroy() {
63
+ if (!this.chart) {
64
+ return;
65
+ }
66
+ this.chart.dispose();
67
+ this.chart = null;
68
+ },
69
+ methods: {
70
+ getScale() {
71
+ const w = window.innerWidth / 2469;
72
+ const h = window.innerHeight / 1389;
73
+ // const w = window.innerWidth / 1920;
74
+ // const h = window.innerHeight / 840;
75
+ // 屏幕变化
76
+ this.width = window.innerWidth + "px";
77
+ this.height = window.innerHeight + "px";
78
+ // this.$emit('onresize');
79
+ // return w < h ? w : h;
80
+ return h;
81
+ // return 1;
82
+ },
83
+
84
+ initChart() {
85
+
86
+ this.chart && this.chart.dispose();
87
+ this.chart = echarts.init(document.getElementById(this.params.id));
88
+ let _this = this;
89
+ let option = {
90
+ tooltip: {
91
+ trigger: 'axis',
92
+ },
93
+ legend: {
94
+ show: false,
95
+ },
96
+ grid: {
97
+ top: '15%',
98
+ left: '0',
99
+ right: '3%',
100
+ bottom: '5%',
101
+ containLabel: true,
102
+ show: false // 不显示网格
103
+ },
104
+ xAxis: {
105
+ type: 'category',
106
+ boundaryGap: false,
107
+ data: this.params.data.map((v) => { return v.title; }),
108
+ splitLine: {
109
+ show: false, //控制分割线是否显示
110
+ },
111
+ axisLine: {
112
+ show: false,
113
+ lineStyle: { //分割线的样式
114
+ color: '#00a870',
115
+ }
116
+ },
117
+ axisLabel: {
118
+ //x轴文字的配置
119
+ show: false,
120
+ interval: 0,
121
+ textStyle: {
122
+ color: "#fff",
123
+ fontSize: 16,
124
+ },
125
+ },
126
+ },
127
+ yAxis: {
128
+ type: 'value',
129
+ name: "(米)",
130
+ minInterval: 1,
131
+ nameTextStyle: {
132
+ color: "#fff",
133
+ fontSize: 16,
134
+ align: "right",
135
+ },
136
+ splitLine: { show: false }, // 去除y轴网格线
137
+ axisLine: {
138
+ show: true,
139
+ lineStyle: { //分割线的样式
140
+ color: '#00a870',
141
+ }
142
+ },
143
+ axisLabel: {
144
+ //y轴文字的配置
145
+ show: true,
146
+ textStyle: {
147
+ color: "#fff",
148
+ fontSize: 16,
149
+ },
150
+ },
151
+ },
152
+ series: [
153
+ {
154
+ name: '海拔',
155
+ type: 'line',
156
+ data: this.params.data.map((v) => { return v.value; }),
157
+ symbol: 'none', // 设置为 'none' 去除折线图的点位标记
158
+ areaStyle: {
159
+ color: {
160
+ type: 'linear',
161
+ x: 0,
162
+ y: 0,
163
+ x2: 0,
164
+ y2: 1,
165
+ colorStops: [{
166
+ offset: 0, color: 'rgba(7, 153, 255, 1)' // 100% 处的颜色
167
+ }, {
168
+ offset: 1, color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
169
+ }],
170
+ global: false // 缺省为 false
171
+ }
172
+ },
173
+ color: '#0767ff', //线条颜色
174
+ smooth: true //线条平滑
175
+ },
176
+ ]
177
+ };
178
+
179
+ this.chart.setOption(option);
180
+
181
+ this.chart.on("click", (params) => {
182
+ // 点击事件回调函数实现
183
+ // console.log(params);
184
+ // this.$emit("handleLzbDialog", params.data);
185
+ });
186
+
187
+ // setTimeout(() => {
188
+ // this.chart.resize();
189
+ // }, 2000);
190
+
191
+
192
+
193
+ },
194
+ },
195
+ }
196
+ </script>
197
+ <style lang="scss" scoped>
198
+ .dialog {
199
+ }
200
+ </style>
Binary file
Binary file
@@ -0,0 +1,14 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="40px" height="43px" viewBox="0 0 40 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <title>编组 44</title>
4
+ <g id="M1-添加" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5
+ <g id="全景图&amp;超解析照片" transform="translate(-873.000000, -2462.000000)">
6
+ <g id="2图标/map/compass备份-12" transform="translate(863.000000, 2455.000000)">
7
+ <g id="编组-44" transform="translate(10.000000, 7.000000)">
8
+ <circle id="椭圆形备份-2" stroke="#A2A2A2" stroke-width="1.5" fill="#FFFFFF" cx="20" cy="23" r="19.25"></circle>
9
+ <polygon id="三角形" fill="#E02020" points="20 0 33 8 7 8"></polygon>
10
+ </g>
11
+ </g>
12
+ </g>
13
+ </g>
14
+ </svg>
@@ -0,0 +1,21 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <title>编组 43</title>
4
+ <defs>
5
+ <circle id="path-1" cx="30" cy="30" r="30"></circle>
6
+ </defs>
7
+ <g id="M1-添加" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8
+ <g id="全景图&amp;超解析照片" transform="translate(-863.000000, -2455.000000)">
9
+ <g id="编组-43" transform="translate(863.000000, 2455.000000)">
10
+ <mask id="mask-2" fill="white">
11
+ <use xlink:href="#path-1"></use>
12
+ </mask>
13
+ <use id="椭圆形" fill="#FFFFFF" xlink:href="#path-1"></use>
14
+ <polygon id="N" fill="#4E4E4E" fill-rule="nonzero" mask="url(#mask-2)" points="29.0742188 6.7265625 29.0742188 2.9921875 31.3828125 6.7265625 32.5429688 6.7265625 32.5429688 1 31.46875 1 31.46875 4.82421875 29.125 1 28 1 28 6.7265625"></polygon>
15
+ <path d="M30.3632812,57.9257812 C30.8606771,57.9257812 31.2760417,57.8561198 31.609375,57.7167969 C31.9427083,57.577474 32.2005208,57.3645833 32.3828125,57.078125 C32.5651042,56.7916667 32.65625,56.484375 32.65625,56.15625 C32.65625,55.7942708 32.5800781,55.4902344 32.4277344,55.2441406 C32.2753906,54.9980469 32.0644531,54.8040365 31.7949219,54.6621094 C31.5253906,54.5201823 31.109375,54.3828125 30.546875,54.25 C29.984375,54.1171875 29.6302083,53.9895833 29.484375,53.8671875 C29.3697917,53.7708333 29.3125,53.6549479 29.3125,53.5195312 C29.3125,53.3710938 29.3736979,53.2526042 29.4960938,53.1640625 C29.6861979,53.0260417 29.9492188,52.9570312 30.2851562,52.9570312 C30.6106771,52.9570312 30.8548177,53.0214844 31.0175781,53.1503906 C31.1803385,53.2792969 31.2864583,53.4908854 31.3359375,53.7851562 L31.3359375,53.7851562 L32.4921875,53.734375 C32.4739583,53.2083333 32.2832031,52.7877604 31.9199219,52.4726562 C31.5566406,52.1575521 31.015625,52 30.296875,52 C29.8567708,52 29.4811198,52.0664062 29.1699219,52.1992188 C28.858724,52.3320312 28.6204427,52.5253906 28.4550781,52.7792969 C28.2897135,53.0332031 28.2070312,53.3059896 28.2070312,53.5976562 C28.2070312,54.0507812 28.3828125,54.4348958 28.734375,54.75 C28.984375,54.9739583 29.4192708,55.1627604 30.0390625,55.3164062 C30.5208333,55.4361979 30.8294271,55.5195312 30.9648438,55.5664062 C31.1627604,55.6367188 31.3014323,55.719401 31.3808594,55.8144531 C31.4602865,55.9095052 31.5,56.0247396 31.5,56.1601562 C31.5,56.3710938 31.405599,56.5553385 31.2167969,56.7128906 C31.0279948,56.8704427 30.7473958,56.9492188 30.375,56.9492188 C30.0234375,56.9492188 29.7441406,56.8606771 29.5371094,56.6835938 C29.3300781,56.5065104 29.1927083,56.2291667 29.125,55.8515625 L29.125,55.8515625 L28,55.9609375 C28.0755208,56.6015625 28.3072917,57.0891927 28.6953125,57.4238281 C29.0833333,57.7584635 29.6393229,57.9257812 30.3632812,57.9257812 Z" id="S" fill="#4E4E4E" fill-rule="nonzero" mask="url(#mask-2)" transform="translate(30.328125, 54.962891) rotate(180.000000) translate(-30.328125, -54.962891) "></path>
16
+ <polygon id="W" fill="#4E4E4E" fill-rule="nonzero" mask="url(#mask-2)" transform="translate(5.757812, 29.863281) rotate(-90.000000) translate(-5.757812, -29.863281) " points="4.62109375 32.7265625 5.7578125 28.4453125 6.8984375 32.7265625 8.125 32.7265625 9.515625 27 8.3515625 27 7.47265625 31 6.46875 27 5.09375 27 4.046875 30.9335938 3.18359375 27 2 27 3.3671875 32.7265625"></polygon>
17
+ <polygon id="E" fill="#4E4E4E" fill-rule="nonzero" mask="url(#mask-2)" transform="translate(55.177734, 29.863281) rotate(90.000000) translate(-55.177734, -29.863281) " points="57.3554688 32.7265625 57.3554688 31.7617188 54.15625 31.7617188 54.15625 30.203125 57.03125 30.203125 57.03125 29.2382812 54.15625 29.2382812 54.15625 27.96875 57.2460938 27.96875 57.2460938 27 53 27 53 32.7265625"></polygon>
18
+ </g>
19
+ </g>
20
+ </g>
21
+ </svg>
Binary file
@@ -0,0 +1,292 @@
1
+ # 🗺️ Cesium 地图组件封装文档
2
+
3
+ 本文档记录了 Cesium 地图组件的封装方法、常用功能以及图层叠加的步骤。
4
+
5
+ > **📝 注意**: 当前项目使用 `index.vue`,`index1.vue` 作为未经修改的原始副本。
6
+
7
+ ---
8
+
9
+ ## 📚 目录
10
+
11
+ - [🛠️ 常用方法简介](#️-常用方法简介)
12
+ - [⚙️ Props](#️-props)
13
+ - [🎨 图层类型](#️-图层类型)
14
+ - [🔗 图层、数据源与实体的关系](#️-图层数据源与实体的关系)
15
+ - [🌐 坐标格式](#️-坐标格式)
16
+ - [🎯 初始定位](#️-初始定位)
17
+ - [🖱️ 点击事件](#️-点击事件)
18
+ - [🏗️ 核心架构层次](#️-核心架构层次)
19
+ - [🖌️ 实体样式详解](#️-实体样式详解)
20
+
21
+ ---
22
+
23
+ ## 🛠️ 常用方法简介
24
+
25
+ `changeMapMode()`
26
+ : 在二维和三维模式之间切换地图。
27
+
28
+ `getCameraView()`
29
+ : 获取当前相机的参数。
30
+
31
+ `addB3dmLayer()`
32
+ : 叠加 B3DM 模型图层。
33
+
34
+ `addWmsLayer()`
35
+ : 叠加 WMS 图层。
36
+
37
+ `delWmsLayer(wmsLayerObject)`
38
+ : 删除指定的 WMS 图层。
39
+
40
+ `clearDrawLayer(drawLayerObject)`
41
+ : 清除绘制的图层。
42
+
43
+ `extentFromWkt(wkt)`
44
+ : 根据 WKT 格式数据计算四至范围,返回 `{west, south, east, north, width, height}`。
45
+
46
+ `addWktLayer(wkt)`
47
+ : 根据 WKT 格式数据叠加图层,并返回图层对象。
48
+
49
+ `drawLayer()`
50
+ : 绘制图层。绘制的图层对象会存入 `drawLayerObj` 中,可通过 `drawLayerObj[name]` 获取。
51
+
52
+ `toDegrees(radians)`
53
+ : 将 Cartographic (大地坐标) 的弧度值转换为经纬度角度值。
54
+
55
+ `formatWktToPoint(wkt)`
56
+ : 将 `POINT(114.19 26.52)` 格式的 WKT 字符串转换为 `['114.19', '26.52']` 格式的数组。
57
+
58
+ `setView(cameraOptions)`
59
+ : 设置相机位置。传入参数对象 `{longitude, latitude, height, heading, pitch, roll}`。
60
+
61
+ `changeStreetSelector()`
62
+ : 切换路网注记图层的显示状态。
63
+
64
+ `getPointHeight()`
65
+ : 获取单个点的高度。
66
+
67
+ `getTerrainHeight(pointsArray)`
68
+ : 批量获取点的高度。传入 `[{longitude, latitude}, ...]` 数组,返回 Cartographic 对象数组。
69
+
70
+ `setClockTime()`
71
+ : 设置时钟时间。
72
+
73
+ `startClock()`
74
+ : 启动时钟。
75
+
76
+ `stopClock()`
77
+ : 停止时钟。
78
+
79
+ `getWKTByCoordinates(coordinates)`
80
+ : 将 Cartesian3 (笛卡尔坐标) 或 `[lng, lat]` 数组转换为 WKT 格式。
81
+
82
+ `calculatePolygonCentroid()`
83
+ : 计算多边形的中心坐标。
84
+
85
+ `setWmsLayerVisible(options)`
86
+ : 设置 WMS 图层的可见性。传入 `{name: '图层名称', active: true/false}`。
87
+
88
+ `storeViewer(viewer)`
89
+ : 存储当前视角的相机参数(位置、航向角、俯仰角、翻滚角)。
90
+
91
+ `flyToDefault()`
92
+ : 定位到默认的地图范围和视角。
93
+
94
+ `handleZoomIn()`
95
+ : 放大地图。
96
+
97
+ `handleZoomOut()`
98
+ : 缩小地图。
99
+
100
+ `dmsToDegrees()`
101
+ : 将度分秒格式的坐标 `117° 47' 16.85"` 转换为角度格式 `'114.19'`。
102
+
103
+ ---
104
+
105
+ ## ⚙️ Props
106
+
107
+ - `scale` (Number): 当地图容器被缩放时,需传入此缩放比例以进行兼容性调整。
108
+
109
+ ---
110
+
111
+ ## 🎨 图层类型
112
+
113
+ Cesium 中主要包含以下几种图层集合:
114
+
115
+ 1. `viewer.imageryLayers` (影像图层 - `ImageryLayer`): 存储底图或叠加影像(如卫星图、电子地图)。
116
+ 2. `viewer.terrainLayers` (地形图层 - `TerrainLayer`): 存储地形高程数据,实现三维起伏效果。
117
+ 3. `viewer.scene.layers` (矢量图层 - `VectorLayer`): 存储点、线、面等业务矢量数据。
118
+ 4. `viewer.scene.primitives` (3D 瓦片图层 - `Cesium3DTileset`): 存储大规模 3D 模型(如城市建筑、BIM)。
119
+
120
+ ---
121
+
122
+ ## 🔗 图层、数据源与实体的关系
123
+
124
+ - **关系**: `Entity` 是数据本身,`DataSource` 是装载数据的容器,而 `Layer` 是将容器中的数据展示到地图上的工具。
125
+ - `drawLayer()` 和 `addWktLayer()` 方法都是通过新建数据源并向其中添加实体来工作的。
126
+
127
+ - **叠加图层流程**:
128
+ 1. 新建数据源 (`DataSource`)。
129
+ 2. 向数据源中添加实体 (`Entity`)。
130
+ 3. (可选) 根据数据源创建图层。
131
+ 4. 将数据源或图层添加到地图中。
132
+
133
+ ---
134
+
135
+ ## 🌐 坐标格式
136
+
137
+ #### WKT (Well-Known Text)
138
+ - **点**: `Point(116.404 39.915)`
139
+ - **线**: `LineString(116.4 39.9, 116.5 39.9)`
140
+ - **面**: `Polygon((116.3 39.8, 116.5 39.8, 116.5 40.0, 116.3 40.0, 116.3 39.8))`
141
+
142
+ #### Cartesian3 (笛卡尔坐标)
143
+ - **描述**: 3D 空间直角坐标 `{x, y, z}`。
144
+ - **示例**: `Cartesian3 {x: -2595227.67, y: 5019910.97, z: 2948667.96}`
145
+
146
+ #### Cartographic (大地坐标)
147
+ - **描述**: 使用经度、纬度和高度表示,单位为弧度。
148
+ - **示例**: `{longitude: 2.049, latitude: 0.481, height: 939.80}`
149
+
150
+ #### 经纬度坐标 (角度)
151
+ - **描述**: 常用的地理坐标,单位为度。
152
+ - **示例**: `117.400, 27.604`
153
+
154
+ #### 经纬度坐标 (度分秒)
155
+ - **描述**: 将度进行细分的格式。
156
+ - **示例**: `117° 47' 16.85", 26° 53' 4.84"`
157
+
158
+ #### 转换关系
159
+
160
+ 笛卡尔坐标 (Cartesian3) ↔ 大地坐标 (Cartographic) ↔ 角度/度分秒
161
+
162
+ ---
163
+
164
+ ## 🎯 初始定位
165
+
166
+ - `initFlyTo()`: 用于初始化相机的定位。
167
+
168
+ ---
169
+
170
+ ## 🖱️ 点击事件
171
+
172
+ 创建点击事件的流程如下:
173
+
174
+ ```javascript
175
+ // 1. 创建屏幕空间事件处理器
176
+ const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
177
+
178
+ // 2. 添加点击事件监听
179
+ handler.setInputAction((event) => {
180
+ // ...业务逻辑
181
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 鼠标左键点击
182
+ ```
183
+
184
+ ---
185
+
186
+ ## 🏗️ 核心架构层次
187
+
188
+ Cesium 的架构自下而上分为六层:
189
+
190
+ 1. **基础核心层 (Core)**: 数学/地理计算基石。
191
+ 2. **渲染抽象层 (Renderer)**: WebGL 封装。
192
+ 3. **场景核心层 (Scene)**: 3D 场景管理。
193
+ 4. **动态场景层 (Dynamic Scene)**: 动态可视化。
194
+ 5. **数据管理层 (DataSources)**: 外部数据解析。
195
+ 6. **UI 层 (Viewer/Widgets)**: 开发者入口。
196
+
197
+ ### 📖分层详解
198
+
199
+ > #### 1. 基础核心层 (Core)
200
+ > - **职责**: 提供数学运算、坐标转换、时间与矩阵计算等底层能力。
201
+ > - **关键模块**: `Cartesian3`, `Cartographic`, `Matrix4`, `Transforms`, `Math`。
202
+
203
+ > #### 2. 渲染抽象层 (Renderer)
204
+ > - **职责**: 封装 WebGL,管理着色器、纹理、渲染命令队列,最终输出像素到 Canvas。
205
+ > - **关键模块**: `Context`, `ShaderProgram`, `DrawCommand`, `RenderState`。
206
+
207
+ > #### 3. 场景核心层 (Scene)
208
+ > - **职责**: 组织相机、光照、地形、影像、图元等,并将场景转译为渲染命令。
209
+ > - **关键模块**: `Scene`, `Camera`, `Globe`, `PrimitiveCollection`, `Cesium3DTileset`。
210
+
211
+ > #### 4. 动态场景层 (Dynamic Scene)
212
+ > - **职责**: 基于时间轴,将随时间变化的实体属性解析成每帧的可渲染状态。
213
+ > - **关键模块**: `Clock`, `Timeline`, `DataSourceDisplay`, `SampledPositionProperty`。
214
+
215
+ > #### 5. 数据管理层 (DataSources)
216
+ > - **职责**: 解析外部数据 (GeoJSON/CZML/KML) 为统一的 `Entity` 模型。
217
+ > - **关键模块**: `GeoJsonDataSource`, `CzmlDataSource`, `CustomDataSource`, `Entity`。
218
+
219
+ > #### 6. UI 层 (Viewer/Widgets)
220
+ > - **职责**: 对外暴露统一入口,集成场景、数据源、控件与交互。
221
+ > - **关键模块**: `Viewer`, `Widget`, `ScreenSpaceEventHandler`。
222
+
223
+ ---
224
+
225
+ ## 🖌️ 实体样式详解
226
+
227
+ ### 📍 点实体 (Billboard)
228
+
229
+ | 名称 | 类型 | 默认值 | 说明 |
230
+ | --- | --- | --- | --- |
231
+ | `show` | `Property` | `true` | 是否可见。 |
232
+ | `image` | `Property` | `undefined` | 图片的 URI 或 Canvas。 |
233
+ | `scale` | `Property` | `1.0` | 图片缩放比例。 |
234
+ | `pixelOffset` | `Property` | `Cartesian2.ZERO` | 像素偏移量。 |
235
+ | `eyeOffset` | `Property` | `Cartesian3.ZERO` | 视点偏移量。 |
236
+ | `horizontalOrigin` | `Property` | `HorizontalOrigin.CENTER` | 水平对齐方式。 |
237
+ | `verticalOrigin` | `Property` | `VerticalOrigin.CENTER` | 垂直对齐方式。 |
238
+ | `heightReference` | `Property` | `HeightReference.NONE` | 高度参考系。 |
239
+ | `color` | `Property` | `Color.WHITE` | 图片色调。 |
240
+ | `rotation` | `Property` | `0` | 旋转角度。 |
241
+ | `alignedAxis` | `Property` | `Cartesian3.ZERO` | 旋转轴。 |
242
+ | `sizeInMeters` | `Property` | `undefined` | 尺寸是否以米为单位。 |
243
+ | `width` | `Property` | `undefined` | 覆盖图片原始宽度(像素)。 |
244
+ | `height` | `Property` | `undefined` | 覆盖图片原始高度(像素)。 |
245
+ | `scaleByDistance` | `Property` | `undefined` | 根据距离缩放的 `NearFarScalar` 属性。 |
246
+ | `translucencyByDistance` | `Property` | `undefined` | 根据距离设置半透明度的 `NearFarScalar` 属性。 |
247
+ | `pixelOffsetScaleByDistance` | `Property` | `undefined` | 根据距离缩放像素偏移的 `NearFarScalar` 属性。 |
248
+ | `imageSubRegion` | `Property` | `undefined` | 定义图片子区域的 `BoundingRectangle`。 |
249
+ | `distanceDisplayCondition` | `Property` | `undefined` | 控制可见性的距离条件。 |
250
+ | `disableDepthTestDistance` | `Property` | `undefined` | 在指定距离禁用深度测试。 |
251
+
252
+ ### 🏞️ 面实体 (Polygon)
253
+
254
+ | 名称 | 类型 | 默认值 | 说明 |
255
+ | --- | --- | --- | --- |
256
+ | `show` | `Property` | `true` | 是否可见。 |
257
+ | `hierarchy` | `Property` | `—` | 定义多边形轮廓的 `PolygonHierarchy`。 |
258
+ | `height` | `Property` | `0` | 相对于椭球表面的高度。 |
259
+ | `heightReference` | `Property` | `HeightReference.NONE` | 高度参考系。 |
260
+ | `extrudedHeight` | `Property` | `—` | 拉伸后的顶部高度。 |
261
+ | `extrudedHeightReference` | `Property` | `HeightReference.NONE` | 拉伸高度的参考系。 |
262
+ | `stRotation` | `Property` | `0.0` | 纹理的旋转角度。 |
263
+ | `granularity` | `Property` | `Cesium.Math.RADIANS_PER_DEGREE` | 顶点之间的角度距离。 |
264
+ | `fill` | `Property` | `true` | 是否填充。 |
265
+ | `material` | `MaterialProperty` | `Color.WHITE` | 填充材质。 |
266
+ | `outline` | `Property` | `false` | 是否显示轮廓。 |
267
+ | `outlineColor` | `Property` | `Color.BLACK` | 轮廓颜色。 |
268
+ | `outlineWidth` | `Property` | `1.0` | 轮廓宽度。 |
269
+ | `perPositionHeight` | `Property` | `false` | 是否使用每个顶点的独立高度。 |
270
+ | `closeTop` | `Boolean` | `true` | 是否闭合拉伸体的顶部。 |
271
+ | `closeBottom` | `Boolean` | `true` | 是否闭合拉伸体的底部。 |
272
+ | `arcType` | `Property` | `ArcType.GEODESIC` | 边的线型(测地线、罗盘方位线)。 |
273
+ | `shadows` | `Property` | `ShadowMode.DISABLED` | 阴影模式。 |
274
+ | `distanceDisplayCondition` | `Property` | `—` | 控制可见性的距离条件。 |
275
+ | `classificationType` | `Property` | `ClassificationType.BOTH` | 分类类型(地形、3D瓦片或两者)。 |
276
+
277
+ ### 〰️ 线实体 (Polyline)
278
+
279
+ | 名称 | 类型 | 默认值 | 说明 |
280
+ | --- | --- | --- | --- |
281
+ | `show` | `Property` | `true` | 是否可见。 |
282
+ | `positions` | `Property` | `—` | 定义线段的 `Cartesian3` 坐标数组。 |
283
+ | `width` | `Property` | `1.0` | 线宽(像素)。 |
284
+ | `granularity` | `Property` | `Cesium.Math.RADIANS_PER_DEGREE` | 顶点间的角度距离。 |
285
+ | `material` | `MaterialProperty` | `Color.WHITE` | 线的材质。 |
286
+ | `depthFailMaterial` | `MaterialProperty` | `—` | 当线在地形下方时使用的材质。 |
287
+ | `arcType` | `ArcType` | `ArcType.GEODESIC` | 边的线型。 |
288
+ | `clampToGround` | `Property` | `false` | 是否贴地。 |
289
+ | `shadows` | `Property` | `ShadowMode.DISABLED` | 阴影模式。 |
290
+ | `distanceDisplayCondition` | `Property` | `—` | 控制可见性的距离条件。 |
291
+ | `classificationType` | `Property` | `ClassificationType.BOTH` | 分类类型。 |
292
+ | `zIndex` | `Property` | `0` | `clampToGround` 为 true 时的 Z-index 排序。 |