Skip to content

Commit 2c0e277

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【补充Cesium矢量瓦片的示例】
1 parent 5851588 commit 2c0e277

13 files changed

Lines changed: 325 additions & 3 deletions

File tree

‎website/public/static/demo/cesium/example/vectortile/darkstyle.htm‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="initial-scale=1,maximum-scale=1,user-scalable=no"
8+
/>
9+
<title>地层分析</title>
10+
<!--引入第三方的jquery脚本库-->
11+
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
12+
<script
13+
include="vectortile"
14+
src="./static/libs/include-cesium-local.js"
15+
></script>
16+
<style type="text/css">
17+
#GlobeView {
18+
width: 100%;
19+
height: 100%;
20+
}
21+
</style>
22+
<script>
23+
//在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
24+
"use strict";
25+
26+
//定义三维场景控件对象
27+
var webGlobe = undefined;
28+
//定义M3D图层对象
29+
var vectortileLayer = undefined;
30+
var chinaLayer = undefined;
31+
32+
//地图初始化函数
33+
function init() {
34+
//构造三维视图类（视图容器div的id，三维视图设置参数）
35+
webGlobe = new Cesium.WebSceneControl("GlobeView", {});
36+
//设置鼠标位置信息（经纬度、高程、视角高度）展示控件
37+
webGlobe.showPosition("coordinate_location");
38+
webGlobe.viewer.imageryLayers.removeAll();
39+
webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(
40+
74 / 255,
41+
74 / 255,
42+
74 / 255,
43+
1.0
44+
);
45+
// ccc4c4
46+
loopMvt();
47+
}
48+
49+
function loopMvt(index) {
50+
vectortileLayer = new CesiumZondy.Overlayer.VectorTileLayer(
51+
webGlobe.viewer,
52+
{
53+
styleUrl:
54+
"http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/深色-墨卡托.json",
55+
token: "",
56+
show: true,
57+
}
58+
);
59+
60+
window.setTimeout(() => {
61+
chinaLayer = new CesiumZondy.Overlayer.VectorTileLayer(
62+
webGlobe.viewer,
63+
{
64+
styleUrl:
65+
"http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/中国行政区.json",
66+
token: "",
67+
show: true,
68+
}
69+
);
70+
console.warn("chinaLayer", chinaLayer);
71+
}, 2000);
72+
}
73+
</script>
74+
</head>
75+
76+
<body onload="init()">
77+
<div id="GlobeView"></div>
78+
<!--坐标容器-->
79+
<div id="coordinateDiv" class="coordinateClass">
80+
<label id="coordinate_location"></label>
81+
<label id="coordinate_height"></label>
82+
</div>
83+
</body>
84+
</html>

‎website/public/static/demo/cesium/example/vectortile/lightstyle.htm‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="initial-scale=1,maximum-scale=1,user-scalable=no"
8+
/>
9+
<title>地层分析</title>
10+
<!--引入第三方的jquery脚本库-->
11+
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
12+
<script
13+
include="vectortile"
14+
src="./static/libs/include-cesium-local.js"
15+
></script>
16+
<style type="text/css">
17+
#GlobeView {
18+
width: 100%;
19+
height: 100%;
20+
}
21+
</style>
22+
<script>
23+
//在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
24+
"use strict";
25+
26+
//定义三维场景控件对象
27+
var webGlobe = undefined;
28+
//定义M3D图层对象
29+
var vectortileLayer = undefined;
30+
var chinaLayer = undefined;
31+
32+
//地图初始化函数
33+
function init() {
34+
//构造三维视图类（视图容器div的id，三维视图设置参数）
35+
webGlobe = new Cesium.WebSceneControl("GlobeView", {});
36+
//设置鼠标位置信息（经纬度、高程、视角高度）展示控件
37+
webGlobe.showPosition("coordinate_location");
38+
webGlobe.viewer.imageryLayers.removeAll();
39+
webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(
40+
246 / 255,
41+
244 / 255,
42+
244 / 255,
43+
1.0
44+
);
45+
// ccc4c4
46+
loopMvt();
47+
}
48+
49+
function loopMvt(index) {
50+
vectortileLayer = new CesiumZondy.Overlayer.VectorTileLayer(
51+
webGlobe.viewer,
52+
{
53+
styleUrl:
54+
"http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/浅色-墨卡托.json",
55+
token: "",
56+
show: true,
57+
}
58+
);
59+
60+
window.setTimeout(() => {
61+
chinaLayer = new CesiumZondy.Overlayer.VectorTileLayer(
62+
webGlobe.viewer,
63+
{
64+
styleUrl:
65+
"http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/中国行政区.json",
66+
token: "",
67+
show: true,
68+
}
69+
);
70+
console.warn("chinaLayer", chinaLayer);
71+
}, 2000);
72+
}
73+
</script>
74+
</head>
75+
76+
<body onload="init()">
77+
<div id="GlobeView"></div>
78+
<!--坐标容器-->
79+
<div id="coordinateDiv" class="coordinateClass">
80+
<label id="coordinate_location"></label>
81+
<label id="coordinate_height"></label>
82+
</div>
83+
</body>
84+
</html>

