1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
| // src/utils/CesiumInstance.js
| import * as Cesium from 'cesium';
| import { Cartesian3, Ion, Math as CesiumMath, Terrain, Viewer, Color, Entity } from 'cesium';
| import AmapMercatorTilingScheme from '@/utils/cesium/AmapMercatorTilingScheme';
|
| window.CESIUM_BASE_URL = '/cesiumPu';
|
| const TDT_Token = 'c6eea7dad4fa1e2d1e32ec0e7c9735db';
| // 天地图地图
| const TDT_IMG_C =
| 'https://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
| '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
| '&style=default&format=tiles&tk=' +
| TDT_Token;
| // 天地图注记
| const TDT_ZJ =
| 'https://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
| '&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
| '&style=default&format=tiles&tk=' +
| TDT_Token;
| // 标准地图注记
| const TID_STAND =
| 'https://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
| '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
| '&style=default&format=tiles&tk=' +
| TDT_Token;
| // 天地图图层变量
| const imageryProvider_tdt = new Cesium.WebMapTileServiceImageryProvider({
| url: TDT_IMG_C,
| layer: 'tdtImg_c',
| style: 'default',
| format: 'tiles',
| tileMatrixSetID: 'c',
| subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
| tilingScheme: new Cesium.GeographicTilingScheme(),
| tileMatrixLabels: [
| '1',
| '2',
| '3',
| '4',
| '5',
| '6',
| '7',
| '8',
| '9',
| '10',
| '11',
| '12',
| '13',
| '14',
| '15',
| '16',
| '17',
| '18',
| '19',
| ],
| maximumLevel: 17,
| });
| // 标准地图图层变量
| const imageryProvider_stand = new Cesium.UrlTemplateImageryProvider({
| url: 'https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
| subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
| // format: 'image/jpeg',
| // show: true,
| maximumLevel: 18,
| credit: 'stand_tc',
| });
| // 标准地图图层注解
| const imageryProvider_standZh = new Cesium.UrlTemplateImageryProvider({
| url: 'https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
| subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
| maximumLevel: 18,
| credit: 'stand_zj',
| });
| // 天地图中文注记加载
| const annotation = new Cesium.WebMapTileServiceImageryProvider({
| url: TDT_ZJ,
| layer: 'tdtZwImg_c',
| style: 'default',
| format: 'tiles',
| tileMatrixSetID: 'c',
| subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
| tilingScheme: new Cesium.GeographicTilingScheme(),
| tileMatrixLabels: [
| '1',
| '2',
| '3',
| '4',
| '5',
| '6',
| '7',
| '8',
| '9',
| '10',
| '11',
| '12',
| '13',
| '14',
| '15',
| '16',
| '17',
| '18',
| '19',
| ],
| maximumLevel: 50,
| });
|
| // 高德地图图层变量
| //高德矢量地图数据图层，自带注记
| const imageryProvider_ammapSL = new Cesium.UrlTemplateImageryProvider({
| url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
| layer: 'tdtVecBasicLayer',
| style: 'default',
| format: 'image/png',
| tileMatrixSetID: 'GoogleMapsCompatible',
| subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
| maximumLevel: 18,
| tilingScheme: new AmapMercatorTilingScheme(),
| credit: 'amap_SL',
| });
|
| //高德影像地图数据图层，自带注记
| const imageryProvider_ammap = new Cesium.UrlTemplateImageryProvider({
| url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
| layer: 'tdtVecBasicLayer',
| style: 'default',
| format: 'image/png',
| tileMatrixSetID: 'GoogleMapsCompatible',
| subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
| maximumLevel: 18,
| tilingScheme: new AmapMercatorTilingScheme(),
| credit: 'amap_stand',
| });
| // 高德影像地图数据图层，注记
| const imageryProvider_ammapBz = new Cesium.UrlTemplateImageryProvider({
| url: 'https://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
| tilingScheme: new AmapMercatorTilingScheme(),
| minimumLevel: 3,
| });
|
| Cesium.Ion.defaultAccessToken =
| 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMzg4MDk5YS05MWEzLTQ3NTYtOTYzNS04Yzk4MjU2MjI5N2YiLCJpZCI6MjE3OTM4LCJpYXQiOjE3MTY3NzIzOTR9.q1rzR7SRtIulQKTtJuv5HPUbp1av5E9RaOe-6voPDGc';
|
| const cesiumToken =
| 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYTZlNGNlYS01NTU1LTQ1MGEtYmNlZS0yNTE2NDk5YWM2MjEiLCJpZCI6MTc5Njk2LCJpYXQiOjE3MDA1NDcwMjV9.qcl4AH2731cfFd0-I1ZLUINPXqvglLkDFD-UGR2zU5M';
| Cesium.Ion.defaultAccessToken = cesiumToken;
| Cesium.Camera.DEFAULT_VIEW_FACTOR = -0.45;
| // 西南东北，默认显示中国
| Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(66, 4, 135, 53.55);
|
| class CesiumInstance {
| constructor(containerId) {
| if (!CesiumInstance.instance) {
| const viewer = new Cesium.Viewer(containerId, {
| timeline: false, // 时间线
| animation: false, // 动画控制
| geocoder: false, // 搜索按钮编码器
| baseLayerPicker: false, // 基础图层选择器
| navigationHelpButton: false, // 帮助按钮
| fullscreenButton: false, // 全屏按钮
| homeButton: false, // 初视角按钮
| sceneModePicker: false, // 投影方式选择器
| selectionIndicator: false, // 禁用选择指示器
| infoBox: false, // 禁用信息框
| shouldAnimate: true,
| });
| viewer.imageryLayers.removeAll();
| viewer.cesiumWidget.creditContainer.style.display = 'none';
| viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
| Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
| ); // 禁用双击
| viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
| viewer.scene.screenSpaceCameraController.maximumZoomDistance = 4500000;
| viewer.imageryLayers.addImageryProvider(imageryProvider_ammap);
| window.$viewer = viewer;
| this.viewer = viewer;
| CesiumInstance.instance = this; // 保存单例实例
| }
| return CesiumInstance.instance;
| }
|
| getViewer() {
| return this.viewer;
| }
| }
|
| export default CesiumInstance;
|
|
