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)