ino-cesium 0.0.16 → 0.0.17-beta.1

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.
Files changed (5) hide show
  1. package/README.MD +275 -181
  2. package/dist/ino-cesium-full.js +1 -1
  3. package/dist/ino-cesium.d.ts +38 -5
  4. package/dist/ino-cesium.js +1 -1
  5. package/package.json +8 -8
package/README.MD CHANGED
@@ -1,181 +1,275 @@
1
- # ino-cesium
2
-
3
- * TS开发，无框架束缚。
4
- * [@ino-cesium/common](https://www.npmjs.com/package/@ino-cesium/common) 公共基础包
5
- * [@ino-cesium/draw](https://www.npmjs.com/package/@ino-cesium/draw) 绘制, 量测
6
- * [@ino-cesium/layers](https://www.npmjs.com/package/@ino-cesium/layers) 各类图层加载
7
- * [@ino-cesium/material](https://www.npmjs.com/package/@ino-cesium/material) 自定义材质
8
- * [@ino-cesium/primitive](https://www.npmjs.com/package/@ino-cesium/primitive) 自定义primitive
9
- * [@ino-cesium/analysis](https://www.npmjs.com/package/@ino-cesium/analysis) 客户端分析
10
- * [@ino-cesium/effects](https://www.npmjs.com/package/@ino-cesium/effects) 后期处理，特效
11
-
12
- ## 安装
13
- ```shell
14
- pnpm install cesium ino-cesium
15
-
16
- // vite
17
- pnpm install vite-plugin-cesiumjs
18
- import Cesiumjs from 'vite-plugin-cesiumjs'
19
-
20
- plugins: [
21
- Cesiumjs(),
22
- ],
23
-
24
- ```
25
-
26
- ## 创建cesium
27
-
28
- ### 初始化
29
- ```javascript
30
-
31
- import 'ino-cesium/ino-css'
32
-
33
- import { initCesium } from "ino-cesium";
34
-
35
- const viewer = initCesium('cesium-container',{
36
- token:'cesium token',
37
- // cesium 配置项
38
- animation: false, // 是否创建动画小器件，左下角仪表
39
- baseLayerPicker: false, // 是否显示图层选择器
40
- fullscreenButton: false, // 是否显示全屏按钮
41
- geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
42
- ...
43
- })
44
-
45
- ```
46
-
47
- ### 事件监听
48
-
49
- ``` ts
50
- initCesiumEvent(viewer, {
51
- // 左键获取位置，经纬度，笛卡尔,当前视角，鼠标位置
52
- LEFT_POSITION: (e) => {
53
- },
54
- // 左键拾取要素
55
- PICK_FEATURE: (pickModel,feature) => {
56
- },
57
- // 鼠标移动获取位置，经纬度，笛卡尔,当前视角，鼠标位置
58
- MOVE_POSITION: (e) => {
59
- },
60
- // 鼠标移动拾取要素
61
- MOVE_PICK_FEATURE: (pickModel, feature) => {
62
- },
63
- })
64
- ```
65
-
66
- ## 测绘
67
-
68
- ### 初始化
69
- ``` ts
70
-
71
- // 创建绘制工具
72
- const drawHadler = createDrawHandler(viewer)
73
-
74
- // 绘制
75
- drawHadler.draw({
76
- // "polyline" | "polygon" | "point" | "circle" | "rectangle" | "vertical-line" | "vertical-surface-line"
77
- shape: "polyline", // 绘制形状
78
- edit: true, // 是否可编辑
79
- measure: true, // 是否可测量
80
- measureLabel: true, // 是否显示测量结果
81
- measureUnit: ['m','㎡'], // 测量单位 [距离测量单位，面积测量单位]
82
- clampToGround: false, // 是否贴地
83
- })
84
- ```
85
-
86
- ### 绘制类型
87
- ``` shell
88
- 'polyline' 线 距离测量
89
- 'polygon' 面 面积测量
90
- 'point' 点 经纬度测量
91
- 'circle' 圆 面积测量
92
- 'rectangle' 矩形 面积测量
93
- 'vertical-line' 垂直线 高度测量
94
- 'vertical-surface-line' 离地垂直线 离地高度测量
95
- ```
96
-
97
- ### 事件监听
98
-
99
- ``` ts
100
- drawHadler.Event.drawEnd = (drawData) => {
101
- console.log('drawEnd', drawData)
102
- }
103
-
104
- drawHadler.Event.drawEditEnd = (drawData) => {
105
- console.log('drawEditEnd', drawData)
106
- }
107
-
108
- drawHadler.Event.drawRemove = (drawData) => {
109
- console.log('drawRemove', drawData)
110
- }
111
-
112
- ```
113
-
114
- ### 删除
115
-
116
- ``` ts
117
- // 删除绘制
118
- drawHadler.remove(drawData)
119
-
120
- // 删除所有绘制
121
- drawHadler.removeAll()
122
-
123
- ```
124
-
125
- ### 设置测量样式
126
- ```javascript
127
- // 测量点，线，面样式默认值
128
- drawHadler.setDrawStyle({
129
- point: {
130
- color: 'rgba(255,255,0,0.8)',
131
- pixelSize: 8,
132
- outlineColor: 'rgba(255,255,255,0.8)',
133
- outlineWidth: 2,
134
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
135
- },
136
- polyline: {
137
- width: 2,
138
- color: 'rgba(81,255,0,0.8)',
139
- depthFailColor: 'rgba(255,0,0,0.5)',
140
- },
141
- polygon: {
142
- color: 'rgba(255,255,54,0.3)',
143
- depthFailColor: 'rgba(255,0,0,0.3)',
144
- },
145
- })
146
-
147
- ```
148
- ### 测量单位
149
- ```javascript
150
- // 距离单位
151
- const DistanceUnits = {
152
- cm: 'cm',
153
- 厘米: '厘米',
154
- m: 'm',
155
- 米: '米',
156
- km: 'km',
157
- 千米: '千米',
158
- 公里: '公里',
159
- }
160
- // 面积单位
161
- const AreaUnits = {
162
- cm2: '㎡',
163
- 平方厘米: '平方厘米',
164
- m2: '㎡',
165
- 平方米: '平方米',
166
- km2: 'km²',
167
- 平方千米: '平方千米',
168
- 平方公里: '平方公里',
169
- 亩: '亩',
170
- 公顷: '公顷',
171
- }
172
- // 距离单位映射面积单位默认值
173
- const UnitDisAndAreaMap = {
174
- cm: 'cm²',
175
- m: '㎡',
176
- km: 'km²',
177
- 米: '平方米',
178
- 千米: '平方千米',
179
- 公里: '平方公里',
180
- }
181
- ```
1
+ # ino-cesium
2
+
3
+
4
+ extend for Cesium
5
+
6
+ * [@ino-cesium/common](https://www.npmjs.com/package/@ino-cesium/common) 公共基础包
7
+ * [@ino-cesium/draw](https://www.npmjs.com/package/@ino-cesium/draw) 绘制, 量测
8
+ * [@ino-cesium/layers](https://www.npmjs.com/package/@ino-cesium/layers) 各类图层加载
9
+ * [@ino-cesium/material](https://www.npmjs.com/package/@ino-cesium/material) 自定义材质
10
+ * [@ino-cesium/primitive](https://www.npmjs.com/package/@ino-cesium/primitive) 自定义primitive
11
+ * [@ino-cesium/analysis](https://www.npmjs.com/package/@ino-cesium/analysis) 客户端分析
12
+ * [@ino-cesium/effects](https://www.npmjs.com/package/@ino-cesium/effects) 后期处理，特效
13
+
14
+ ## 安装
15
+ ```shell
16
+ pnpm install cesium ino-cesium
17
+
18
+ // vite
19
+ pnpm install vite-plugin-cesiumjs
20
+ import Cesiumjs from 'vite-plugin-cesiumjs'
21
+
22
+ plugins: [
23
+ Cesiumjs(),
24
+ ],
25
+
26
+ ```
27
+
28
+ ## 创建cesium
29
+
30
+ ### 初始化
31
+ ```javascript
32
+
33
+ import 'ino-cesium/ino-css'
34
+
35
+ import { initCesium } from "ino-cesium";
36
+
37
+ const viewer = initCesium('cesium-container',{
38
+ token:'cesium token',
39
+ // cesium 配置项
40
+ animation: false, // 是否创建动画小器件，左下角仪表
41
+ baseLayerPicker: false, // 是否显示图层选择器
42
+ fullscreenButton: false, // 是否显示全屏按钮
43
+ geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
44
+ ...
45
+ })
46
+
47
+ ```
48
+
49
+ ### 事件监听
50
+
51
+ ``` ts
52
+ initCesiumEvent(viewer, {
53
+ // 左键获取位置，经纬度，笛卡尔,当前视角，鼠标位置
54
+ LEFT_POSITION: (e) => {
55
+ },
56
+ // 左键拾取要素
57
+ PICK_FEATURE: (pickModel,feature) => {
58
+ },
59
+ // 鼠标移动获取位置，经纬度，笛卡尔,当前视角，鼠标位置
60
+ MOVE_POSITION: (e) => {
61
+ },
62
+ // 鼠标移动拾取要素
63
+ MOVE_PICK_FEATURE: (pickModel, feature) => {
64
+ },
65
+ })
66
+ ```
67
+
68
+ ## 测绘
69
+
70
+ ### 初始化
71
+ ``` ts
72
+
73
+ // 创建绘制工具
74
+ const drawHadler = createDrawHandler(viewer)
75
+
76
+ // 绘制
77
+ drawHadler.draw({
78
+ // "polyline" | "polygon" | "point" | "circle" | "rectangle" | "vertical-line" | "vertical-surface-line"
79
+ shape: "polyline", // 绘制形状
80
+ edit: true, // 是否可编辑
81
+ measure: true, // 是否可测量
82
+ measureLabel: true, // 是否显示测量结果
83
+ measureUnit: ['m','㎡'], // 测量单位 [距离测量单位，面积测量单位]
84
+ clampToGround: false, // 是否贴地
85
+ })
86
+ ```
87
+
88
+ ### 绘制类型
89
+ ``` shell
90
+ 'polyline' 线 距离测量
91
+ 'polygon' 面 面积测量
92
+ 'point' 点 经纬度测量
93
+ 'circle' 圆 面积测量
94
+ 'rectangle' 矩形 面积测量
95
+ 'vertical-line' 垂直线 高度测量
96
+ 'vertical-surface-line' 离地垂直线 离地高度测量
97
+ ```
98
+
99
+ ### 事件监听
100
+
101
+ ``` ts
102
+ drawHadler.Event.drawEnd = (drawData) => {
103
+ console.log('drawEnd', drawData)
104
+ }
105
+
106
+ drawHadler.Event.drawEditEnd = (drawData) => {
107
+ console.log('drawEditEnd', drawData)
108
+ }
109
+
110
+ drawHadler.Event.drawRemove = (drawData) => {
111
+ console.log('drawRemove', drawData)
112
+ }
113
+
114
+ ```
115
+
116
+ ### 删除
117
+
118
+ ``` ts
119
+ // 删除绘制
120
+ drawHadler.remove(drawData)
121
+
122
+ // 删除所有绘制
123
+ drawHadler.removeAll()
124
+
125
+ ```
126
+
127
+ ### 设置测量样式
128
+ ```javascript
129
+ // 测量点，线，面样式默认值
130
+ drawHadler.setDrawStyle({
131
+ point: {
132
+ color: 'rgba(255,255,0,0.8)',
133
+ pixelSize: 8,
134
+ outlineColor: 'rgba(255,255,255,0.8)',
135
+ outlineWidth: 2,
136
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
137
+ },
138
+ polyline: {
139
+ width: 2,
140
+ color: 'rgba(81,255,0,0.8)',
141
+ depthFailColor: 'rgba(255,0,0,0.5)',
142
+ },
143
+ polygon: {
144
+ color: 'rgba(255,255,54,0.3)',
145
+ depthFailColor: 'rgba(255,0,0,0.3)',
146
+ },
147
+ })
148
+
149
+ ```
150
+ ### 测量单位
151
+ ```javascript
152
+ // 距离单位
153
+ const DistanceUnits = {
154
+ cm: 'cm',
155
+ 厘米: '厘米',
156
+ m: 'm',
157
+ 米: '米',
158
+ km: 'km',
159
+ 千米: '千米',
160
+ 公里: '公里',
161
+ }
162
+ // 面积单位
163
+ const AreaUnits = {
164
+ cm2: '㎡',
165
+ 平方厘米: '平方厘米',
166
+ m2: '㎡',
167
+ 平方米: '平方米',
168
+ km2: 'km²',
169
+ 平方千米: '平方千米',
170
+ 平方公里: '平方公里',
171
+ 亩: '亩',
172
+ 公顷: '公顷',
173
+ }
174
+ // 距离单位映射面积单位默认值
175
+ const UnitDisAndAreaMap = {
176
+ cm: 'cm²',
177
+ m: '㎡',
178
+ km: 'km²',
179
+ 米: '平方米',
180
+ 千米: '平方千米',
181
+ 公里: '平方公里',
182
+ }
183
+ ```
184
+
185
+ ### 测量扩展
186
+ * 基于现有绘制工具扩展其他形状的绘制,点生线，线生面，需要传入自定义的primitive
187
+
188
+ 扇形绘制
189
+
190
+ ```ts
191
+ import type { IDrawAttrInfo } from 'ino-cesium'
192
+ import { addDrawActions } from 'ino-cesium'
193
+
194
+ addDrawActions({
195
+ type: 'sector', // 绘制类型
196
+ action: setSectorPrimitive, // 绘制primitive
197
+ outline: true, // 是否使用自有的边线生产方法
198
+ pointCount: 3, // 需要有固定点数量的绘制，则传入该值
199
+ })
200
+
201
+ const setSectorPrimitive = (drawData: IDrawAttrInfo) => {
202
+ const primitive = new SectorPrimitive(drawData)
203
+ drawData.primitives.add(primitive)
204
+ }
205
+ ```
206
+ * 自定义SectorPrimitive
207
+ ```ts
208
+ export class SectorPrimitive extends BasePrimitive<any> {
209
+ private positions: Cesium.Cartesian3[]
210
+ private drawData: Draw.IDrawAttrInfo
211
+ private depthFailAppearance: Cesium.Appearance | undefined
212
+
213
+ constructor(drawData: Draw.IDrawAttrInfo) {
214
+ super()
215
+ this.drawData = drawData
216
+ this.positions = drawData.positions
217
+ // 绘制样式
218
+ this.setAppearance()
219
+ }
220
+
221
+ getPrimitive() {
222
+ if (!this.drawData.isEditing) {
223
+ return this._primitive
224
+ }
225
+ this.calcShapePositions(this.positions)
226
+ if (this.positions.length < 2) {
227
+ // 小于两个点 不生成点数据
228
+ return this._primitive
229
+ }
230
+ const positions = JSON.parse(JSON.stringify(this.drawData.shapePositions || []))
231
+ const geometryInstances = [
232
+ new Cesium.GeometryInstance({
233
+ geometry: new Cesium.PolygonGeometry({
234
+ polygonHierarchy: new Cesium.PolygonHierarchy(positions),
235
+ perPositionHeight: true,
236
+ }),
237
+ id: `draw-${this.drawData.id}`,
238
+ }),
239
+ ]
240
+ if (this.drawData.clampToGround) {
241
+ return new Cesium.GroundPrimitive({
242
+ geometryInstances,
243
+ appearance: this.appearance,
244
+ asynchronous: false,
245
+ })
246
+ } else {
247
+ // 不贴地
248
+ return new Cesium.Primitive({
249
+ geometryInstances,
250
+ appearance: this.appearance,
251
+ depthFailAppearance: !this.drawData.disDepthFail ? this.depthFailAppearance : undefined,
252
+ asynchronous: false,
253
+ })
254
+ }
255
+ }
256
+
257
+ setAppearance() {
258
+ this.appearance = new Cesium.MaterialAppearance({
259
+ material: Cesium.Material.fromType('Color', {
260
+ color: Cesium.Color.fromCssColorString(DrawStyle.polygon.color),
261
+ }),
262
+ })
263
+
264
+ this.depthFailAppearance = new Cesium.MaterialAppearance({
265
+ material: Cesium.Material.fromType('Color', {
266
+ color: Cesium.Color.fromCssColorString(DrawStyle.polygon.depthFailColor),
267
+ }),
268
+ })
269
+ }
270
+
271
+ calcShapePositions(positions: Cesium.Cartesian3[]) {
272
+ // 在此处计算当前绘制的形状数据
273
+ }
274
+ }
275
+ ```