Skip to content

Commit fc65eaa

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增Vue组件-地形组件的示例】
1 parent b30d54f commit fc65eaa

7 files changed

Lines changed: 237 additions & 0 deletions

File tree

‎website/public/static/demo/cesium/example/vue/model/igsm3d.htm‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>Vue-地图文档-M3D</title>
7+
<script include="vue" exclude="plugin" src="./static/libs/include-cesium-local.js"></script>
8+
<style type="text/css">
9+
#app {
10+
height: 100vh;
11+
width: 100vw;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
<div id="app">
18+
<cesium-web-globe
19+
v-bind:ref="webgloberef"
20+
v-bind:animation="false"
21+
v-bind:timeline="false"
22+
v-on:load="handleLoad"
23+
libPath="./static/libs/cdn/cesium/Cesium.js"
24+
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
25+
>
26+
<cesium-igs-m3d v-bind:url="url"> </cesium-igs-m3d>
27+
<cesium-ogc-wmts-layer v-bind:url="tiandidu" v-bind:options="tiandiduoptions"></cesium-ogc-wmts-layer>
28+
</cesium-web-globe>
29+
</div>
30+
<script>
31+
let draw = new Vue({
32+
el: '#app',
33+
data() {
34+
return {
35+
webgloberef: 'webgloberef' + Math.random(),
36+
url: 'http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels',
37+
tiandidu:
38+
'http://t0.tianditu.com/DataServer?T=vec_c' +
39+
'&L={TileMatrix}&Y={TileRow}&X={TileCol}' +
40+
'&tk=9c157e9585486c02edf817d2ecbc7752',
41+
tiandiduoptions: {
42+
tilingScheme: 'EPSG:4490',
43+
tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
44+
}
45+
};
46+
},
47+
methods: {
48+
handleLoad(e) {
49+
console.log('地图加初始化完毕！', e);
50+
}
51+
}
52+
});
53+
</script>
54+
</body>
55+
</html>

‎website/public/static/demo/cesium/example/vue/model/tileset.htm‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>Vue-地图文档-M3D</title>
7+
<script include="vue" exclude="plugin" src="./static/libs/include-cesium-local.js"></script>
8+
<style type="text/css">
9+
#app {
10+
height: 100vh;
11+
width: 100vw;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
<div id="app">
18+
<cesium-web-globe
19+
v-bind:ref="webgloberef"
20+
v-bind:animation="false"
21+
v-bind:timeline="false"
22+
v-on:load="handleLoad"
23+
libPath="./static/libs/cdn/cesium/Cesium.js"
24+
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
25+
>
26+
<cesium-3d-tileset v-bind:url="url"> </cesium-3d-tileset>
27+
<cesium-ogc-wmts-layer v-bind:url="tiandidu" v-bind:options="tiandiduoptions"></cesium-ogc-wmts-layer>
28+
</cesium-web-globe>
29+
</div>
30+
<script>
31+
let draw = new Vue({
32+
el: '#app',
33+
data() {
34+
return {
35+
webgloberef: 'webgloberef' + Math.random(),
36+
url: './static/data/3DTile/Tileset/tileset.json',
37+
tiandidu:
38+
'http://t0.tianditu.com/DataServer?T=vec_c' +
39+
'&L={TileMatrix}&Y={TileRow}&X={TileCol}' +
40+
'&tk=9c157e9585486c02edf817d2ecbc7752',
41+
tiandiduoptions: {
42+
tilingScheme: 'EPSG:4490',
43+
tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
44+
}
45+
};
46+
},
47+
methods: {
48+
handleLoad(e) {
49+
console.log('地图加初始化完毕！', e);
50+
}
51+
}
52+
});
53+
</script>
54+
</body>
55+
</html>

