Skip to content

Commit 8df7b11

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增Vue组件Popup&Link的示例】
1 parent 124993d commit 8df7b11

5 files changed

Lines changed: 236 additions & 0 deletions

File tree

‎website/public/static/demo/cesium/example/vue/control/link.htm‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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-Link</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+
display: inline-flex;
13+
}
14+
.item {
15+
position: absolute;
16+
height: 50%;
17+
width: 50%;
18+
}
19+
.top-left {
20+
top: 0px;
21+
left: 0px;
22+
}
23+
.top-right {
24+
top: 0px;
25+
right: 0px;
26+
}
27+
.bottom-left {
28+
bottom: 0px;
29+
left: 0px;
30+
}
31+
.bottom-right {
32+
bottom: 0px;
33+
right: 0px;
34+
}
35+
</style>
36+
</head>
37+
38+
<body>
39+
<div id="app">
40+
<div class="item top-left">
41+
<cesium-web-globe
42+
v-bind:ref="webgloberef1"
43+
v-bind:animation="false"
44+
v-bind:timeline="false"
45+
v-on:load="handleLoad"
46+
libPath="./static/libs/cdn/cesium/Cesium.js"
47+
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
48+
>
49+
<cesium-raster-layer v-bind:url="url1"> </cesium-raster-layer>
50+
<cesium-link v-bind:enable="link"></cesium-link>
51+
</cesium-web-globe>
52+
</div>
53+
<div class="item top-right">
54+
<cesium-web-globe
55+
v-bind:ref="webgloberef2"
56+
v-bind:animation="false"
57+
v-bind:timeline="false"
58+
v-on:load="handleLoad"
59+
libPath="./static/libs/cdn/cesium/Cesium.js"
60+
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
61+
>
62+
<cesium-raster-layer v-bind:url="url2"> </cesium-raster-layer>
63+
<cesium-link v-bind:enable="link"></cesium-link>
64+
</cesium-web-globe>
65+
</div>
66+
<div class="item bottom-left">
67+
<cesium-web-globe
68+
v-bind:ref="webgloberef3"
69+
v-bind:animation="false"
70+
v-bind:timeline="false"
71+
v-on:load="handleLoad"
72+
libPath="./static/libs/cdn/cesium/Cesium.js"
73+
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
74+
>
75+
<cesium-raster-layer v-bind:url="url3"> </cesium-raster-layer>
76+
<cesium-link v-bind:enable="link"></cesium-link>
77+
</cesium-web-globe>
78+
</div>
79+
<div class="item bottom-right">
80+
<cesium-web-globe
81+
v-bind:ref="webgloberef4"
82+
v-bind:animation="false"
83+
v-bind:timeline="false"
84+
v-on:load="handleLoad"
85+
libPath="./static/libs/cdn/cesium/Cesium.js"
86+
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
87+
>
88+
<cesium-ogc-wmts-layer v-bind:url="url4" v-bind:options="wmtsoptions"></cesium-ogc-wmts-layer>
89+
<cesium-link v-bind:enable="link"></cesium-link>
90+
</cesium-web-globe>
91+
</div>
92+
</div>
93+
<script>
94+
let draw = new Vue({
95+
el: '#app',
96+
data() {
97+
return {
98+
webgloberef1: 'webgloberef' + Math.random(),
99+
webgloberef2: 'webgloberef' + Math.random(),
100+
link: true,
101+
url1: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
102+
url2: 'http://mt0.google.cn/vt/lyrs=m&hl=zh-CN&x={x}&y={y}&z={z}',
103+
url3: 'http://online0.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&udt=20170908',
104+
url4: 'http://t0.tianditu.com/DataServer?T=vec_c&L={TileMatrix}&Y={TileRow}&X={TileCol}&tk=9c157e9585486c02edf817d2ecbc7752',
105+
wmtsoptions: {
106+
tilingScheme: 'EPSG:4490',
107+
tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
108+
}
109+
};
110+
},
111+
methods: {
112+
handleLoad(e) {
113+
console.log('地图加初始化完毕！', e);
114+
}
115+
}
116+
});
117+
</script>
118+
</body>
119+
</html>

‎website/public/static/demo/cesium/example/vue/control/popup.htm‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
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-Popup</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+
.cesium-popup-content-wrapper {
14+
text-align: left;
15+
padding: 10px;
16+
overflow-y: auto;
17+
font-size: 1.2em;
18+
z-index: 9999;
19+
border: 1px solid #666666;
20+
box-shadow: 0px 0px 20px rgba(12, 28, 33, 0.6);
21+
-moz-box-shadow: 0px 0px 20px rgba(12, 28, 33, 0.6);
22+
-webkit-box-shadow: 0px 0px 20px rgba(12, 28, 33, 0.6);
23+
border-radius: 3px 3px 3px 3px;
24+
background: rgba(12, 28, 33, 0.6);
25+
background-size: 50% 50%;
26+
background-repeat: no-repeat;
27+
}
28+
.cesium-popup-tip {
29+
background: #666666;
30+
-webkit-box-shadow: 0 3px 14px rgba(12, 28, 33, 0.6);
31+
box-shadow: 0 3px 14px rgba(12, 28, 33, 0.6);
32+
width: 17px;
33+
height: 17px;
34+
padding: 1px;
35+
margin: -10px auto 0;
36+
-webkit-transform: rotate(45deg);
37+
transform: rotate(45deg);
38+
}
39+
.cesium-popup-content-wrapper {
40+
color: #ffffff;
41+
}
42+
.cesium-custom-popup-content {
43+
height: 200px;
44+
background: #ffffff;
45+
opacity: 0.7;
46+
color: #000000;
47+
}
48+
</style>
49+
</head>
50+
51+
<body>
52+
<div id="app">
53+
<cesium-web-globe
54+
v-bind:ref="webgloberef"
55+
v-bind:animation="false"
56+
v-bind:timeline="false"
57+
v-on:load="handleLoad"
58+
libPath="./static/libs/cdn/cesium/Cesium.js"
59+
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
60+
>
61+
<cesium-raster-layer v-bind:url="url"> </cesium-raster-layer>
62+
<cesium-popup v-bind:position="position" container="<div>空</div>" :options="popupoptions">
63+
<div>
64+
Vue槽-实现任何自定义样式
65+
<div class="cesium-custom-popup-content">请在此处自定义内部内容</div>
66+
</div>
67+
</cesium-popup>
68+
</cesium-web-globe>
69+
</div>
70+
<script>
71+
let draw = new Vue({
72+
el: '#app',
73+
data() {
74+
return {
75+
webgloberef: 'webgloberef' + Math.random(),
76+
url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
77+
position: {
78+
longitude: 110,
79+
latitude: 30,
80+
height: 300
81+
},
82+
popupoptions: {}
83+
};
84+
},
85+
methods: {
86+
handleLoad(e) {
87+
console.log('地图加初始化完毕！', e);
88+
}
89+
}
90+
});
91+
</script>
92+
</body>
93+
</html>

‎website/public/static/demo/cesium/gallery/vue/control/link.png‎

290 KB
Loading

‎website/public/static/demo/cesium/gallery/vue/control/popup.png‎

196 KB
Loading

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1145,6 +1145,30 @@
11451145
"update": "最后更新时间：2020-11-23"
11461146
}
11471147
]
1148+
},
1149+
{
1150+
"name": "交互组件",
1151+
"iconfont": "icon_features",
1152+
"folder": "control",
1153+
"leaffolder": true,
1154+
"childs": [
1155+
{
1156+
"name": "Popup",
1157+
"file": "popup",
1158+
"diffcult": "2",
1159+
"detail": "",
1160+
"icon": "popup.png",
1161+
"update": "最后更新时间：2020-11-24"
1162+
},
1163+
{
1164+
"name": "多屏联动",
1165+
"file": "link",
1166+
"diffcult": "2",
1167+
"detail": "",
1168+
"icon": "link.png",
1169+
"update": "最后更新时间：2020-11-24"
1170+
}
1171+
]
11481172
}
11491173
]
11501174
}

0 commit comments

Comments
 (0)