Skip to content

Commit 5ec8a22

Browse files
author
hezhentao
committed
【示例】【修改】【修改示例问题】
1 parent aeb0f3c commit 5ec8a22

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+4673
-6170
lines changed

‎website/public/static/demo/cesium/example/scene/scene-operation.htm‎

Lines changed: 101 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<html xmlns="http://www.w3.org/1999/xhtml">
33

44
<head>
5-
<meta charset='utf-8' />
6-
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
77
<title>场景操作</title>
88
<!--引入第三方的jquery脚本库-->
99
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
@@ -19,7 +19,7 @@
1919
function init() {
2020
//构造三维视图类（视图容器div的id，三维视图设置参数）
2121
webGlobe = new Cesium.WebSceneControl('GlobeView', {
22-
terrainExaggeration: 1,
22+
terrainExaggeration: 1
2323
});
2424
//初始化视图功能管理类
2525
sceneManager = new CesiumZondy.Manager.SceneManager({
@@ -28,39 +28,111 @@
2828
}
2929

3030
function zoomin() {
31-
sceneManager.zoomIn();//放大
31+
sceneManager.zoomIn(); //放大
3232
}
3333

3434
function zoomout() {
35-
sceneManager.zoomOut();//缩小
35+
sceneManager.zoomOut(); //缩小
3636
}
3737

3838
function gohome() {
39-
sceneManager.goHome();//复位
39+
sceneManager.goHome(); //复位
4040
}
4141

4242
function start() {
43-
sceneManager.openRotation();//开启自转
43+
sceneManager.openRotation(); //开启自转
4444
}
4545

4646
function stop() {
47-
sceneManager.closeRotation();//关闭自转
47+
sceneManager.closeRotation(); //关闭自转
4848
}
4949

50-
function change() {
51-
var skybox = new Cesium.SkyBox({
52-
sources: {
53-
positiveX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/front.jpg',
54-
negativeX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/back.jpg',
55-
positiveY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/left.jpg',
56-
negativeY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/right.jpg',
57-
positiveZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/top.jpg',
58-
negativeZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/bottom.jpg'
59-
}
60-
});
61-
sceneManager.changeSkyBox(skybox);
50+
function change(value) {
51+
switch (value) {
52+
case 'skybox':
53+
var skybox = new Cesium.SkyBox({
54+
sources: {
55+
positiveX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox/tycho2t3_80_px.jpg',
56+
negativeX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mx.jpg',
57+
positiveY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox/tycho2t3_80_py.jpg',
58+
negativeY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox/tycho2t3_80_my.jpg',
59+
positiveZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox/tycho2t3_80_pz.jpg',
60+
negativeZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mz.jpg'
61+
}
62+
});
63+
sceneManager.changeSkyBox(skybox);
64+
}
65+
switch (value) {
66+
case 'skybox2':
67+
var skybox = new Cesium.SkyBox({
68+
sources: {
69+
positiveX: './static/data/skybox/SkyBox2/tycho2t3_80_px.jpg',
70+
negativeX: './static/data/skybox/SkyBox2/tycho2t3_80_mx.jpg',
71+
positiveY: './static/data/skybox/SkyBox2/tycho2t3_80_py.jpg',
72+
negativeY: './static/data/skybox/SkyBox2/tycho2t3_80_my.jpg',
73+
positiveZ: './static/data/skybox/SkyBox2/tycho2t3_80_pz.jpg',
74+
negativeZ: './static/data/skybox/SkyBox2/tycho2t3_80_mz.jpg'
75+
}
76+
});
77+
sceneManager.changeSkyBox(skybox);
78+
}
79+
switch (value) {
80+
case 'skybox3':
81+
var skybox = new Cesium.SkyBox({
82+
sources: {
83+
positiveX: './static/data/skybox/SkyBox3/tycho2t3_80_px.jpg',
84+
negativeX: './static/data/skybox/SkyBox3/tycho2t3_80_mx.jpg',
85+
positiveY: './static/data/skybox/SkyBox3/tycho2t3_80_py.jpg',
86+
negativeY: './static/data/skybox/SkyBox3/tycho2t3_80_my.jpg',
87+
positiveZ: './static/data/skybox/SkyBox3/tycho2t3_80_pz.jpg',
88+
negativeZ: './static/data/skybox/SkyBox3/tycho2t3_80_mz.jpg'
89+
}
90+
});
91+
sceneManager.changeSkyBox(skybox);
92+
}
93+
switch (value) {
94+
case 'skybox4':
95+
var skybox = new Cesium.SkyBox({
96+
sources: {
97+
positiveX: './static/data/skybox/SkyBox4/tycho2t3_80_px.jpg',
98+
negativeX: './static/data/skybox/SkyBox4/tycho2t3_80_mx.jpg',
99+
positiveY: './static/data/skybox/SkyBox4/tycho2t3_80_py.jpg',
100+
negativeY: './static/data/skybox/SkyBox4/tycho2t3_80_my.jpg',
101+
positiveZ: './static/data/skybox/SkyBox4/tycho2t3_80_pz.jpg',
102+
negativeZ: './static/data/skybox/SkyBox4/tycho2t3_80_mz.jpg'
103+
}
104+
});
105+
sceneManager.changeSkyBox(skybox);
106+
}
107+
switch (value) {
108+
case 'skybox5':
109+
var skybox = new Cesium.SkyBox({
110+
sources: {
111+
positiveX: './static/data/skybox/SkyBox5/tycho2t3_80_px.jpg',
112+
negativeX: './static/data/skybox/SkyBox5/tycho2t3_80_mx.jpg',
113+
positiveY: './static/data/skybox/SkyBox5/tycho2t3_80_py.jpg',
114+
negativeY: './static/data/skybox/SkyBox5/tycho2t3_80_my.jpg',
115+
positiveZ: './static/data/skybox/SkyBox5/tycho2t3_80_pz.jpg',
116+
negativeZ: './static/data/skybox/SkyBox5/tycho2t3_80_mz.jpg'
117+
}
118+
});
119+
sceneManager.changeSkyBox(skybox);
120+
}
121+
switch (value) {
122+
case 'skybox6':
123+
var skybox = new Cesium.SkyBox({
124+
sources: {
125+
positiveX: './static/data/skybox/SkyBox6/tycho2t3_80_px.jpg',
126+
negativeX: './static/data/skybox/SkyBox6/tycho2t3_80_mx.jpg',
127+
positiveY: './static/data/skybox/SkyBox6/tycho2t3_80_py.jpg',
128+
negativeY: './static/data/skybox/SkyBox6/tycho2t3_80_my.jpg',
129+
positiveZ: './static/data/skybox/SkyBox6/tycho2t3_80_pz.jpg',
130+
negativeZ: './static/data/skybox/SkyBox6/tycho2t3_80_mz.jpg'
131+
}
132+
});
133+
sceneManager.changeSkyBox(skybox);
134+
}
62135
}
63-
64136
</script>
65137
</head>
66138

@@ -72,7 +144,14 @@
72144
<button id="goHome" onclick="gohome()">复位</button>
73145
<button id="openRotation" onclick="start()">开启自转</button>
74146
<button id="closeRotation" onclick="stop()">关闭自转</button>
75-
<button id="change" onclick="change()">修改天空盒</button>
147+
<select onchange="change(this.value)">
148+
<option value="skybox">初始天空盒</option>
149+
<option value="skybox2">天空盒2</option>
150+
<option value="skybox3">天空盒3</option>
151+
<option value="skybox4">天空盒4</option>
152+
<option value="skybox5">天空盒5</option>
153+
<option value="skybox6">天空盒6</option>
154+
</select>
76155
</div>
77156
</div>
78157
</body>

‎website/public/static/demo/cesium/example/scene/scene-undergroundMode.htm‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
//背景色设置
3737
webGlobe.viewer.scene.baseColor = new Cesium.Color(255 / 255, 255 / 255, 255 / 255, 1);
3838
webGlobe.viewer.scene.globe.imageryLayers.get(0).alpha = 1;
39-
webGlobe.viewer.scene.globe.imageryLayers.get(1).alpha = 1;
4039
}
4140

4241
function undergroundTwo() {
@@ -54,7 +53,6 @@
5453
//背景颜色设置
5554
webGlobe.viewer.scene.baseColor = new Cesium.Color(255 / 255, 255 / 255, 255 / 255, 0.0001);
5655
webGlobe.viewer.scene.globe.imageryLayers.get(0).alpha = 0;
57-
webGlobe.viewer.scene.globe.imageryLayers.get(1).alpha = 0;
5856
}
5957

6058
function goDefault() {
@@ -69,7 +67,6 @@
6967
//背景色设置
7068
webGlobe.viewer.scene.baseColor = new Cesium.Color(255 / 255, 255 / 255, 255 / 255, 1);
7169
webGlobe.viewer.scene.globe.imageryLayers.get(0).alpha = 1;
72-
webGlobe.viewer.scene.globe.imageryLayers.get(1).alpha = 1;
7370
//复位
7471
sceneManager.goHome();
7572
}

‎website/public/static/demo/cesium/example/third/third-osm.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
## 加载 OSM 地图
2+
3+
### 示例功能
4+
5+
&ensp; &ensp; &ensp; &ensp; 本示例对接高德地图服务，实现在三维场景中加载高德地图，坐标系为 EPSG:3857，即 Web 墨卡托坐标系，网络为公网地址。
6+
7+
### 示例实现
8+
9+
&ensp; &ensp; &ensp; &ensp; 本示例需要使用【include-cesium-local.js】开发库实现，关键接口为 `CesiumZondy. Layer. ThirdPartyLayer` 类提供的 `appendOsmMap()` 方法，以此来加载高德地图。
10+
11+
> 开发库使用请参见*首页-概述-原生 JS 调用*内容。
12+
13+
> 特别说明：使用 osm 地图请注意 `藏南` 与 `南海九段线` 问题，建议使用天地图。
14+
15+
### 实现步骤
16+
17+
**Step 1. <font color=red>引用开发库</font>**：
18+
19+
&ensp; &ensp; &ensp; &ensp; 本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能；
20+
21+
**Step 2. <font color=red>创建布局</font>**：
22+
23+
&ensp; &ensp; &ensp; &ensp; 创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式；
24+
25+
**Step 3. <font color=red>构造三维场景控件</font>**：
26+
27+
&ensp; &ensp; &ensp; &ensp; 实例化 `Cesium. WebSceneControl` 对象，完成此步骤后可在三维场景中加载三维球控件；
28+
29+
- Example:
30+
31+
```javascript
32+
//构造三维视图对象（视图容器 div 的 id，三维视图设置参数）
33+
webGlobe = new Cesium.WebSceneControl('GlobeView', {});
34+
```
35+
36+
**Step 4. <font color=red>加载数据</font>**:
37+
38+
&ensp; &ensp; &ensp; &ensp; 加载数据：创建第三方数据图层类 `CesiumZondy. Layer. ThirdPartyLayer` 的对象，调用 `appendOsmMap()` 方法加载 osm 地图。
39+
40+
- Example:
41+
42+
```javascript
43+
//构造第三方图层对象
44+
thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
45+
viewer: webGlobe.viewer
46+
});
47+
//加载OSM地图
48+
var osm = thirdPartyLayer.appendOsmMap();
49+
```
50+
51+
### 关键接口
52+
53+
#### 1.【三维场景控件类】 `Cesium. WebSceneControl(elementId, options)`
54+
55+
| 参数名 | 类 型 | 说 明 |
56+
| --------- | ----------------- | -------------------- |
57+
| elementId | Element \| String | 放置视图的 div 的 id |
58+
| options | Object | （可选）附加属性 |
59+
60+
- `options`属性主要参数
61+
62+
| 参数名 | 类 型 | 默认值 | 说 明 |
63+
| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- |
64+
| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 |
65+
| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 |
66+
| animation | Boolean | true | （可选）默认动画控制不显示 |
67+
| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 |
68+
| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 |
69+
| vrButton | Boolean | false | （可选）是否创建 VR 按钮 |
70+
71+
#### 2.【第三方数据图层类】 `CesiumZondy. Layer. ThirdPartyLayer`
72+
73+
##### 【method】 `appendOsmMap(optionsParam) → {ImageryLayer}` ：添加 osm 地图服务。
74+
75+
| 参数名 | 类 型 | 说 明 |
76+
| ------------ | ------ | -------- |
77+
| optionsParam | Object | 附加属性 |

‎website/public/static/demo/cesium/markdown/mapgis/mapgis-2d-layer.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
## 添加二维矢量图层服务
2+
3+
### 示例功能
4+
5+
&ensp; &ensp; &ensp; &ensp; 本示例实现在三维场景中加载在线二维地图数据，对接 MapGIS 中的矢量图层。
6+
7+
### 示例实现
8+
9+
&ensp; &ensp; &ensp; &ensp; 数据准备：需在 MapGIS 桌面端中获取矢量图层 的 url 。
10+
11+
&ensp; &ensp; &ensp; &ensp; 本示例需要使用【include-cesium-local.js】开发库实现，关键接口为 `CesiumZondy. Layer. TilesLayer` 类提供的 `append2DDocTile()` 方法，以此来加载 IGServer 矢量图层服务数据。
12+
13+
> 开发库使用请参见*首页-概述-原生 JS 调用*内容。
14+
15+
### 实现步骤
16+
17+
**Step 1. <font color=red>引用开发库</font>**：
18+
19+
&ensp; &ensp; &ensp; &ensp; 本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能；
20+
21+
**Step 2. <font color=red>创建布局</font>**：
22+
23+
&ensp; &ensp; &ensp; &ensp; 创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式；
24+
25+
**Step 3. <font color=red>构造三维场景控件</font>**：
26+
27+
&ensp; &ensp; &ensp; &ensp; 实例化 `Cesium. WebSceneControl` 对象，完成此步骤后可在三维场景中加载三维球控件；
28+
29+
- Example:
30+
```JavaScript
31+
//构造三维视图对象（视图容器div的id，三维视图设置参数）
32+
var webGlobe = new Cesium.WebSceneControl('GlobeView', {});
33+
```
34+
35+
**Step 4. <font color=red>加载数据</font>**:
36+
37+
&ensp; &ensp; &ensp; &ensp; 加载数据：首先构造 `CesiumZondy. Layer. TilesLayer` 瓦片图层管理对象，然后调用 `append2DDocTile()` 方法，传入地图服务的 URL 地址及相关参数，即可加载 IGServer 二维矢量地图数据。
38+
39+
* Example:
40+
41+
```javascript
42+
//构造瓦片图层管理对象（视图）
43+
var layer = new CesiumZondy.Layer.TilesLayer({
44+
viewer: webGlobe.viewer
45+
});
46+
//添加MapGIS IGServer发布的二维地图文档服务
47+
vecDoc = layer.append2DDocTile(`${protocol}://${ip}:${port}/igs/rest/mrms/layers`, {
48+
gdbps: ['GDBP://MapGISLocalPlus/北京市/ds/行政区/sfcls/北京市']
49+
});
50+
```
51+
52+
### 关键接口
53+
54+
#### 1.【三维场景控件类】 `Cesium. WebSceneControl(elementId, options)`
55+
56+
| 参数名 | 类 型 | 说 明 |
57+
| --------- | ----------------- | -------------------- |
58+
| elementId | Element \| String | 放置视图的 div 的 id |
59+
| options | Object | （可选）附加属性 |
60+
61+
* `options`属性主要参数
62+
63+
| 参数名 | 类 型 | 默认值 | 说 明 |
64+
| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- |
65+
| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 |
66+
| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 |
67+
| animation | Boolean | true | （可选）默认动画控制不显示 |
68+
| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 |
69+
| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 |
70+
| vrButton | Boolean | false | （可选）是否创建 VR 按钮 |
71+
72+
#### 2.【瓦片图层管理类】 `CesiumZondy. Layer. TilesLayer`
73+
74+
##### 【method】 `append2DDocTile(url, options)` ：加载二维地图文档瓦片
75+
76+
| 参数名 | 类 型 | 说 明 |
77+
| ------- | ------ | -------------- |
78+
| url | String | 矢量地图url地址 |
79+
| options | Object | 附加属性 |
80+
81+
* `options`属性主要参数
82+
83+
| 参数名 | 类 型 | 默认值 | 说 明 |
84+
| ------------------ | --------- | ------ | ------------------------------------------------------------ |
85+
| options.tileRange= | Rectangle | 无 | Rectangle.fromDegrees(-180, -90, 180, 90) 默认范围为全球范围 |
86+
| colNum | Number | 2 | 瓦片初始级的列数 |
87+
| rowNum | Number | 1 | 瓦片初始级的行数 |
88+
| maxLevel | Number | 19 | 瓦片最大显示级数 |
89+
| proxy | String | 无 | 转发代理，不存在跨域可不设置 |

0 commit comments

Comments
 (0)