Skip to content

Commit a94fc87

Browse files
author
潘卓然Y7000P
committed
【站点】【更新】【新增Vue-Cesium的栅格组件以及示例】
1 parent 7a16f0a commit a94fc87

8 files changed

Lines changed: 202 additions & 23 deletions

File tree

‎website/public/static/demo/cesium/example/vue/raster/document.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-地图文档</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-doc-layer
27+
v-bind:ip="ip"
28+
v-bind:port="port"
29+
v-bind:protocol="protocol"
30+
v-bind:server-name="serverName"
31+
>
32+
</cesium-igs-doc-layer>
33+
</cesium-web-globe>
34+
</div>
35+
<script>
36+
let draw = new Vue({
37+
el: '#app',
38+
data() {
39+
return {
40+
webgloberef: 'webgloberef' + Math.random(),
41+
ip: 'develop.smaryun.com',
42+
port: '6163',
43+
protocol: 'http',
44+
serverName: '北京市'
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/tile.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-地图瓦片</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-tile-layer
27+
v-bind:ip="ip"
28+
v-bind:port="port"
29+
v-bind:protocol="protocol"
30+
v-bind:server-name="serverName"
31+
>
32+
</cesium-igs-tile-layer>
33+
</cesium-web-globe>
34+
</div>
35+
<script>
36+
let draw = new Vue({
37+
el: '#app',
38+
data() {
39+
return {
40+
webgloberef: 'webgloberef' + Math.random(),
41+
ip: 'develop.smaryun.com',
42+
port: '6163',
43+
protocol: 'http',
44+
serverName: '北京市'
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/gallery/vue/raster/document.png‎

184 KB
Loading

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

258 KB
Loading

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

Lines changed: 66 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22
"name": "cesium",
33
"title": "MapGIS WebClinet-Cesium",
44
"mapmode": "cesium",
5-
"childs": [{
5+
"childs": [
6+
{
67
"name": "图层M3D",
78
"iconfont": "iconlayer",
89
"folder": "m3d",
910
"leaffolder": true,
10-
"childs": [{
11+
"childs": [
12+
{
1113
"name": "景观模型",
1214
"file": "m3d-landscape",
1315
"diffcult": "2",
@@ -78,7 +80,8 @@
7880
"iconfont": "iconinternet",
7981
"folder": "third",
8082
"leaffolder": true,
81-
"childs": [{
83+
"childs": [
84+
{
8285
"name": "天地图",
8386
"file": "third-tianditu",
8487
"diffcult": "1",
@@ -133,7 +136,8 @@
133136
"iconfont": "icon_ogc",
134137
"folder": "ogc",
135138
"leaffolder": true,
136-
"childs": [{
139+
"childs": [
140+
{
137141
"name": "WMS",
138142
"file": "ogc-WMS",
139143
"diffcult": "2",
@@ -156,7 +160,8 @@
156160
"iconfont": "icon_igs",
157161
"folder": "mapgis",
158162
"leaffolder": true,
159-
"childs": [{
163+
"childs": [
164+
{
160165
"name": "二维地图文档服务",
161166
"file": "mapgis-2d-doc",
162167
"diffcult": "2",
@@ -211,7 +216,7 @@
211216
"detail": "加载MapGIS-IgServer上传的矢量瓦片样式",
212217
"icon": "mapgis-vectortile-3857.png",
213218
"update": "最后更新时间：2020-10-12"
214-
},
219+
},
215220
{
216221
"name": "矢量瓦片-4326",
217222
"file": "mapgis-vectortile-4326",
@@ -235,7 +240,8 @@
235240
"iconfont": "icon_internet",
236241
"folder": "scene",
237242
"leaffolder": true,
238-
"childs": [{
243+
"childs": [
244+
{
239245
"name": "场景出图",
240246
"file": "scene-sceneOut",
241247
"diffcult": "2",
@@ -314,7 +320,8 @@
314320
"iconfont": "icon_analysis",
315321
"folder": "analysis",
316322
"leaffolder": true,
317-
"childs": [{
323+
"childs": [
324+
{
318325
"name": "洪水淹没分析",
319326
"file": "analysis-floor",
320327
"diffcult": "1",
@@ -425,7 +432,8 @@
425432
"iconfont": "iconmap3",
426433
"folder": "track",
427434
"leaffolder": true,
428-
"childs": [{
435+
"childs": [
436+
{
429437
"name": "模型漫游",
430438
"file": "track-flow",
431439
"diffcult": "1",
@@ -448,7 +456,8 @@
448456
"iconfont": "icon_features",
449457
"folder": "drawGraphic",
450458
"leaffolder": true,
451-
"childs": [{
459+
"childs": [
460+
{
452461
"name": "点",
453462
"file": "drawGraphic-point",
454463
"diffcult": "1",
@@ -567,7 +576,8 @@
567576
"iconfont": "icondetail",
568577
"folder": "data",
569578
"leaffolder": true,
570-
"childs": [{
579+
"childs": [
580+
{
571581
"name": "3DTile数据",
572582
"file": "data-3Dtiles",
573583
"diffcult": "1",
@@ -654,7 +664,8 @@
654664
"iconfont": "icon_calc",
655665
"folder": "measure",
656666
"leaffolder": true,
657-
"childs": [{
667+
"childs": [
668+
{
658669
"name": "长度测量",
659670
"file": "measure-length",
660671
"diffcult": "1",
@@ -693,7 +704,8 @@
693704
"iconfont": "iconsearch",
694705
"folder": "query",
695706
"leaffolder": true,
696-
"childs": [{
707+
"childs": [
708+
{
697709
"name": "二维地图文档属性查询",
698710
"file": "query-2dByAtt",
699711
"diffcult": "1",
@@ -764,7 +776,8 @@
764776
"iconfont": "icon_clientview",
765777
"folder": "clientView",
766778
"leaffolder": true,
767-
"childs": [{
779+
"childs": [
780+
{
768781
"name": "热力图",
769782
"file": "clientView-heatmap",
770783
"diffcult": "1",
@@ -835,7 +848,8 @@
835848
"iconfont": "icon_echarts",
836849
"folder": "clientView_Echarts",
837850
"leaffolder": true,
838-
"childs": [{
851+
"childs": [
852+
{
839853
"name": "热力图-空气质量",
840854
"file": "echarts-heater",
841855
"diffcult": "1",
@@ -931,7 +945,8 @@
931945
"iconfont": "icon_mapv",
932946
"folder": "clientView_MapV",
933947
"leaffolder": true,
934-
"childs": [{
948+
"childs": [
949+
{
935950
"name": "轨迹汇聚",
936951
"file": "mapv-path_converge",
937952
"diffcult": "1",
@@ -1034,7 +1049,8 @@
10341049
"iconfont": "icon_clientanalysis",
10351050
"folder": "clientAnalysis",
10361051
"leaffolder": true,
1037-
"childs": [{
1052+
"childs": [
1053+
{
10381054
"name": "缓冲分析",
10391055
"file": "clientAnalysis-buffer",
10401056
"diffcult": "3",
@@ -1091,6 +1107,38 @@
10911107
"update": "最后更新时间：2020-06-17"
10921108
}
10931109
]
1110+
},
1111+
{
1112+
"name": "Vue组件",
1113+
"iconfont": "iconvue",
1114+
"folder": "vue",
1115+
"leaffolder": false,
1116+
"childs": [
1117+
{
1118+
"name": "栅格瓦片",
1119+
"iconfont": "iconhand_draw",
1120+
"folder": "raster",
1121+
"leaffolder": true,
1122+
"childs": [
1123+
{
1124+
"name": "地图文档",
1125+
"file": "document",
1126+
"diffcult": "2",
1127+
"detail": "",
1128+
"icon": "document.png",
1129+
"update": "最后更新时间：2020-11-23"
1130+
},
1131+
{
1132+
"name": "瓦片服务",
1133+
"file": "tile",
1134+
"diffcult": "2",
1135+
"detail": "",
1136+
"icon": "tile.png",
1137+
"update": "最后更新时间：2020-11-23"
1138+
}
1139+
]
1140+
}
1141+
]
10941142
}
10951143
]
1096-
}
1144+
}

‎website/public/static/libs/include-cesium-local.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,11 @@
9393
if (!inArray(excludes, "plugins")) {
9494
inputScript(httpUrl + "/cdn/zondyclient/webclient-cesium-plugin.min.js");
9595
}
96+
if (inArray(includes, 'vue')) {
97+
inputCSS(httpUrl + '/cdn/zondyclient/vue/webclient-vue-cesium.css');
98+
inputScript(httpUrl + '/cdn/vue/2.6/vue.js');
99+
inputScript(httpUrl + '/cdn/zondyclient/vue/webclient-vue-cesium.umd.js');
100+
}
96101
}
97102

98103
load();

‎website/src/views/layout/components/Header/config.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,12 @@ export const Headers = [
3232
hightlights: [
3333
[false, false, false, false, false],
3434
[false, false, false, false, false],
35-
[false, false, false, false]
35+
[false, false, false, false, true]
3636
],
3737
links: [
3838
['图层M3D', '互联网地图', 'OGC服务', 'MapGIS地图服务', '场景' /* "IGServer-X", "IGServer-S" */],
3939
['三维空间分析', '轨迹模拟', '图形绘制', '工具', '查询'],
40-
['客户端可视化', '客户端-Echarts', '客户端-MapV', '客户端空间分析']
40+
['客户端可视化', '客户端-Echarts', '客户端-MapV', '客户端空间分析', 'Vue']
4141
],
4242
routes: [
4343
['/gallery/cesium#m3d', '/gallery/cesium#third', '/gallery/cesium#ogc', '/gallery/cesium#mapgis', '/gallery/cesium#scene'],
@@ -52,8 +52,8 @@ export const Headers = [
5252
'/gallery/cesium#clientView-heatmap',
5353
'/gallery/cesium#clientView_Echarts',
5454
'/gallery/cesium#clientView_MapV',
55-
'/gallery/cesium#clientAnalysis'
56-
/* "/gallery/cesium#globe", */
55+
'/gallery/cesium#clientAnalysis',
56+
'/gallery/cesium#vue#raster'
5757
]
5858
]
5959
},

‎website/src/views/total/Download.vue‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,23 @@
8888
effect="plain"
8989
type="info"
9090
>
91-
npm install @mapgis/webclient
91+
npm install @mapgis/webclient-es6-service
92+
</el-tag>
93+
<p />
94+
<el-tag
95+
class="download-tag"
96+
effect="plain"
97+
type="info"
98+
>
99+
npm install @mapgis/webclient-vue-mapboxgl
100+
</el-tag>
101+
<p />
102+
<el-tag
103+
class="download-tag"
104+
effect="plain"
105+
type="info"
106+
>
107+
npm install @mapgis/webclient-vue-cesium
92108
</el-tag>
93109
</el-row>
94110
<br />

0 commit comments

Comments
 (0)