babyeditor-tool 0.0.8 → 0.0.10
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/dist/babyeditor.tool.cjs.js +1 -1
- package/dist/babyeditor.tool.cjs.js.map +1 -1
- package/dist/babyeditor.tool.es.js +928 -11
- package/dist/babyeditor.tool.es.js.map +1 -1
- package/dist/babyeditor.tool.umd.js +1 -1
- package/dist/babyeditor.tool.umd.js.map +1 -1
- package/package.json +5 -5
- package/types/interfaces/MetaData.interface.d.ts +54 -0
- package/types/interfaces/MetaData.interface.d.ts.map +1 -1
- package/types/tool/CustomSystem.d.ts +24 -3
- package/types/tool/CustomSystem.d.ts.map +1 -1
- package/types/tool/CustomSystem.js +97 -5
- package/types/tool/SceneLoader.d.ts +74 -3
- package/types/tool/SceneLoader.d.ts.map +1 -1
- package/types/tool/SceneLoader.js +249 -6
- package/types/tool/map/Layer.d.ts +37 -0
- package/types/tool/map/Layer.d.ts.map +1 -0
- package/types/tool/map/Layer.js +49 -0
- package/types/tool/map/MapViewer.d.ts +68 -0
- package/types/tool/map/MapViewer.d.ts.map +1 -0
- package/types/tool/map/MapViewer.js +105 -0
- package/types/tool/map/Projection.d.ts +40 -0
- package/types/tool/map/Projection.d.ts.map +1 -0
- package/types/tool/map/Projection.js +75 -0
- package/types/tool/map/tile/TileLayer.d.ts +9 -0
- package/types/tool/map/tile/TileLayer.d.ts.map +1 -0
- package/types/tool/map/tile/TileLayer.js +22 -0
- package/types/tool/map/tile/TileLayerRenderer.d.ts +145 -0
- package/types/tool/map/tile/TileLayerRenderer.d.ts.map +1 -0
- package/types/tool/map/tile/TileLayerRenderer.js +329 -0
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { TransformNode } from "@babylonjs/core";
|
|
2
|
+
export class Layer {
|
|
3
|
+
constructor(name, scene) {
|
|
4
|
+
/**
|
|
5
|
+
* 图层名称
|
|
6
|
+
*/
|
|
7
|
+
this.name = "";
|
|
8
|
+
this.name = name;
|
|
9
|
+
this.layerRootNode = new TransformNode(name, scene);
|
|
10
|
+
this.layerRootNode.name = name;
|
|
11
|
+
this.layerRootNode.metadata = { editable: false, layerName: name };
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* 获取图层是否启用
|
|
15
|
+
*/
|
|
16
|
+
get isEnabled() {
|
|
17
|
+
return this.layerRootNode.isEnabled();
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* 设置图层是否启用
|
|
21
|
+
* @param enabled 是否启用
|
|
22
|
+
*/
|
|
23
|
+
set isEnabled(enabled) {
|
|
24
|
+
this.layerRootNode.setEnabled(enabled);
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* 当图层启用状态改变时触发
|
|
28
|
+
* @param observers 观察者
|
|
29
|
+
*/
|
|
30
|
+
get onEnabledStateChanged() {
|
|
31
|
+
return this.layerRootNode.onEnabledStateChangedObservable;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* 设置图层是否启用
|
|
35
|
+
* @param enabled 是否启用
|
|
36
|
+
*/
|
|
37
|
+
setEnabled(enabled) {
|
|
38
|
+
this.layerRootNode.setEnabled(enabled);
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* 释放图层
|
|
42
|
+
*/
|
|
43
|
+
dispose() {
|
|
44
|
+
this.layerRootNode.dispose();
|
|
45
|
+
}
|
|
46
|
+
onDisposeObservable(observers) {
|
|
47
|
+
return this.layerRootNode.onDisposeObservable.add(observers);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { Scene, TransformNode } from "@babylonjs/core";
|
|
2
|
+
import { TileLayerRenderer } from "./tile/TileLayerRenderer";
|
|
3
|
+
export interface IMapViewerOption {
|
|
4
|
+
id?: string;
|
|
5
|
+
name?: string;
|
|
6
|
+
projection?: 'EPSG:4326' | 'EPSG:3857';
|
|
7
|
+
viewWidth?: number;
|
|
8
|
+
bbox?: [number, number, number, number];
|
|
9
|
+
zoomOffset?: number;
|
|
10
|
+
}
|
|
11
|
+
export declare class MapViewer {
|
|
12
|
+
id: string;
|
|
13
|
+
name: string;
|
|
14
|
+
/**
|
|
15
|
+
* 地图根节点
|
|
16
|
+
*/
|
|
17
|
+
rootNode: TransformNode;
|
|
18
|
+
/**
|
|
19
|
+
* 投影坐标系
|
|
20
|
+
*/
|
|
21
|
+
projection: 'EPSG:4326' | 'EPSG:3857';
|
|
22
|
+
/**
|
|
23
|
+
* 地图范围
|
|
24
|
+
*/
|
|
25
|
+
bbox: [number, number, number, number];
|
|
26
|
+
/**
|
|
27
|
+
* 地图大小
|
|
28
|
+
*/
|
|
29
|
+
size: [number, number];
|
|
30
|
+
/**
|
|
31
|
+
* 瓦片图层渲染器
|
|
32
|
+
*/
|
|
33
|
+
readonly tileLayerRenderer: TileLayerRenderer;
|
|
34
|
+
/**
|
|
35
|
+
* 地图场景
|
|
36
|
+
*/
|
|
37
|
+
scene: Scene;
|
|
38
|
+
disposed: boolean;
|
|
39
|
+
zoomOffset: number;
|
|
40
|
+
/**
|
|
41
|
+
* 创建地图实例
|
|
42
|
+
* @param options 地图参数
|
|
43
|
+
*/
|
|
44
|
+
constructor(options: IMapViewerOption | undefined, scene: Scene);
|
|
45
|
+
setZoomOffset(zoomOffset: number): void;
|
|
46
|
+
setBBox(bbox: [number, number, number, number]): void;
|
|
47
|
+
setViewWidth(viewWidth: number): void;
|
|
48
|
+
getMinZoom(): number;
|
|
49
|
+
/**
|
|
50
|
+
* 设置地图投影坐标系
|
|
51
|
+
* @param projection 投影坐标系
|
|
52
|
+
*/
|
|
53
|
+
setProjection(projection: 'EPSG:4326' | 'EPSG:3857'): void;
|
|
54
|
+
/**
|
|
55
|
+
* 获取地图投影坐标系
|
|
56
|
+
* @returns 投影坐标系
|
|
57
|
+
*/
|
|
58
|
+
getProjectionBbox(): [number, number, number, number];
|
|
59
|
+
/**
|
|
60
|
+
* 将wgs84坐标投影到地图坐标系
|
|
61
|
+
* @param coordinates 坐标
|
|
62
|
+
* @returns 投影后的坐标
|
|
63
|
+
*/
|
|
64
|
+
project(coordinates: number[]): number[];
|
|
65
|
+
createGround(): void;
|
|
66
|
+
dispose(): void;
|
|
67
|
+
}
|
|
68
|
+
//# sourceMappingURL=MapViewer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MapViewer.d.ts","sourceRoot":"","sources":["../../../../src/tool/map/MapViewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,EAAoB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAI7D,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,WAAW,GAAG,WAAW,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,qBAAa,SAAS;IACpB,EAAE,EAAE,MAAM,CAAO;IACjB,IAAI,EAAE,MAAM,CAAc;IAC1B;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAA;IACvB;;OAEG;IACH,UAAU,EAAE,WAAW,GAAG,WAAW,CAAe;IACpD;;OAEG;IACH,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAwB;IAC9D;;OAEG;IACH,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAc;IACpC;;OAEG;IACH,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAC9C;;OAEG;IACH,KAAK,EAAE,KAAK,CAAA;IAEZ,QAAQ,UAAQ;IAEhB,UAAU,EAAE,MAAM,CAAK;IAEvB;;;OAGG;gBACU,OAAO,EAAE,gBAAgB,YAAK,EAAE,KAAK,EAAE,KAAK;IAqBzD,aAAa,CAAC,UAAU,EAAE,MAAM;IAKhC,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;IAQ9C,YAAY,CAAC,SAAS,EAAE,MAAM;IAS9B,UAAU;IASV;;;OAGG;IACH,aAAa,CAAC,UAAU,EAAE,WAAW,GAAG,WAAW;IAInD;;;OAGG;IACH,iBAAiB,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;IAOrD;;;;OAIG;IACH,OAAO,CAAE,WAAW,EAAE,MAAM,EAAE;IAO9B,YAAY;IAaZ,OAAO;CAGR"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { Color3, MeshBuilder, TransformNode } from "@babylonjs/core";
|
|
2
|
+
import { Projection } from "./Projection";
|
|
3
|
+
import { TileLayerRenderer } from "./tile/TileLayerRenderer";
|
|
4
|
+
import { GridMaterial } from "@babylonjs/materials";
|
|
5
|
+
import { v1 } from "uuid";
|
|
6
|
+
export class MapViewer {
|
|
7
|
+
/**
|
|
8
|
+
* 创建地图实例
|
|
9
|
+
* @param options 地图参数
|
|
10
|
+
*/
|
|
11
|
+
constructor(options = {}, scene) {
|
|
12
|
+
this.id = v1();
|
|
13
|
+
this.name = 'MapViewer';
|
|
14
|
+
/**
|
|
15
|
+
* 投影坐标系
|
|
16
|
+
*/
|
|
17
|
+
this.projection = "EPSG:3857";
|
|
18
|
+
/**
|
|
19
|
+
* 地图范围
|
|
20
|
+
*/
|
|
21
|
+
this.bbox = [-180, -90, 180, 90];
|
|
22
|
+
/**
|
|
23
|
+
* 地图大小
|
|
24
|
+
*/
|
|
25
|
+
this.size = [100, 100];
|
|
26
|
+
this.disposed = false;
|
|
27
|
+
this.zoomOffset = 1;
|
|
28
|
+
this.id = options.id || this.id;
|
|
29
|
+
this.name = options.name || this.name;
|
|
30
|
+
this.rootNode = new TransformNode(options.name || "MapViewerRootNode", scene);
|
|
31
|
+
this.rootNode.name = options.name || this.rootNode.name;
|
|
32
|
+
this.rootNode.metadata = { editable: false };
|
|
33
|
+
this.rootNode.doNotSerialize = true;
|
|
34
|
+
this.bbox = options.bbox || this.bbox;
|
|
35
|
+
this.projection = options.projection || this.projection;
|
|
36
|
+
this.zoomOffset = options.zoomOffset || this.zoomOffset;
|
|
37
|
+
this.setViewWidth(options.viewWidth || this.size[0]);
|
|
38
|
+
this.scene = scene;
|
|
39
|
+
this.tileLayerRenderer = new TileLayerRenderer(this);
|
|
40
|
+
this.tileLayerRenderer.updateTiles(this.getMinZoom() + this.zoomOffset);
|
|
41
|
+
// this.createGround()
|
|
42
|
+
}
|
|
43
|
+
setZoomOffset(zoomOffset) {
|
|
44
|
+
this.zoomOffset = Math.min(4, zoomOffset);
|
|
45
|
+
this.tileLayerRenderer.setZoom(this.getMinZoom() + zoomOffset);
|
|
46
|
+
}
|
|
47
|
+
setBBox(bbox) {
|
|
48
|
+
this.bbox = bbox;
|
|
49
|
+
this.setViewWidth(this.size[0]);
|
|
50
|
+
this.tileLayerRenderer.updateTiles(this.getMinZoom() + this.zoomOffset);
|
|
51
|
+
}
|
|
52
|
+
setViewWidth(viewWidth) {
|
|
53
|
+
const bbox = this.getProjectionBbox();
|
|
54
|
+
this.size = [viewWidth, (bbox[3] - bbox[1]) * viewWidth / (bbox[2] - bbox[0])];
|
|
55
|
+
if (this.tileLayerRenderer) {
|
|
56
|
+
this.tileLayerRenderer.updateTiles(this.getMinZoom() + this.zoomOffset);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
getMinZoom() {
|
|
60
|
+
const bbox = this.getProjectionBbox();
|
|
61
|
+
const maxBBox = this.projection === 'EPSG:3857' ? Projection.Max3857BBox : Projection.Max4326BBox;
|
|
62
|
+
const minZoom = Math.round(Math.log(Math.abs((maxBBox[2] - maxBBox[0]) / (bbox[3] - bbox[1]))) / Math.log(2));
|
|
63
|
+
return minZoom;
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* 设置地图投影坐标系
|
|
67
|
+
* @param projection 投影坐标系
|
|
68
|
+
*/
|
|
69
|
+
setProjection(projection) {
|
|
70
|
+
this.projection = projection;
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* 获取地图投影坐标系
|
|
74
|
+
* @returns 投影坐标系
|
|
75
|
+
*/
|
|
76
|
+
getProjectionBbox() {
|
|
77
|
+
const min = this.project([this.bbox[0], this.bbox[1]]);
|
|
78
|
+
const max = this.project([this.bbox[2], this.bbox[3]]);
|
|
79
|
+
return [min[0], min[1], max[0], max[1]];
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* 将wgs84坐标投影到地图坐标系
|
|
83
|
+
* @param coordinates 坐标
|
|
84
|
+
* @returns 投影后的坐标
|
|
85
|
+
*/
|
|
86
|
+
project(coordinates) {
|
|
87
|
+
if (this.projection === 'EPSG:3857') {
|
|
88
|
+
return Projection.EPSG4326To3857(coordinates);
|
|
89
|
+
}
|
|
90
|
+
return coordinates;
|
|
91
|
+
}
|
|
92
|
+
createGround() {
|
|
93
|
+
const ground = MeshBuilder.CreateGround("ground", { width: this.size[0], height: this.size[1] }, this.scene);
|
|
94
|
+
ground.parent = this.rootNode;
|
|
95
|
+
const groundMaterial = new GridMaterial('初始网格材质', this.scene);
|
|
96
|
+
groundMaterial.mainColor = new Color3(0, 0, 0);
|
|
97
|
+
groundMaterial.opacity = 0.8;
|
|
98
|
+
groundMaterial.lineColor = new Color3(0, 0, 0);
|
|
99
|
+
groundMaterial.backFaceCulling = false;
|
|
100
|
+
ground.material = groundMaterial;
|
|
101
|
+
}
|
|
102
|
+
dispose() {
|
|
103
|
+
this.disposed = true;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 坐标投影转换
|
|
3
|
+
*/
|
|
4
|
+
export declare class Projection {
|
|
5
|
+
static R: number;
|
|
6
|
+
static R_MINOR: number;
|
|
7
|
+
static MAX_LATITUDE: number;
|
|
8
|
+
static MAX_PROJECTED_COORD: number;
|
|
9
|
+
static EPSG4326: string;
|
|
10
|
+
static EPSG3857: string;
|
|
11
|
+
/**
|
|
12
|
+
* 投影坐标转换
|
|
13
|
+
* @param from 原始坐标系
|
|
14
|
+
* @param to 投影坐标系
|
|
15
|
+
* @param coordinates 坐标
|
|
16
|
+
* @returns 转换后的坐标
|
|
17
|
+
*/
|
|
18
|
+
static Transform(from: string, to: string, coordinates: number[]): number[];
|
|
19
|
+
/**
|
|
20
|
+
* EPSG:4326转EPSG:3857
|
|
21
|
+
* @param coordinates 坐标
|
|
22
|
+
* @returns 转换后的坐标
|
|
23
|
+
*/
|
|
24
|
+
static EPSG4326To3857(coordinates: number[]): number[];
|
|
25
|
+
/**
|
|
26
|
+
* EPSG:3857转EPSG:4326
|
|
27
|
+
* @param coordinates 坐标
|
|
28
|
+
* @returns 转换后的坐标
|
|
29
|
+
*/
|
|
30
|
+
static EPSG3857To4326(coordinates: number[]): number[];
|
|
31
|
+
/**
|
|
32
|
+
* EPSG:3857范围
|
|
33
|
+
*/
|
|
34
|
+
static Max3857BBox: [number, number, number, number];
|
|
35
|
+
/**
|
|
36
|
+
* EPSG:4326范围
|
|
37
|
+
*/
|
|
38
|
+
static Max4326BBox: [number, number, number, number];
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=Projection.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Projection.d.ts","sourceRoot":"","sources":["../../../../src/tool/map/Projection.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAU;IACrB,MAAM,CAAC,CAAC,SAAW;IACnB,MAAM,CAAC,OAAO,SAAoB;IAElC,MAAM,CAAC,YAAY,SAAgB;IACnC,MAAM,CAAC,mBAAmB,SAAmB;IAE7C,MAAM,CAAC,QAAQ,SAAe;IAC9B,MAAM,CAAC,QAAQ,SAAe;IAE9B;;;;;;OAMG;IACH,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE;IAahE;;;;OAIG;IACH,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE;IAmB3C;;;;OAIG;IACH,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE;IAa3C;;OAEG;IACH,MAAM,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAoF;IAExI;;OAEG;IACH,MAAM,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAwB;CAC7E"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
var _a;
|
|
2
|
+
/**
|
|
3
|
+
* 坐标投影转换
|
|
4
|
+
*/
|
|
5
|
+
export class Projection {
|
|
6
|
+
/**
|
|
7
|
+
* 投影坐标转换
|
|
8
|
+
* @param from 原始坐标系
|
|
9
|
+
* @param to 投影坐标系
|
|
10
|
+
* @param coordinates 坐标
|
|
11
|
+
* @returns 转换后的坐标
|
|
12
|
+
*/
|
|
13
|
+
static Transform(from, to, coordinates) {
|
|
14
|
+
if (from === to) {
|
|
15
|
+
return coordinates;
|
|
16
|
+
}
|
|
17
|
+
if (from === _a.EPSG4326 && to === _a.EPSG3857) {
|
|
18
|
+
return this.EPSG4326To3857(coordinates);
|
|
19
|
+
}
|
|
20
|
+
if (from === _a.EPSG3857 && to === _a.EPSG4326) {
|
|
21
|
+
return this.EPSG3857To4326(coordinates);
|
|
22
|
+
}
|
|
23
|
+
throw new Error(`Unsupported projection transformation: ${from} to ${to}`);
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* EPSG:4326转EPSG:3857
|
|
27
|
+
* @param coordinates 坐标
|
|
28
|
+
* @returns 转换后的坐标
|
|
29
|
+
*/
|
|
30
|
+
static EPSG4326To3857(coordinates) {
|
|
31
|
+
// 约束纬度范围到有效值
|
|
32
|
+
const lat = Math.max(-this.MAX_LATITUDE, Math.min(this.MAX_LATITUDE, coordinates[1]));
|
|
33
|
+
const lng = Math.max(-180, Math.min(180, coordinates[0]));
|
|
34
|
+
// 转换为弧度
|
|
35
|
+
const latRad = lat * Math.PI / 180;
|
|
36
|
+
const lngRad = lng * Math.PI / 180;
|
|
37
|
+
// Web墨卡托投影公式
|
|
38
|
+
const x = this.R * lngRad;
|
|
39
|
+
const y = this.R * Math.log(Math.tan(Math.PI / 4 + latRad / 2));
|
|
40
|
+
// 约束坐标范围
|
|
41
|
+
const clampedX = Math.max(-this.MAX_PROJECTED_COORD, Math.min(this.MAX_PROJECTED_COORD, x));
|
|
42
|
+
const clampedY = Math.max(-this.MAX_PROJECTED_COORD, Math.min(this.MAX_PROJECTED_COORD, y));
|
|
43
|
+
return [clampedX, clampedY];
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* EPSG:3857转EPSG:4326
|
|
47
|
+
* @param coordinates 坐标
|
|
48
|
+
* @returns 转换后的坐标
|
|
49
|
+
*/
|
|
50
|
+
static EPSG3857To4326(coordinates) {
|
|
51
|
+
// 约束坐标范围
|
|
52
|
+
const x = Math.max(-this.MAX_PROJECTED_COORD, Math.min(this.MAX_PROJECTED_COORD, coordinates[0]));
|
|
53
|
+
const y = Math.max(-this.MAX_PROJECTED_COORD, Math.min(this.MAX_PROJECTED_COORD, coordinates[1]));
|
|
54
|
+
// 反投影公式
|
|
55
|
+
const lng = x / this.R * 180 / Math.PI;
|
|
56
|
+
const latRad = 2 * Math.atan(Math.exp(y / this.R)) - Math.PI / 2;
|
|
57
|
+
const lat = latRad * 180 / Math.PI;
|
|
58
|
+
return [lng, lat];
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
_a = Projection;
|
|
62
|
+
Projection.R = 6378137;
|
|
63
|
+
Projection.R_MINOR = 6356752.314245179;
|
|
64
|
+
Projection.MAX_LATITUDE = 85.0511287798;
|
|
65
|
+
Projection.MAX_PROJECTED_COORD = _a.R * Math.PI;
|
|
66
|
+
Projection.EPSG4326 = "EPSG:4326";
|
|
67
|
+
Projection.EPSG3857 = "EPSG:3857";
|
|
68
|
+
/**
|
|
69
|
+
* EPSG:3857范围
|
|
70
|
+
*/
|
|
71
|
+
Projection.Max3857BBox = [-20037508.342789244, -20037508.33989489, 20037508.342789244, 20037508.33989489];
|
|
72
|
+
/**
|
|
73
|
+
* EPSG:4326范围
|
|
74
|
+
*/
|
|
75
|
+
Projection.Max4326BBox = [-180, -90, 180, 90];
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare class TileLayer {
|
|
2
|
+
name: string;
|
|
3
|
+
url: string;
|
|
4
|
+
bbox: [number, number, number, number];
|
|
5
|
+
constructor(name: string, url: string);
|
|
6
|
+
getTileUrl(x: number, y: number, z: number): string;
|
|
7
|
+
requestImage(x: number, y: number, z: number): Promise<HTMLImageElement>;
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=TileLayer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TileLayer.d.ts","sourceRoot":"","sources":["../../../../../src/tool/map/tile/TileLayer.ts"],"names":[],"mappings":"AAAA,qBAAa,SAAS;IACpB,IAAI,EAAE,MAAM,CAAM;IAClB,GAAG,EAAE,MAAM,CAAK;IAChB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAgB;gBAC1C,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;IAKrC,UAAU,CAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAI3C,YAAY,CAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC;CAY1E"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export class TileLayer {
|
|
2
|
+
constructor(name, url) {
|
|
3
|
+
this.name = "";
|
|
4
|
+
this.url = '';
|
|
5
|
+
this.bbox = [0, 0, 0, 0];
|
|
6
|
+
this.name = name;
|
|
7
|
+
this.url = url;
|
|
8
|
+
}
|
|
9
|
+
getTileUrl(x, y, z) {
|
|
10
|
+
return this.url.replace("{z}", z.toString()).replace("{x}", x.toString()).replace("{y}", y.toString());
|
|
11
|
+
}
|
|
12
|
+
requestImage(x, y, z) {
|
|
13
|
+
const url = this.getTileUrl(x, y, z);
|
|
14
|
+
const image = new Image();
|
|
15
|
+
image.crossOrigin = 'anonymous';
|
|
16
|
+
image.src = url;
|
|
17
|
+
return new Promise((resolve, reject) => {
|
|
18
|
+
image.onload = () => resolve(image);
|
|
19
|
+
image.onerror = () => reject(new Error("Failed to load image"));
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { Mesh } from "@babylonjs/core";
|
|
2
|
+
import { Layer } from "../Layer";
|
|
3
|
+
import { MapViewer } from "../MapViewer";
|
|
4
|
+
import { TileLayer } from "./TileLayer";
|
|
5
|
+
/**
|
|
6
|
+
* 瓦片图层渲染器
|
|
7
|
+
*/
|
|
8
|
+
export declare class TileLayerRenderer extends Layer {
|
|
9
|
+
/**
|
|
10
|
+
* 瓦片图层渲染器
|
|
11
|
+
*/
|
|
12
|
+
tileLayers: TileLayer[];
|
|
13
|
+
/**
|
|
14
|
+
* 地图视图
|
|
15
|
+
*/
|
|
16
|
+
mapViewer: MapViewer;
|
|
17
|
+
/**
|
|
18
|
+
* 最大范围
|
|
19
|
+
*/
|
|
20
|
+
maxBBox: [number, number, number, number];
|
|
21
|
+
/**
|
|
22
|
+
* 当前缩放级别
|
|
23
|
+
*/
|
|
24
|
+
currentZoom: number;
|
|
25
|
+
/**
|
|
26
|
+
* 已渲染的瓦片集合,使用 "x-y-z" 作为键
|
|
27
|
+
*/
|
|
28
|
+
private renderedTiles;
|
|
29
|
+
/**
|
|
30
|
+
* 摄像机位置观察者
|
|
31
|
+
*/
|
|
32
|
+
private cameraObserver;
|
|
33
|
+
/**
|
|
34
|
+
* 是否启用自动更新
|
|
35
|
+
*/
|
|
36
|
+
autoUpdate: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* 构造函数
|
|
39
|
+
* @param mapViewer 地图视图
|
|
40
|
+
*/
|
|
41
|
+
constructor(mapViewer: MapViewer);
|
|
42
|
+
get projectionBBox(): [number, number, number, number];
|
|
43
|
+
/**
|
|
44
|
+
* 获取地图范围
|
|
45
|
+
* @returns [minX, minY, maxX, maxY] 地图范围
|
|
46
|
+
*/
|
|
47
|
+
get bbox(): [number, number, number, number];
|
|
48
|
+
/**
|
|
49
|
+
* 获取地图大小
|
|
50
|
+
* @returns [width, height] 地图大小
|
|
51
|
+
*/
|
|
52
|
+
get size(): [number, number];
|
|
53
|
+
/**
|
|
54
|
+
* 获取地图投影
|
|
55
|
+
* @returns 地图投影
|
|
56
|
+
*/
|
|
57
|
+
get projection(): "EPSG:4326" | "EPSG:3857";
|
|
58
|
+
/**
|
|
59
|
+
* 根据地图投影坐标和缩放级别获取瓦片序号
|
|
60
|
+
* @param x 投影坐标X
|
|
61
|
+
* @param y 投影坐标Y
|
|
62
|
+
* @param z 缩放级别
|
|
63
|
+
* @returns [tileX, tileY] 瓦片序号
|
|
64
|
+
*/
|
|
65
|
+
positionToTile(x: number, y: number, z: number): [number, number];
|
|
66
|
+
/**
|
|
67
|
+
* 根据瓦片序号和缩放级别获取瓦片范围
|
|
68
|
+
* @param tileX 瓦片序号X
|
|
69
|
+
* @param tileY 瓦片序号Y
|
|
70
|
+
* @param z 缩放级别
|
|
71
|
+
* @returns [minX, minY, maxX, maxY] 瓦片范围
|
|
72
|
+
*/
|
|
73
|
+
tileToBBox(tileX: number, tileY: number, z: number): [number, number, number, number];
|
|
74
|
+
/**
|
|
75
|
+
* 根据瓦片序号和缩放级别获取瓦片中心点坐标
|
|
76
|
+
* @param tileX 瓦片序号X
|
|
77
|
+
* @param tileY 瓦片序号Y
|
|
78
|
+
* @param z 缩放级别
|
|
79
|
+
* @returns [centerX, centerY] 瓦片中心点坐标
|
|
80
|
+
*/
|
|
81
|
+
tileToCenter(tileX: number, tileY: number, z: number): [number, number];
|
|
82
|
+
/**
|
|
83
|
+
* 根据瓦片序号和缩放级别获取瓦片在视野中的尺寸大小
|
|
84
|
+
* @param tileX 瓦片序号X
|
|
85
|
+
* @param tileY 瓦片序号Y
|
|
86
|
+
* @param z 缩放级别
|
|
87
|
+
* @returns [width, height] 瓦片在视野中的宽度和高度(像素)
|
|
88
|
+
*/
|
|
89
|
+
tileToViewportSize(tileX: number, tileY: number, z: number): [number, number];
|
|
90
|
+
/**
|
|
91
|
+
* 将投影坐标转换为地图视野相对坐标
|
|
92
|
+
* @param x 投影坐标X
|
|
93
|
+
* @param y 投影坐标Y
|
|
94
|
+
* @returns [relativeX, relativeY] 相对于地图视野的坐标
|
|
95
|
+
*/
|
|
96
|
+
projectionToViewport(x: number, y: number): [number, number];
|
|
97
|
+
/**
|
|
98
|
+
* 根据瓦片序号和缩放级别获取瓦片网格
|
|
99
|
+
* @param tileX 瓦片序号X
|
|
100
|
+
* @param tileY 瓦片序号Y
|
|
101
|
+
* @param z 缩放级别
|
|
102
|
+
* @returns 瓦片网格
|
|
103
|
+
*/
|
|
104
|
+
getTileMesh(tileX: number, tileY: number, z: number): Mesh;
|
|
105
|
+
/**
|
|
106
|
+
* 获取调试画布
|
|
107
|
+
* @returns 调试画布元素
|
|
108
|
+
*/
|
|
109
|
+
getTileCanvas(tileX: number, tileY: number, z: number): HTMLCanvasElement;
|
|
110
|
+
updateTileTexture(tileX: number, tileY: number, z: number, tileMesh: Mesh): void;
|
|
111
|
+
/**
|
|
112
|
+
* 根据当前视野范围和缩放级别计算需要渲染的瓦片列表
|
|
113
|
+
* @param zoom 缩放级别
|
|
114
|
+
* @returns 需要渲染的瓦片坐标数组 [[tileX, tileY, z], ...]
|
|
115
|
+
*/
|
|
116
|
+
calculateVisibleTiles(zoom: number): Array<[number, number, number]>;
|
|
117
|
+
/**
|
|
118
|
+
* 更新瓦片渲染,只渲染当前视野内的瓦片
|
|
119
|
+
* @param zoom 缩放级别
|
|
120
|
+
*/
|
|
121
|
+
updateTiles(zoom: number): void;
|
|
122
|
+
/**
|
|
123
|
+
* 启用自动更新模式,监听摄像机变化自动更新瓦片
|
|
124
|
+
* @param zoom 缩放级别
|
|
125
|
+
*/
|
|
126
|
+
enableAutoUpdate(zoom?: number): void;
|
|
127
|
+
/**
|
|
128
|
+
* 禁用自动更新模式
|
|
129
|
+
*/
|
|
130
|
+
disableAutoUpdate(): void;
|
|
131
|
+
/**
|
|
132
|
+
* 设置缩放级别并更新瓦片
|
|
133
|
+
* @param zoom 缩放级别
|
|
134
|
+
*/
|
|
135
|
+
setZoom(zoom: number): void;
|
|
136
|
+
/**
|
|
137
|
+
* 清除所有已渲染的瓦片
|
|
138
|
+
*/
|
|
139
|
+
clearTiles(): void;
|
|
140
|
+
/**
|
|
141
|
+
* 释放资源
|
|
142
|
+
*/
|
|
143
|
+
dispose(): void;
|
|
144
|
+
}
|
|
145
|
+
//# sourceMappingURL=TileLayerRenderer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TileLayerRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/tool/map/tile/TileLayerRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAoE,MAAM,iBAAiB,CAAC;AACzG,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,KAAK;IAC1C;;OAEG;IACH,UAAU,EAAE,SAAS,EAAE,CAAM;IAC7B;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C;;OAEG;IACH,WAAW,EAAE,MAAM,CAAK;IACxB;;OAEG;IACH,OAAO,CAAC,aAAa,CAAgC;IACrD;;OAEG;IACH,OAAO,CAAC,cAAc,CAAiC;IACvD;;OAEG;IACH,UAAU,EAAE,OAAO,CAAS;IAC5B;;;OAGG;gBACS,SAAS,EAAE,SAAS;IAWhC,IAAI,cAAc,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAErD;IAED;;;OAGG;IACH,IAAI,IAAI,qCAEP;IAED;;;OAGG;IACH,IAAI,IAAI,qBAEP;IAED;;;OAGG;IACH,IAAI,UAAU,8BAEb;IAED;;;;;;OAMG;IACH,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAiBjE;;;;;;OAMG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;IAmBrF;;;;;;OAMG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAOvE;;;;;;OAMG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAc7E;;;;;OAKG;IACH,oBAAoB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAe5D;;;;;;OAMG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAmB1D;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,iBAAiB;IAmBzE,iBAAiB,CAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI;IAsC1E;;;;OAIG;IACH,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAuBpE;;;OAGG;IACH,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IA4B/B;;;OAGG;IACH,gBAAgB,CAAC,IAAI,GAAE,MAAU,GAAG,IAAI;IAmBxC;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAQzB;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAO3B;;OAEG;IACH,UAAU,IAAI,IAAI;IAOlB;;OAEG;IACH,OAAO,IAAI,IAAI;CAKhB"}
|