‎website/public/static/demo/cesium/example/vectortile/mapboxstyle.htm‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="initial-scale=1,maximum-scale=1,user-scalable=no"
8+
/>
9+
<title>地层分析</title>
10+
<!--引入第三方的jquery脚本库-->
11+
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
12+
<script
13+
include="vectortile"
14+
src="./static/libs/include-cesium-local.js"
15+
></script>
16+
<style type="text/css">
17+
#GlobeView {
18+
width: 100%;
19+
height: 100%;
20+
}
21+
</style>
22+
<script>
23+
//在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
24+
"use strict";
25+
26+
//定义三维场景控件对象
27+
var webGlobe = undefined;
28+
//定义M3D图层对象
29+
var vectortileLayer = undefined;
30+
31+
//地图初始化函数
32+
function init() {
33+
//构造三维视图类（视图容器div的id，三维视图设置参数）
34+
webGlobe = new Cesium.WebSceneControl("GlobeView", {});
35+
//设置鼠标位置信息（经纬度、高程、视角高度）展示控件
36+
webGlobe.showPosition("coordinate_location");
37+
webGlobe.viewer.imageryLayers.removeAll();
38+
webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(
39+
74 / 255,
40+
74 / 255,
41+
74 / 255,
42+
0.05
43+
);
44+
// ccc4c4
45+
loopMvt();
46+
}
47+
48+
function loopMvt(index) {
49+
vectortileLayer = new CesiumZondy.Overlayer.VectorTileLayer(
50+
webGlobe.viewer,
51+
{
52+
styleUrl: "./static/data/mapbox/toner.json",
53+
token:
54+
"pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA",
55+
show: true,
56+
}
57+
);
58+
}
59+
</script>
60+
</head>
61+
62+
<body onload="init()">
63+
<div id="GlobeView"></div>
64+
<!--坐标容器-->
65+
<div id="coordinateDiv" class="coordinateClass">
66+
<label id="coordinate_location"></label>
67+
<label id="coordinate_height"></label>
68+
</div>
69+
</body>
70+
</html>

‎website/public/static/demo/cesium/example/vectortile/mapgisstyle.htm‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="initial-scale=1,maximum-scale=1,user-scalable=no"
8+
/>
9+
<title>地层分析</title>
10+
<!--引入第三方的jquery脚本库-->
11+
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
12+
<script
13+
include="vectortile"
14+
src="./static/libs/include-cesium-local.js"
15+
></script>
16+
<style type="text/css">
17+
#GlobeView {
18+
width: 100%;
19+
height: 100%;
20+
}
21+
</style>
22+
<script>
23+
//在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
24+
"use strict";
25+
26+
//定义三维场景控件对象
27+
var webGlobe = undefined;
28+
//定义M3D图层对象
29+
var vectortileLayer = undefined;
30+
var chinaLayer = undefined;
31+
32+
//地图初始化函数
33+
function init() {
34+
//构造三维视图类（视图容器div的id，三维视图设置参数）
35+
webGlobe = new Cesium.WebSceneControl("GlobeView", {});
36+
//设置鼠标位置信息（经纬度、高程、视角高度）展示控件
37+
webGlobe.showPosition("coordinate_location");
38+
webGlobe.viewer.imageryLayers.removeAll();
39+
webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(
40+
204 / 255,
41+
196 / 255,
42+
196 / 255,
43+
1.0
44+
);
45+
// ccc4c4
46+
loopMvt();
47+
}
48+
49+
function loopMvt(index) {
50+
vectortileLayer = new CesiumZondy.Overlayer.VectorTileLayer(
51+
webGlobe.viewer,
52+
{
53+
styleUrl:
54+
"http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/街道-墨卡托.json",
55+
token: "",
56+
show: true,
57+
}
58+
);
59+
60+
window.setTimeout(() => {
61+
chinaLayer = new CesiumZondy.Overlayer.VectorTileLayer(
62+
webGlobe.viewer,
63+
{
64+
styleUrl:
65+
"http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/中国行政区.json",
66+
token: "",
67+
show: true,
68+
}
69+
);
70+
console.warn("chinaLayer", chinaLayer);
71+
}, 2000);
72+
}
73+
</script>
74+
</head>
75+
76+
<body onload="init()">
77+
<div id="GlobeView"></div>
78+
<!--坐标容器-->
79+
<div id="coordinateDiv" class="coordinateClass">
80+
<label id="coordinate_location"></label>
81+
<label id="coordinate_height"></label>
82+
</div>
83+
</body>
84+
</html>

‎website/public/static/demo/cesium/gallery/vectortile/bluestyle.png‎

213 KB
Loading

‎website/public/static/demo/cesium/gallery/vectortile/darkstyle.png‎

119 KB
Loading

‎website/public/static/demo/cesium/gallery/vectortile/lightstyle.png‎

96.3 KB
Loading

‎website/public/static/demo/cesium/gallery/vectortile/mapboxstyle.png‎

69.3 KB
Loading

‎website/public/static/demo/cesium/gallery/vectortile/mapgisstyle.png‎

136 KB
Loading

‎website/public/static/demo/cesium/gallery/vectortile/vt-dark.png‎

92.6 KB
Loading

0 commit comments

Comments
 (0)