‎website/public/static/demo/cesium/example/vue/raster/dem.htm‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>Vue-Dem</title>
7+
<script include="vue" exclude="plugin" src="./static/libs/include-cesium-local.js"></script>
8+
<style type="text/css">
9+
#app {
10+
height: 100vh;
11+
width: 100vw;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
<div id="app">
18+
<cesium-web-globe
19+
v-bind:ref="webgloberef"
20+
v-bind:animation="false"
21+
v-bind:timeline="false"
22+
v-on:load="handleLoad"
23+
libPath="./static/libs/cdn/cesium/Cesium.js"
24+
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
25+
>
26+
<cesium-terrain-provider v-bind:url="demurl"></cesium-terrain-provider>
27+
<cesium-ogc-wmts-layer v-bind:url="url" v-bind:options="options"></cesium-ogc-wmts-layer>
28+
</cesium-web-globe>
29+
</div>
30+
<script>
31+
Cesium.Ion.defaultAccessToken =
32+
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE';
33+
let draw = new Vue({
34+
el: '#app',
35+
data() {
36+
return {
37+
webgloberef: 'webgloberef' + Math.random(),
38+
demurl: new Cesium.IonResource.fromAssetId(1),
39+
url:
40+
'http://t0.tianditu.com/DataServer?T=img_c' +
41+
'&L={TileMatrix}&Y={TileRow}&X={TileCol}' +
42+
'&tk=9c157e9585486c02edf817d2ecbc7752',
43+
options: {
44+
tilingScheme: 'EPSG:4490',
45+
tileMatrixLabels: [
46+
'1',
47+
'2',
48+
'3',
49+
'4',
50+
'5',
51+
'6',
52+
'7',
53+
'8',
54+
'9',
55+
'10',
56+
'11',
57+
'12',
58+
'13',
59+
'14',
60+
'15',
61+
'16',
62+
'17',
63+
'18',
64+
'19',
65+
'20'
66+
]
67+
}
68+
};
69+
},
70+
methods: {
71+
handleLoad(e) {
72+
const { component } = e;
73+
const { webGlobe } = component;
74+
webGlobe.viewer.camera.setView({
75+
direction: { x: 0.4680575394156845, y: -0.8267033643312148, z: 0.31222377744109403 },
76+
position: { x: -674271.5790185562, y: 5530042.656916835, z: 3232882.3357299212 }
77+
});
78+
//构造视图功能管理对象（视图）
79+
var sceneManager = new CesiumZondy.Manager.SceneManager({
80+
viewer: webGlobe.viewer
81+
});
82+
//视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
83+
sceneManager.flyToEx(94.73761648879076, 29.44177452960854, {
84+
height: 5900,
85+
heading: 60,
86+
pitch: -16,
87+
roll: 0
88+
});
89+
console.log('地图加初始化完毕！', webGlobe.viewer.camera);
90+
}
91+
}
92+
});
93+
</script>
94+
</body>
95+
</html>

‎website/public/static/demo/cesium/gallery/vue/model/igsm3d.png‎

232 KB
Loading

‎website/public/static/demo/cesium/gallery/vue/model/tileset.png‎

52.8 KB
Loading

‎website/public/static/demo/cesium/gallery/vue/raster/dem.png‎

465 KB
Loading

‎website/public/static/demo/config/config-cesium.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1143,6 +1143,14 @@
11431143
"detail": "",
11441144
"icon": "wmts.png",
11451145
"update": "最后更新时间：2020-11-23"
1146+
},
1147+
{
1148+
"name": "地形瓦片",
1149+
"file": "dem",
1150+
"diffcult": "2",
1151+
"detail": "",
1152+
"icon": "dem.png",
1153+
"update": "最后更新时间：2020-11-23"
11461154
}
11471155
]
11481156
},
@@ -1169,6 +1177,30 @@
11691177
"update": "最后更新时间：2020-11-24"
11701178
}
11711179
]
1180+
},
1181+
{
1182+
"name": "模型组件",
1183+
"iconfont": "icon_features",
1184+
"folder": "model",
1185+
"leaffolder": true,
1186+
"childs": [
1187+
{
1188+
"name": "IGServer-M3d",
1189+
"file": "igsm3d",
1190+
"diffcult": "2",
1191+
"detail": "",
1192+
"icon": "igsm3d.png",
1193+
"update": "最后更新时间：2020-11-24"
1194+
},
1195+
{
1196+
"name": "开源-3DTile",
1197+
"file": "tileset",
1198+
"diffcult": "2",
1199+
"detail": "",
1200+
"icon": "tileset.png",
1201+
"update": "最后更新时间：2020-11-24"
1202+
}
1203+
]
11721204
}
11731205
]
11741206
}

0 commit comments

Comments
 (0)