@hzab/map-combine 0.0.1 → 0.1.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.
- package/CHANGELOG.md +5 -0
- package/package.json +2 -2
- package/src/basic/BasicBusiness.ts +72 -0
- package/src/basic/BasicElement.ts +35 -0
- package/src/basic/BasicMarker.ts +45 -0
- package/src/basic/MapCombine.ts +11 -1
- package/src/basic/MapElement.ts +15 -17
- package/src/basic/ReactPopup.tsx +24 -1
- package/src/basic/Tile3D.ts +76 -41
- package/src/cesium/CesiumEvent.ts +18 -29
- package/src/cesium/CesiumMap.ts +148 -53
- package/src/cesium/CesiumTile3D.ts +184 -55
- package/src/cesium/cesium-tile-covert/index.js +48 -0
- package/src/cesium/cesium-tile-covert/modules/index.js +12 -0
- package/src/cesium/cesium-tile-covert/modules/projection/BD09Projection.js +377 -0
- package/src/cesium/cesium-tile-covert/modules/provider/AMapImageryProvider.js +27 -0
- package/src/cesium/cesium-tile-covert/modules/provider/BaiduImageryProvider.js +58 -0
- package/src/cesium/cesium-tile-covert/modules/provider/GeoVisImageryProvider.js +25 -0
- package/src/cesium/cesium-tile-covert/modules/provider/GoogleImageryProvider.js +27 -0
- package/src/cesium/cesium-tile-covert/modules/provider/TdtImageryProvider.js +23 -0
- package/src/cesium/cesium-tile-covert/modules/provider/TencentImageryProvider.js +41 -0
- package/src/cesium/cesium-tile-covert/modules/tiling-scheme/BD09TilingScheme.js +100 -0
- package/src/cesium/cesium-tile-covert/modules/tiling-scheme/CustomGeographicTilingScheme.js +60 -0
- package/src/cesium/cesium-tile-covert/modules/tiling-scheme/CustomMercatorTilingScheme.js +70 -0
- package/src/cesium/cesium-tile-covert/modules/tiling-scheme/GCJ02TilingScheme.js +33 -0
- package/src/cesium/cesium-tile-covert/modules/transform/CoordTransform.js +148 -0
- package/src/openlayer/OpenlayerMap.ts +82 -27
- package/src/openlayer/openlayer-tile-gcj02-wgs84.js +144 -0
- package/src/utils/index.ts +15 -2
package/src/cesium/CesiumMap.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
import { AMapImageryProvider } from "./cesium-tile-covert";
|
|
1
2
|
|
|
2
3
|
import { MapCombine } from "../basic/MapCombine";
|
|
3
4
|
import { PointOption, Point } from "../basic/Point";
|
|
4
5
|
import { PolygonOption, Polygon } from "../basic/Polygon";
|
|
5
6
|
import { PolylineOption, Polyline } from "../basic/Polyline";
|
|
6
7
|
import { Tile3DOption, Tile3D } from "../basic/Tile3D";
|
|
8
|
+
|
|
7
9
|
import { bindEvent } from "./CesiumEvent";
|
|
8
10
|
import { drawPoint } from "./CesiumPoint";
|
|
9
11
|
import { drawPolygon } from "./CesiumPolygon";
|
|
@@ -13,19 +15,17 @@ import { drawTile3D } from "./CesiumTile3D";
|
|
|
13
15
|
const $m = 20037508.34278924;
|
|
14
16
|
|
|
15
17
|
export class CesiumMap extends MapCombine {
|
|
16
|
-
|
|
17
18
|
viewer: any;
|
|
18
19
|
markers: any;
|
|
20
|
+
option;
|
|
19
21
|
|
|
20
22
|
container: HTMLDivElement;
|
|
21
23
|
|
|
22
|
-
|
|
23
|
-
|
|
24
24
|
get cursor(): string {
|
|
25
|
-
return
|
|
25
|
+
return this.container.style.cursor;
|
|
26
26
|
}
|
|
27
27
|
set cursor(val: string) {
|
|
28
|
-
|
|
28
|
+
this.container.style.cursor = val;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
get moveable(): boolean {
|
|
@@ -40,13 +40,10 @@ export class CesiumMap extends MapCombine {
|
|
|
40
40
|
const height = container.offsetHeight;
|
|
41
41
|
const position = viewer.scene.camera.pickEllipsoid(
|
|
42
42
|
new Cesium.Cartesian2(width / 2, height / 2),
|
|
43
|
-
viewer.scene.globe.ellipsoid
|
|
43
|
+
viewer.scene.globe.ellipsoid,
|
|
44
44
|
);
|
|
45
45
|
const cartographic = Cesium.Cartographic.fromCartesian(position);
|
|
46
|
-
return [
|
|
47
|
-
Cesium.Math.toDegrees(cartographic.longitude),
|
|
48
|
-
Cesium.Math.toDegrees(cartographic.latitude),
|
|
49
|
-
]
|
|
46
|
+
return [Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)];
|
|
50
47
|
}
|
|
51
48
|
set center(val: number[]) {
|
|
52
49
|
const { viewer, container } = this;
|
|
@@ -54,22 +51,25 @@ export class CesiumMap extends MapCombine {
|
|
|
54
51
|
const height = container.offsetHeight;
|
|
55
52
|
const position = viewer.scene.camera.pickEllipsoid(
|
|
56
53
|
new Cesium.Cartesian2(width / 2, height / 2),
|
|
57
|
-
viewer.scene.globe.ellipsoid
|
|
54
|
+
viewer.scene.globe.ellipsoid,
|
|
58
55
|
);
|
|
59
|
-
const target = Cesium.Cartesian3.fromDegrees(...val)
|
|
60
|
-
Cesium.Cartesian3.subtract(target, position, target)
|
|
61
|
-
Cesium.Cartesian3.add(this.viewer.camera.position, target, this.viewer.camera.position)
|
|
56
|
+
const target = Cesium.Cartesian3.fromDegrees(...val);
|
|
57
|
+
Cesium.Cartesian3.subtract(target, position, target);
|
|
58
|
+
Cesium.Cartesian3.add(this.viewer.camera.position, target, this.viewer.camera.position);
|
|
62
59
|
}
|
|
63
60
|
|
|
64
61
|
get zoom(): number {
|
|
65
|
-
const cartographic = Cesium.Cartographic.fromCartesian(this.viewer.camera.position)
|
|
66
|
-
return this.distanceTzoom(cartographic.height)
|
|
62
|
+
const cartographic = Cesium.Cartographic.fromCartesian(this.viewer.camera.position);
|
|
63
|
+
return this.distanceTzoom(cartographic.height);
|
|
67
64
|
}
|
|
68
65
|
set zoom(val: number) {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
66
|
+
const cartographic = Cesium.Cartographic.fromCartesian(this.viewer.camera.position);
|
|
67
|
+
cartographic.height = this.zoomTdistance(val);
|
|
68
|
+
this.viewer.camera.position = Cesium.Cartesian3.fromRadians(
|
|
69
|
+
cartographic.longitude,
|
|
70
|
+
cartographic.latitude,
|
|
71
|
+
cartographic.height,
|
|
72
|
+
);
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
fov = 0.9695385667699215;
|
|
@@ -82,57 +82,145 @@ export class CesiumMap extends MapCombine {
|
|
|
82
82
|
return ($m * height) / (256 * Math.tan(this.fov / 2) * Math.pow(2, zoom));
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
constructor(viewer
|
|
86
|
-
super()
|
|
87
|
-
this.viewer
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
this.
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
85
|
+
constructor(viewer?: any) {
|
|
86
|
+
super();
|
|
87
|
+
this._initParamsEvent(viewer);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
init(opt) {
|
|
91
|
+
this.option = opt;
|
|
92
|
+
const { container, center = [120.2288892, 30.2349677, 0], zoom = 13, url } = opt || {};
|
|
93
|
+
const viewer = new Cesium.Viewer(container, {
|
|
94
|
+
vrButton: false,
|
|
95
|
+
// 检索
|
|
96
|
+
geocoder: false,
|
|
97
|
+
// home
|
|
98
|
+
homeButton: false,
|
|
99
|
+
// 切换3d地图
|
|
100
|
+
sceneModePicker: false,
|
|
101
|
+
// 底图切换按钮
|
|
102
|
+
baseLayerPicker: false,
|
|
103
|
+
// 问号
|
|
104
|
+
navigationHelpButton: false,
|
|
105
|
+
// 动画控制
|
|
106
|
+
animation: false,
|
|
107
|
+
// 版权信息
|
|
108
|
+
creditContainer: document.createElement("div"),
|
|
109
|
+
// 时间轴
|
|
110
|
+
timeline: false,
|
|
111
|
+
// 全屏按钮
|
|
112
|
+
fullscreenButton: false,
|
|
113
|
+
selectionIndicator: false,
|
|
114
|
+
// 打开动画
|
|
115
|
+
shouldAnimate: false,
|
|
116
|
+
infoBox: false,
|
|
117
|
+
// 只进行3d渲染,没有2d,2.5d,提高性能
|
|
118
|
+
scene3DOnly: true,
|
|
119
|
+
// 初始设置一个纯色瓦片,避免报错影响后续瓦片加载
|
|
120
|
+
imageryProvider: new Cesium.SingleTileImageryProvider({
|
|
121
|
+
url: createColorCanvas("#333"),
|
|
122
|
+
rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
|
|
123
|
+
}),
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
// viewer.cesiumWidget.creditContainer.remove();
|
|
127
|
+
|
|
128
|
+
// viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
|
129
|
+
|
|
130
|
+
this._initParamsEvent(viewer);
|
|
131
|
+
|
|
132
|
+
// 处理瓦片
|
|
133
|
+
this._createLayer();
|
|
134
|
+
|
|
135
|
+
const map = this;
|
|
136
|
+
const d = Cesium.Cartesian3.fromDegrees(...center);
|
|
137
|
+
map.setView([d.x, d.y, d.z, 6.283185307179586, -1.5691285980481942, 0]);
|
|
138
|
+
map.center = center;
|
|
139
|
+
map.zoom = zoom;
|
|
140
|
+
|
|
141
|
+
return map;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
private _initParamsEvent(viewer) {
|
|
145
|
+
if (!viewer) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
this.viewer = viewer;
|
|
149
|
+
|
|
150
|
+
this.container = viewer?.container;
|
|
151
|
+
this.container.appendChild(this.htmllayer);
|
|
152
|
+
this.cursor = "default";
|
|
153
|
+
this.markers = this.viewer.scene.primitives.add(new Cesium.BillboardCollection());
|
|
154
|
+
|
|
155
|
+
bindEvent(this);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
private _createLayer() {
|
|
159
|
+
const { url, subdomains, proj, minZoomLevel, maxZoomLevel } = this.option;
|
|
160
|
+
let layer: any;
|
|
161
|
+
console.log("url", url);
|
|
162
|
+
let options = {
|
|
163
|
+
...this.option,
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
switch (proj) {
|
|
167
|
+
case "GCJ02->WGS84":
|
|
168
|
+
options = {
|
|
169
|
+
...options,
|
|
170
|
+
crs: "WGS84", // 使用84坐标系,默认为:GCJ02
|
|
171
|
+
};
|
|
172
|
+
layer = this.viewer.imageryLayers.addImageryProvider(new AMapImageryProvider(options));
|
|
95
173
|
|
|
174
|
+
break;
|
|
175
|
+
default:
|
|
176
|
+
options = {
|
|
177
|
+
...options,
|
|
178
|
+
tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
|
179
|
+
};
|
|
180
|
+
layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider(options));
|
|
181
|
+
break;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
this.viewer.imageryLayers.add(layer);
|
|
185
|
+
|
|
186
|
+
return layer;
|
|
96
187
|
}
|
|
97
188
|
|
|
98
189
|
getView() {
|
|
99
|
-
const { camera } = this.viewer
|
|
100
|
-
return [
|
|
101
|
-
camera.position.x, camera.position.y, camera.position.z,
|
|
102
|
-
camera.heading, camera.pitch, camera.roll,
|
|
103
|
-
]
|
|
190
|
+
const { camera } = this.viewer;
|
|
191
|
+
return [camera.position.x, camera.position.y, camera.position.z, camera.heading, camera.pitch, camera.roll];
|
|
104
192
|
}
|
|
105
193
|
|
|
106
194
|
setView(e: number[]) {
|
|
107
|
-
const { camera } = this.viewer
|
|
195
|
+
const { camera } = this.viewer;
|
|
108
196
|
camera.setView({
|
|
109
197
|
destination: new Cesium.Cartesian3(e[0], e[1], e[2]),
|
|
110
|
-
orientation: new Cesium.HeadingPitchRoll(e[3], e[4], e[5])
|
|
198
|
+
orientation: new Cesium.HeadingPitchRoll(e[3], e[4], e[5]),
|
|
111
199
|
});
|
|
112
200
|
}
|
|
113
201
|
|
|
114
202
|
createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
|
|
115
|
-
const e = new Point(this, option)
|
|
116
|
-
drawPoint(this, e)
|
|
117
|
-
return e
|
|
203
|
+
const e = new Point(this, option);
|
|
204
|
+
drawPoint(this, e);
|
|
205
|
+
return e;
|
|
118
206
|
}
|
|
119
207
|
|
|
120
208
|
createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
|
|
121
|
-
const e = new Polyline(this, option)
|
|
122
|
-
drawPolyline(this, e)
|
|
123
|
-
return e
|
|
209
|
+
const e = new Polyline(this, option);
|
|
210
|
+
drawPolyline(this, e);
|
|
211
|
+
return e;
|
|
124
212
|
}
|
|
125
213
|
|
|
126
214
|
createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
|
|
127
|
-
const e = new Polygon(this, option)
|
|
128
|
-
drawPolygon(this, e)
|
|
129
|
-
return e
|
|
215
|
+
const e = new Polygon(this, option);
|
|
216
|
+
drawPolygon(this, e);
|
|
217
|
+
return e;
|
|
130
218
|
}
|
|
131
219
|
|
|
132
220
|
createTile3D(option?: Partial<Tile3DOption>): Tile3D {
|
|
133
|
-
const e = new Tile3D(this, option)
|
|
134
|
-
drawTile3D(this, e)
|
|
135
|
-
return e
|
|
221
|
+
const e = new Tile3D(this, option);
|
|
222
|
+
drawTile3D(this, e);
|
|
223
|
+
return e;
|
|
136
224
|
}
|
|
137
225
|
|
|
138
226
|
canvasTgeography(p: number[]): number[] {
|
|
@@ -159,9 +247,16 @@ export class CesiumMap extends MapCombine {
|
|
|
159
247
|
}
|
|
160
248
|
return [res.x, res.y];
|
|
161
249
|
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
250
|
}
|
|
167
251
|
|
|
252
|
+
function createColorCanvas(color) {
|
|
253
|
+
var width = 1,
|
|
254
|
+
height = 1;
|
|
255
|
+
var canvas = document.createElement("canvas");
|
|
256
|
+
canvas.width = width;
|
|
257
|
+
canvas.height = height;
|
|
258
|
+
var ctx = canvas.getContext("2d");
|
|
259
|
+
ctx.fillStyle = color;
|
|
260
|
+
ctx.fillRect(0, 0, width, height);
|
|
261
|
+
return canvas.toDataURL();
|
|
262
|
+
}
|
|
@@ -1,100 +1,229 @@
|
|
|
1
|
+
import { fill } from "lodash";
|
|
2
|
+
|
|
1
3
|
import { Tile3D } from "../basic/Tile3D";
|
|
2
4
|
import { CesiumMap } from "./CesiumMap";
|
|
3
5
|
|
|
6
|
+
import { arrayFillByLen } from "../utils";
|
|
7
|
+
|
|
4
8
|
function create3DTile(tile3d: Tile3D) {
|
|
5
9
|
const tileset = new Cesium.Cesium3DTileset({
|
|
6
10
|
show: tile3d.show,
|
|
7
11
|
url: tile3d.src,
|
|
8
12
|
});
|
|
9
|
-
tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality)
|
|
10
|
-
tileset.readyPromise
|
|
11
|
-
return tileset
|
|
13
|
+
tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality);
|
|
14
|
+
tileset.readyPromise;
|
|
15
|
+
return tileset;
|
|
12
16
|
}
|
|
13
17
|
|
|
14
18
|
function updateMatrix(tileset: any, tile3d: Tile3D, origin: any) {
|
|
15
|
-
|
|
19
|
+
const options = tile3d._option;
|
|
20
|
+
// 中心点移动到指定经纬度
|
|
16
21
|
if (tile3d.coordinates) {
|
|
17
|
-
|
|
18
|
-
// const cartographic = Cesium.Cartographic.fromCartesian(center)
|
|
19
|
-
// console.log(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height);
|
|
20
|
-
// cartographic.height = 0
|
|
21
|
-
// const transform = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude));
|
|
22
|
-
// const res = Cesium.Matrix4.inverse(transform, new Cesium.Matrix4());
|
|
23
|
-
// console.log(inverse);
|
|
24
|
-
|
|
25
|
-
const target = Cesium.Cartesian3.fromDegrees(...tile3d.coordinates)
|
|
22
|
+
const target = Cesium.Cartesian3.fromDegrees(...tile3d.coordinates);
|
|
26
23
|
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(Cesium.Cartesian3.subtract(target, origin, target));
|
|
27
24
|
} else {
|
|
28
|
-
tileset.modelMatrix = Cesium.Matrix4.IDENTITY
|
|
25
|
+
tileset.modelMatrix = Cesium.Matrix4.IDENTITY;
|
|
26
|
+
}
|
|
27
|
+
// 旋转
|
|
28
|
+
if (Array.isArray(options.rotates)) {
|
|
29
|
+
const rotates: [number, number, number] = arrayFillByLen([...options.rotates], 3, 0);
|
|
30
|
+
rotate(...rotates, tileset);
|
|
31
|
+
}
|
|
32
|
+
// 平移
|
|
33
|
+
if (options.translates) {
|
|
34
|
+
const translates: [number, number, number] = arrayFillByLen([...options.translates], 3, 0);
|
|
35
|
+
translate(...translates, tileset);
|
|
36
|
+
}
|
|
37
|
+
// 缩放
|
|
38
|
+
if (options.scales) {
|
|
39
|
+
const scales: [number, number, number] = arrayFillByLen([...options.scales], 3, 1);
|
|
40
|
+
scale(...scales, tileset);
|
|
29
41
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
42
|
}
|
|
33
43
|
|
|
34
44
|
export function drawTile3D(map: CesiumMap, tile3d: Tile3D) {
|
|
35
|
-
const { viewer } = map
|
|
36
|
-
let tileset = create3DTile(tile3d)
|
|
37
|
-
let origin
|
|
45
|
+
const { viewer } = map;
|
|
46
|
+
let tileset = create3DTile(tile3d);
|
|
47
|
+
let origin;
|
|
48
|
+
|
|
38
49
|
viewer.scene.primitives.add(tileset).readyPromise.then(() => {
|
|
39
|
-
const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
|
|
40
|
-
origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude)
|
|
41
|
-
updateMatrix(tileset, tile3d, origin)
|
|
42
|
-
tile3d.event.trigger(
|
|
50
|
+
const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
|
|
51
|
+
origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude);
|
|
52
|
+
updateMatrix(tileset, tile3d, origin);
|
|
53
|
+
tile3d.event.trigger("ready");
|
|
43
54
|
|
|
44
55
|
// (window as any).getCenter = () => {
|
|
45
56
|
// const center = tileset.boundingSphere.center
|
|
46
57
|
// const cartographic = Cesium.Cartographic.fromCartesian(center)
|
|
47
58
|
// console.log(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height);
|
|
48
59
|
// }
|
|
49
|
-
|
|
50
60
|
});
|
|
51
61
|
|
|
52
62
|
const onUpdate = (e: Set<string>) => {
|
|
53
|
-
|
|
54
|
-
e.forEach(key => {
|
|
63
|
+
e.forEach((key) => {
|
|
55
64
|
switch (key) {
|
|
56
|
-
case
|
|
57
|
-
tileset.show = tile3d.show
|
|
65
|
+
case "show":
|
|
66
|
+
tileset.show = tile3d.show;
|
|
58
67
|
break;
|
|
59
|
-
case
|
|
60
|
-
viewer.scene.primitives.remove(tileset)
|
|
61
|
-
tileset = create3DTile(tile3d)
|
|
68
|
+
case "src":
|
|
69
|
+
viewer.scene.primitives.remove(tileset);
|
|
70
|
+
tileset = create3DTile(tile3d);
|
|
62
71
|
viewer.scene.primitives.add(tileset).readyPromise.then(() => {
|
|
63
|
-
const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
|
|
64
|
-
origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude)
|
|
65
|
-
updateMatrix(tileset, tile3d, origin)
|
|
66
|
-
tile3d.event.trigger(
|
|
67
|
-
|
|
72
|
+
const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
|
|
73
|
+
origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude);
|
|
74
|
+
updateMatrix(tileset, tile3d, origin);
|
|
75
|
+
tile3d.event.trigger("ready");
|
|
68
76
|
});
|
|
69
77
|
break;
|
|
70
|
-
case
|
|
71
|
-
if (!e.has(
|
|
72
|
-
updateMatrix(tileset, tile3d, origin)
|
|
78
|
+
case "coordinates":
|
|
79
|
+
if (!e.has("src")) {
|
|
80
|
+
updateMatrix(tileset, tile3d, origin);
|
|
73
81
|
}
|
|
74
82
|
break;
|
|
75
83
|
|
|
76
|
-
case
|
|
77
|
-
tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality)
|
|
84
|
+
case "quality":
|
|
85
|
+
tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality);
|
|
78
86
|
break;
|
|
79
87
|
default:
|
|
80
|
-
throw new Error(`${key} 还不支持修改`)
|
|
88
|
+
throw new Error(`${key} 还不支持修改`);
|
|
81
89
|
}
|
|
82
|
-
})
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
90
|
+
});
|
|
91
|
+
};
|
|
86
92
|
const onFocus = () => {
|
|
87
93
|
viewer.flyTo(tileset);
|
|
88
|
-
}
|
|
94
|
+
};
|
|
89
95
|
|
|
90
96
|
const onDestroy = () => {
|
|
91
|
-
viewer.scene.primitives.remove(tileset)
|
|
92
|
-
tile3d.event.off(
|
|
93
|
-
tile3d.event.off(
|
|
94
|
-
tile3d.event.off(
|
|
97
|
+
viewer.scene.primitives.remove(tileset);
|
|
98
|
+
tile3d.event.off("update", onUpdate);
|
|
99
|
+
tile3d.event.off("focus", onFocus);
|
|
100
|
+
tile3d.event.off("destroy", onDestroy);
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
tile3d.tileset = tileset;
|
|
104
|
+
tile3d.translate = function (x: number, y: number, z: number, _tileset) {
|
|
105
|
+
return tileset.readyPromise.then((argument) => {
|
|
106
|
+
console.log("debug translate tileset.readyPromise");
|
|
107
|
+
test();
|
|
108
|
+
translate(x, y, z, _tileset || tileset);
|
|
109
|
+
});
|
|
110
|
+
};
|
|
111
|
+
tile3d.rotate = function (x: number, y: number, z: number, _tileset) {
|
|
112
|
+
return tileset.readyPromise.then((argument) => {
|
|
113
|
+
rotate(x, y, z, _tileset || tileset);
|
|
114
|
+
});
|
|
115
|
+
};
|
|
116
|
+
tile3d.scale = function (x: number, y: number, z: number, _tileset) {
|
|
117
|
+
return tileset.readyPromise.then((argument) => {
|
|
118
|
+
scale(x, y, z, _tileset || tileset);
|
|
119
|
+
});
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
tile3d.event.on("update", onUpdate);
|
|
123
|
+
tile3d.event.on("focus", onFocus);
|
|
124
|
+
tile3d.event.on("destroy", onDestroy);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
function test() {
|
|
128
|
+
console.log("debug test");
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/** 基于本地的 ENU 坐标系的偏移,也就是垂直于地表向上为 Z,东为 X,北为 Y
|
|
132
|
+
* @param dx x轴偏移量。单位:米
|
|
133
|
+
* @param dy y轴偏移量。单位:米
|
|
134
|
+
* @param dz z轴偏移量。单位:米
|
|
135
|
+
* @param tileset Cesium3DTileset
|
|
136
|
+
*/
|
|
137
|
+
function translate(dx: number, dy: number, dz: number, tileset) {
|
|
138
|
+
console.log("debug translate", dx, dy, dz);
|
|
139
|
+
if (dx === 0 && dy === 0 && dz === 0) return;
|
|
140
|
+
console.log("debug translate", dx, dy, dz);
|
|
141
|
+
|
|
142
|
+
try {
|
|
143
|
+
const { Cartesian3, Matrix4, Transforms } = Cesium;
|
|
144
|
+
// 对于3DTileset,我们需要的结果是一个模型矩阵,那么平移就是计算一个世界坐标下的平移矩阵。
|
|
145
|
+
// 获取中心点
|
|
146
|
+
const origin = tileset.boundingSphere.center;
|
|
147
|
+
// 以该点建立ENU坐标系
|
|
148
|
+
const toWorldMatrix = Transforms.eastNorthUpToFixedFrame(origin);
|
|
149
|
+
// 该坐标系下平移后的位置
|
|
150
|
+
const translatePosition = new Cartesian3(dx, dy, dz);
|
|
151
|
+
// 获取平移后位置的世界坐标
|
|
152
|
+
const worldPosition = Matrix4.multiplyByPoint(toWorldMatrix, translatePosition, new Cartesian3());
|
|
153
|
+
// 计算世界坐标下的各个平移量
|
|
154
|
+
const offset = Cartesian3.subtract(worldPosition, origin, new Cartesian3());
|
|
155
|
+
// 从世界坐标下的平移量计算世界坐标的平移矩阵
|
|
156
|
+
const translateMatrix = Matrix4.fromTranslation(offset);
|
|
157
|
+
// 应用平移矩阵。这里应该与原本的模型矩阵点乘,而不是直接赋值
|
|
158
|
+
tileset.modelMatrix = Matrix4.multiply(translateMatrix, tileset.modelMatrix, new Matrix4());
|
|
159
|
+
} catch (error) {
|
|
160
|
+
console.error(error);
|
|
95
161
|
}
|
|
96
|
-
|
|
97
|
-
tile3d.event.on('focus', onFocus)
|
|
98
|
-
tile3d.event.on('destroy', onDestroy)
|
|
162
|
+
}
|
|
99
163
|
|
|
100
|
-
|
|
164
|
+
/** 基于本地的 ENU 坐标系的旋转,也就是垂直于地表向上为 Z,东为 X,北为 Y
|
|
165
|
+
* https://blog.csdn.net/weixin_70945905/article/details/142419968
|
|
166
|
+
* @param rx 绕X轴旋转的角度。单位:度
|
|
167
|
+
* @param ry 绕Y轴旋转的角度。单位:度
|
|
168
|
+
* @param rz 绕Z轴旋转的角度。单位:度
|
|
169
|
+
* @param tileset Cesium3DTileset
|
|
170
|
+
*/
|
|
171
|
+
function rotate(rx: number, ry: number, rz: number, tileset) {
|
|
172
|
+
console.log("debug rotate ", rx, ry, rz);
|
|
173
|
+
if (rx === 0 && ry === 0 && rz === 0) return;
|
|
174
|
+
const { Matrix3, Matrix4, Transforms, Math: CesiumMath } = Cesium;
|
|
175
|
+
// 获取中心点。
|
|
176
|
+
const origin = tileset.boundingSphere.center;
|
|
177
|
+
// 以该点建立 ENU 坐标系
|
|
178
|
+
const toWorldMatrix = Transforms.eastNorthUpToFixedFrame(origin);
|
|
179
|
+
// 获取 ENU 矩阵的逆矩阵。也就是可以将世界坐标重新转为 ENU 坐标系的矩阵
|
|
180
|
+
const toLocalMatrix = Matrix4.inverse(toWorldMatrix, new Matrix4());
|
|
181
|
+
// 计算旋转矩阵
|
|
182
|
+
const rotateMatrix = Matrix4.clone(Matrix4.IDENTITY);
|
|
183
|
+
if (rx !== 0) {
|
|
184
|
+
const rotateXMatrix = Matrix4.fromRotationTranslation(Matrix3.fromRotationX(CesiumMath.toRadians(rx)));
|
|
185
|
+
Matrix4.multiply(rotateXMatrix, rotateMatrix, rotateMatrix);
|
|
186
|
+
}
|
|
187
|
+
if (ry !== 0) {
|
|
188
|
+
const rotateYMatrix = Matrix4.fromRotationTranslation(Matrix3.fromRotationY(CesiumMath.toRadians(ry)));
|
|
189
|
+
Matrix4.multiply(rotateYMatrix, rotateMatrix, rotateMatrix);
|
|
190
|
+
}
|
|
191
|
+
if (rz !== 0) {
|
|
192
|
+
const rotateZMatrix = Matrix4.fromRotationTranslation(Matrix3.fromRotationZ(CesiumMath.toRadians(rz)));
|
|
193
|
+
Matrix4.multiply(rotateZMatrix, rotateMatrix, rotateMatrix);
|
|
194
|
+
}
|
|
195
|
+
// ENU 坐标系下的结果矩阵
|
|
196
|
+
const localResultMatrix = Matrix4.multiply(rotateMatrix, toLocalMatrix, new Matrix4());
|
|
197
|
+
// 世界坐标系下的结果矩阵
|
|
198
|
+
const worldResultMatrix = Matrix4.multiply(toWorldMatrix, localResultMatrix, new Matrix4());
|
|
199
|
+
// 应用结果
|
|
200
|
+
tileset.modelMatrix = Matrix4.multiply(worldResultMatrix, tileset.modelMatrix, new Matrix4());
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/** 基于本地的 ENU 坐标系的缩放,也就是垂直于地表向上为 Z,东为 X,北为 Y
|
|
204
|
+
* @param sx x 轴缩放倍数
|
|
205
|
+
* @param sy y 轴缩放倍数
|
|
206
|
+
* @param sz z 轴缩放倍数
|
|
207
|
+
* @param tileset Cesium3DTileset
|
|
208
|
+
*/
|
|
209
|
+
function scale(sx: number, sy: number, sz: number, tileset) {
|
|
210
|
+
if (sx <= 0 || sy <= 0 || sz <= 0) throw Error("缩放倍数必须大于0");
|
|
211
|
+
if (sx === 1 && sy === 1 && sz === 1) return;
|
|
212
|
+
const { Cartesian3, Matrix4, Transforms } = Cesium;
|
|
213
|
+
// 具体步骤是将 3DTileset 先转为 ENU 坐标系,再在 ENU 坐标系下计算缩放后的结果,再转回世界坐标系。一个步骤代表一个矩阵
|
|
214
|
+
|
|
215
|
+
// 获取中心点。
|
|
216
|
+
const origin = tileset.boundingSphere.center;
|
|
217
|
+
// 以该点建立 ENU 坐标系
|
|
218
|
+
const toWorldMatrix = Transforms.eastNorthUpToFixedFrame(origin);
|
|
219
|
+
// 获取ENU矩阵的逆矩阵。也就是可以将世界坐标重新转为 ENU 坐标系的矩阵
|
|
220
|
+
const toLocalMatrix = Matrix4.inverse(toWorldMatrix, new Matrix4());
|
|
221
|
+
// 计算缩放矩阵
|
|
222
|
+
const scaleMatrix = Matrix4.fromScale(new Cartesian3(sx, sy, sz));
|
|
223
|
+
// ENU 坐标系下的结果矩阵
|
|
224
|
+
const localResultMatrix = Matrix4.multiply(scaleMatrix, toLocalMatrix, new Matrix4());
|
|
225
|
+
// 世界坐标系下的结果矩阵
|
|
226
|
+
const worldResultMatrix = Matrix4.multiply(toWorldMatrix, localResultMatrix, new Matrix4());
|
|
227
|
+
// 应用结果
|
|
228
|
+
tileset.modelMatrix = Matrix4.multiply(worldResultMatrix, tileset.modelMatrix, new Matrix4());
|
|
229
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
@author : Caven Chen
|
|
3
|
+
@date : 2023-05-18
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import {
|
|
7
|
+
AMapImageryProvider,
|
|
8
|
+
BaiduImageryProvider,
|
|
9
|
+
GeoVisImageryProvider,
|
|
10
|
+
GoogleImageryProvider,
|
|
11
|
+
TdtImageryProvider,
|
|
12
|
+
TencentImageryProvider,
|
|
13
|
+
CustomGeographicTilingScheme,
|
|
14
|
+
CustomMercatorTilingScheme,
|
|
15
|
+
} from "./modules";
|
|
16
|
+
|
|
17
|
+
if (window && window.Cesium) {
|
|
18
|
+
if (Object.isFrozen(window.Cesium)) {
|
|
19
|
+
window.AMapImageryProvider = AMapImageryProvider;
|
|
20
|
+
window.BaiduImageryProvider = BaiduImageryProvider;
|
|
21
|
+
window.GeoVisImageryProvider = GeoVisImageryProvider;
|
|
22
|
+
window.GoogleImageryProvider = GoogleImageryProvider;
|
|
23
|
+
window.TdtImageryProvider = TdtImageryProvider;
|
|
24
|
+
window.TencentImageryProvider = TencentImageryProvider;
|
|
25
|
+
window.CustomGeographicTilingScheme = CustomGeographicTilingScheme;
|
|
26
|
+
window.CustomMercatorTilingScheme = CustomMercatorTilingScheme;
|
|
27
|
+
} else {
|
|
28
|
+
window.Cesium.AMapImageryProvider = AMapImageryProvider;
|
|
29
|
+
window.Cesium.BaiduImageryProvider = BaiduImageryProvider;
|
|
30
|
+
window.Cesium.GeoVisImageryProvider = GeoVisImageryProvider;
|
|
31
|
+
window.Cesium.GoogleImageryProvider = GoogleImageryProvider;
|
|
32
|
+
window.Cesium.TdtImageryProvider = TdtImageryProvider;
|
|
33
|
+
window.Cesium.TencentImageryProvider = TencentImageryProvider;
|
|
34
|
+
window.Cesium.CustomGeographicTilingScheme = CustomGeographicTilingScheme;
|
|
35
|
+
window.Cesium.CustomMercatorTilingScheme = CustomMercatorTilingScheme;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export {
|
|
40
|
+
AMapImageryProvider,
|
|
41
|
+
BaiduImageryProvider,
|
|
42
|
+
GeoVisImageryProvider,
|
|
43
|
+
GoogleImageryProvider,
|
|
44
|
+
TdtImageryProvider,
|
|
45
|
+
TencentImageryProvider,
|
|
46
|
+
CustomGeographicTilingScheme,
|
|
47
|
+
CustomMercatorTilingScheme,
|
|
48
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @Author: Caven Chen
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export { default as AMapImageryProvider } from "./provider/AMapImageryProvider.js";
|
|
6
|
+
export { default as BaiduImageryProvider } from "./provider/BaiduImageryProvider.js";
|
|
7
|
+
export { default as GeoVisImageryProvider } from "./provider/GeoVisImageryProvider.js";
|
|
8
|
+
export { default as GoogleImageryProvider } from "./provider/GoogleImageryProvider.js";
|
|
9
|
+
export { default as TdtImageryProvider } from "./provider/TdtImageryProvider.js";
|
|
10
|
+
export { default as TencentImageryProvider } from "./provider/TencentImageryProvider.js";
|
|
11
|
+
export { default as CustomGeographicTilingScheme } from "./tiling-scheme/CustomGeographicTilingScheme.js";
|
|
12
|
+
export { default as CustomMercatorTilingScheme } from "./tiling-scheme/CustomMercatorTilingScheme.js";
|