Skip to content

Commit 81e2e15

Browse files
zhangjiangqiuzhangjiangqiu
committed
【update】 新增幻灯片组件例子； review by xiongjj
1 parent e8287d3 commit 81e2e15

File tree

9 files changed

+20684
-8754
lines changed

9 files changed

+20684
-8754
lines changed

‎dist/mapboxgl/iclient-mapboxgl-vue.css

Lines changed: 534 additions & 1 deletion
Large diffs are not rendered by default.

‎dist/mapboxgl/iclient-mapboxgl-vue.js

Lines changed: 19905 additions & 8639 deletions
Large diffs are not rendered by default.

‎dist/mapboxgl/iclient-mapboxgl-vue.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mapboxgl/iclient-mapboxgl-vue.min.js

Lines changed: 132 additions & 113 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/component/components_slideshow_vue.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
7+
<head>
8+
<meta charset="UTF-8">
9+
<title data-i18n='resources.title_componentsSlideshow_Vue'></title>
10+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
11+
<script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
12+
<style>
13+
#main {
14+
margin: 0 auto;
15+
width: 100%;
16+
height: 100%;
17+
}
18+
19+
.sm-component-slideshow {
20+
position: absolute;
21+
top: 40px;
22+
left: 30px;
23+
width: 400px;
24+
height: 380px;
25+
border-radius: 4px;
26+
}
27+
28+
</style>
29+
</head>
30+
31+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
32+
<div id="main">
33+
<sm-web-map map-id='567946816' :map-options="mapOptions" server-url='https://www.supermapol.com'
34+
tianditu-key='1d109683f4d84198e37a38c442d68311' @load="mapLoaded">
35+
</sm-web-map>
36+
<sm-slideshow :autoplay="autoplay" :pagination="pagination" @change="slideChange">
37+
<sm-slideshow-item v-for="item of content" :key="item.title">
38+
<h3 style="margin-top: 8px;">{{ item.title }}</h3>
39+
<p style="padding: 8px;">{{ item.description }}</p>
40+
<img :src="item.image" style="width: 300px; height: 170px;" />
41+
</sm-slideshow-item>
42+
</sm-slideshow>
43+
</div>
44+
45+
<script>
46+
new Vue({
47+
el: '#main',
48+
data() {
49+
return {
50+
mapOptions: {
51+
zoom: 14,
52+
pitch: 60,
53+
center: [103.93424623295097, 33.03730377719067]
54+
},
55+
content: '',
56+
pagination: {
57+
type: 'bullets',
58+
clickable: true
59+
},
60+
autoplay: {
61+
delay: 3000,
62+
disableOnInteraction: false
63+
}
64+
};
65+
},
66+
created() {
67+
this.setDataFn = this.setData.bind(this);
68+
this.getData(this.setDataFn);
69+
},
70+
beforeDestroy() {
71+
this.marker && this.marker.remove() && (this.marker = null);
72+
},
73+
methods: {
74+
getData(cb) {
75+
var jsonName = /en/.test(SuperMap.Lang.getCode()) ? 'jiuzhai-en' : 'jiuzhai';
76+
$.get(`../data/jiuzhai/${jsonName}.json`, function (res) {
77+
cb && cb(res);
78+
});
79+
},
80+
setData(res) {
81+
this.content = res;
82+
},
83+
slideChange(options) {
84+
let coordinates = this.content[options.realIndex].coordinates;
85+
this.map.flyTo({ center: coordinates });
86+
if (!this.marker) {
87+
this.marker = new mapboxgl.Marker()
88+
.setLngLat(coordinates)
89+
.addTo(this.map);
90+
} else {
91+
this.marker.setLngLat(coordinates)
92+
}
93+
},
94+
mapLoaded(e) {
95+
this.map = e.map;
96+
}
97+
}
98+
})
99+
</script>
100+
</body>
101+
102+
</html>

‎examples/component/config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -427,6 +427,14 @@ var exampleConfig = {
427427
fileName: 'components_timeline_cloud',
428428
localIgnore: true
429429
},
430+
{
431+
name: '幻灯片组件',
432+
name_en: 'Slideshow Component',
433+
version: '11.0.0',
434+
thumbnail: 'components_slideshow_vue.png',
435+
fileName: 'components_slideshow_vue',
436+
localIgnore: true
437+
}
430438
]
431439
},
432440
others_vue: {

‎examples/component/img/components_slideshow_vue.png

633 KB
Loading

‎examples/locales/en-US/resources.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -617,6 +617,7 @@ window.examplesResources = {
617617
"title_componentsZoom_Vue": 'Zoom component(Vue)',
618618
"title_componentsLegend_Vue": 'Legend component(Vue)',
619619
"title_componentsBasic_Vue": 'Basic component(Vue)',
620+
"title_componentsSlideshow_Vue": 'Slideshow component(Vue)',
620621
"title_componentsMeasure_Vue": 'Measure component(Vue)',
621622
"title_componentsQuery_Vue": 'Query component(Vue)',
622623
"title_componentsSearch_Vue": 'Search component(Vue)',

‎examples/locales/zh-CN/resources.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -563,6 +563,7 @@ window.examplesResources = {
563563
"title_componentsZoom_Vue": '缩放组件',
564564
"title_componentsLegend_Vue": '图例组件',
565565
"title_componentsBasic_Vue": '基础组件',
566+
"title_componentsSlideshow_Vue": '幻灯片组件',
566567
"title_componentsMeasure_Vue": '量算组件',
567568
"title_componentsQuery_Vue": '查询组件',
568569
"title_componentsSearch_Vue": '搜索组件',

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy