Skip to content

Commit e5421f5

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【update】 新增飞行定位的例子; review by luox and songym
1 parent dcb96cb commit e5421f5

21 files changed

+8612
-4774
lines changed

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

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

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

Lines changed: 8138 additions & 4670 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: 102 additions & 102 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/component/components_flyto_vue.html

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
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_componentsFlyTo_Vue'></title>
10+
<script type="text/javascript" include="vue, jquery" 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+
#features {
20+
position: absolute;
21+
width: 26%;
22+
left: 73%;
23+
top: 90px;
24+
font-family: sans-serif;
25+
background-color: #fafafa;
26+
color: rgba(0, 0, 0, 0.65);
27+
}
28+
29+
section {
30+
padding: 25px 50px;
31+
line-height: 25px;
32+
opacity: 0.25;
33+
font-size: 13px;
34+
}
35+
36+
section.active {
37+
opacity: 1;
38+
}
39+
40+
.content-item img {
41+
width: 100%;
42+
height: 220px;
43+
margin-bottom: 10px;
44+
}
45+
</style>
46+
</head>
47+
48+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
49+
<div id="main">
50+
<sm-web-map :map-id="567946816" server-url="https://www.supermapol.com"
51+
tianditu-key="1d109683f4d84198e37a38c442d68311" @load="mapLoaded">
52+
<sm-fly-to :data="data" :fly-options="flyOptions" :collapsed="false" :autoplay="false"
53+
@change="handleFlyChange"></sm-fly-to>
54+
</sm-web-map>
55+
<div id="features" class="sm-component-fly-controller">
56+
<section v-if="currentContent" :class="{ active: currentContent && currentContent.title === activeTitle }">
57+
<h3>{{ currentContent.title }}</h3>
58+
<h5>{{ currentContent.subtitle }}</h5>
59+
<div class="content-item">
60+
<img :src="currentContent.image" />
61+
<span>{{ currentContent.description }}</span>
62+
</div>
63+
</section>
64+
</div>
65+
</div>
66+
67+
<script>
68+
new Vue({
69+
el: '#main',
70+
data() {
71+
return {
72+
data: null,
73+
flyOptions: {
74+
duration: 1500,
75+
zoom: 15,
76+
pitch: 60
77+
},
78+
activeTitle: null,
79+
currentContent: null
80+
}
81+
},
82+
created() {
83+
this.setDataFn = this.setData.bind(this);
84+
this.getData(this.setDataFn);
85+
},
86+
methods: {
87+
getData(cb) {
88+
var jsonName = /en/.test(SuperMap.Lang.getCode()) ? 'jiuzhai-en' : 'jiuzhai';
89+
$.get(`../data/jiuzhai/${jsonName}.json`, function (res) {
90+
cb && cb(res);
91+
});
92+
},
93+
setData(res) {
94+
if (res) {
95+
this.data = res.map(item => {
96+
const nextItem = {
97+
location: item.coordinates
98+
};
99+
switch (item.title) {
100+
case '上季节海':
101+
case '五花海':
102+
case 'Upper Seasonal Lakes':
103+
case 'Wu Hua Hai':
104+
nextItem.flyOptions = Object.assign({}, this.flyOptions, {
105+
bearing: -8
106+
});
107+
break;
108+
case '下季节海':
109+
case 'Lower Seasonal Lake':
110+
nextItem.flyOptions = Object.assign({}, this.flyOptions, {
111+
bearing: -68
112+
});
113+
break;
114+
case '五彩池':
115+
case 'Five Coloured Pond':
116+
nextItem.flyOptions = Object.assign({}, this.flyOptions, {
117+
duration: 0,
118+
bearing: 0
119+
});
120+
break;
121+
case '珍珠滩瀑布':
122+
case '"Pearl Shoals Waterfall':
123+
nextItem.flyOptions = Object.assign({}, this.flyOptions, {
124+
pitch: 17
125+
});
126+
break;
127+
case '扎如寺':
128+
case 'Zharu Temple':
129+
nextItem.flyOptions = Object.assign({}, this.flyOptions, {
130+
bearing: 16,
131+
pitch: 37
132+
});
133+
break;
134+
}
135+
return nextItem;
136+
});
137+
this.contentList = [].concat(res);
138+
this.currentContent = this.contentList[0];
139+
}
140+
},
141+
handleFlyChange(data) {
142+
this.setActiveChapter(data.activeIndex);
143+
},
144+
setActiveChapter(activeIndex) {
145+
var activeItem = this.contentList[activeIndex];
146+
var chapterName = activeItem.title;
147+
if (chapterName === this.activeTitle) {
148+
return;
149+
}
150+
this.currentContent = activeItem;
151+
this.activeTitle = chapterName;
152+
if (!this.marker) {
153+
this.marker = new mapboxgl.Marker()
154+
.setLngLat(activeItem.coordinates)
155+
.addTo(this.map);
156+
} else {
157+
this.marker.setLngLat(activeItem.coordinates)
158+
}
159+
},
160+
mapLoaded(e) {
161+
this.map = e.map;
162+
}
163+
},
164+
})
165+
166+
</script>
167+
</body>
168+
169+
</html>

‎examples/component/config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,13 @@ var exampleConfig = {
173173
version: '11.0.0',
174174
thumbnail: 'components_coordinate_conversion_vue.png',
175175
fileName: 'components_coordinate_conversion_vue'
176+
},
177+
{
178+
name: '飞行定位',
179+
name_en: 'Fly To',
180+
version: '11.0.0',
181+
thumbnail: 'components_flyTo_vue.png',
182+
fileName: 'components_flyTo_vue'
176183
}
177184
]
178185
},

‎examples/component/img/components_flyTo_vue.png

39.9 KB
Loading

‎examples/data/jiuzhai/changhai.jpg

36 KB
Loading

‎examples/data/jiuzhai/jiuzhai-en.json

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
[
2+
{
3+
"title": "Changehai",
4+
"subtitle": "Zechawagou Sites-Changehai",
5+
"image": "../data/jiuzhai/changhai.jpg",
6+
"coordinates": [
7+
103.93424623295097,
8+
33.03730377719067
9+
],
10+
"description": "Located at the end of Ze Cha Wa Valley, the crescent-shaped Long Lake (Chang Hai) is over 100 meters deep, it is at the highest altitude and has the widest surface area of all Jiuzhai Valley’s lakes. This is the highest point visitors will reach in the park. Its water appears ink blue, and the surrounding peaks are snow-capped for much of the year. Surrounded by thick forests, it collects snow melt and rain flow from the surrounding peaks. In winter the frozen surface ice can be as thick as 60cm."
11+
},
12+
{
13+
"title": "Five Coloured Pond",
14+
"subtitle": "Zechawagou Sites-Five Coloured Pond",
15+
"image": "../data/jiuzhai/wucaichi.jpg",
16+
"coordinates": [
17+
103.93303602365336,
18+
33.04646925591396
19+
],
20+
"description": "The Five Coloured Pond (Wu Cai Chi) is one of Jiuzhai Valley’s smallest but most impressive lakes. Its colours are a result of travertine sedimentation on the uneven lake bed, as well as various algae. However, legend has it that the pond was where Goddess Semo washed and combed her hair and God Dage came everyday to bring her water. The pond’s colours are said to come from Semo's rouge coming off her pretty face and colouring the water."
21+
},
22+
{
23+
"title": "Upper Seasonal Lake",
24+
"subtitle": "Zechawagou Sites-Upper Seasonal Lake",
25+
"image": "../data/jiuzhai/shangjijiehai.jpg",
26+
"coordinates": [103.92902077067332, 33.05970589470181],
27+
"description": "The upper-seasonal lake neighbours the Five-Coloured Pond (Wu Cai Chi), with steep cliffs surrounding. This is said to be the place where fierce dragons hide themselves and is also called the “Tibetan Dragon Lake”. In the dry season, the Class 1, UN protected, “Ruswich” flower grows on the lakebed."
28+
},
29+
{
30+
"title": "Lower Seasonal Lake",
31+
"subtitle": "Zechawagou Sites-Lower Seasonal Lake",
32+
"image": "../data/jiuzhai/xiajijiehai.jpg",
33+
"coordinates": [103.91843444449766, 33.11997839989726],
34+
"description": "There are two seasonal lakes in Ze Cha Wa Valley quite a distance from each other, with distinctive features. The lower seasonal lake is close to Ze Cha Wa Village, with a stretch of birches, wild strawberries, grass and fungi in between."
35+
},
36+
{
37+
"title": "Wu Hua Hai",
38+
"subtitle": "Rizegougou Sites-Wu Hua Hai",
39+
"image": "../data/jiuzhai/wuhuahai.jpg",
40+
"coordinates": [
41+
103.88099726484862,
42+
33.159143349891465
43+
],
44+
"description": "The Five Flower Lake (Wu Hua Hai) is regarded as one of the wonders of Jiuzhai Valley due to its breathtaking colours which are a result of its lake-bottom travertine and colourful algae. The colours are formed by unevenly distributed submerged plants. Five Flower Lake’s autumn reflections are a spectacular display of nature. The intense colour combinations of the trees reflected on the waters surface are one reason why Jiuzhai Valley is often referred to as a photographer’s heaven and a painter’s nightmare!"
45+
},
46+
{
47+
"title": "Pearl Shoals Waterfall",
48+
"subtitle": "Rizegougou Sites—Pearl Shoals Waterfall",
49+
"image": "../data/jiuzhai/zhenzhutan.jpg",
50+
"coordinates": [
51+
103.88723487431847,
52+
33.16587890523388
53+
],
54+
"description": "Water rushing from the Pearl Shoals (Zhen Zhu Tan) drops from top of the falls and forms a crescent waterfall. This is the most photographed waterfall in Jiuzhai Valley and along with many places in the park it is a very popular place for Chinese couples to have their wedding photos taken."
55+
},
56+
{
57+
"title": "Nuo Ri Lang Waterfall",
58+
"subtitle": "Rizegougou Sites—Nuo Ri Lang Waterfall",
59+
"image": "../data/jiuzhai/nuorilang.jpg",
60+
"coordinates": [
61+
103.90771770744831,
62+
33.163703206300525
63+
],
64+
"description": "This is the widest travertine topped waterfall in the world and one of the signature pictures of Jiuzhai Valley. During the late summer when the water level is at its highest, the noise of Nou Ri Lang waterfall alone is impressive. During the winter the waterfall usually freezes creating an enormous ice curtain."
65+
},
66+
{
67+
"title": "Shuzheng Qunhai",
68+
"subtitle": "Shuzhenggou Sites-Shuzheng Qunhai",
69+
"image": "../data/jiuzhai/shuzhengqunhai.jpg",
70+
"coordinates": [
71+
103.89731764184347,
72+
33.19859679345478
73+
],
74+
"description": "Shuzhengqun Seascape is the gateway to the beautiful scenery of Jiuzhaigou. The Shuzheng Group Trench is 13.8 kilometers long and has more than 40 lakes (Haizi), accounting for about 40% of all lakes in the Jiuzhaigou Scenic Area. The water from the upper part of Haizi crossed the lake bank and overflowed from the trees, arousing white splashes, jumping and sprinting in the green."
75+
},
76+
{
77+
"title": "Lu Wei Lake",
78+
"subtitle": "Shuzhenggou Sites-Lu Wei Lake",
79+
"image": "../data/jiuzhai/luweihai.jpg",
80+
"coordinates": [
81+
103.9181730938379,
82+
33.23129463237716
83+
],
84+
"description": "The Reed (Lu Wei) Lake is a semi-swamp lake with thick reeds throughout, where the blue and green “Jade Ribbon” stream runs through the reed stems down towards the valley entrance. In spring and summer, transparent currents and reeds share the same green colour; in autumn and winter, reeds turn eye-striking golden yellow. Soft reed flakes float in the air, attracting herons and wild swans to the water side."
85+
},
86+
{
87+
"title": "Zharu Temple",
88+
"subtitle": "Zharugou Site-Zharu Temple",
89+
"image": "../data/jiuzhai/zharusi.jpg",
90+
"coordinates": [
91+
103.93169934861643,
92+
33.25624201104978
93+
],
94+
"description": "Zharu Temple is located under the Baojing Rock in Zharugou. It is the largest Yongzhong Bon temple in Jiuzhaigou. It has a history of a thousand years. The full Tibetan name is \"Rewu Gongzhaxi Pengcuolin\" (Holy Land Auspicious Perfection Chau) . Zharu Temple is composed of a main hall, a Tibetan scripture building, auspicious multi-gate pagoda, etc. It is a building with a strong Tibetan temple color."
95+
}
96+
]

‎examples/data/jiuzhai/jiuzhai.json

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
[
2+
{
3+
"title": "长海",
4+
"subtitle": "则查洼沟景点-长海",
5+
"image": "../data/jiuzhai/changhai.jpg",
6+
"coordinates": [
7+
103.93424623295097,
8+
33.03730377719067
9+
],
10+
"description": "九寨沟长海海拔3060米，长约五公里，宽约六百多米，面积达到93万平方米。旁边的山峰终年积雪，四周森林珠翠，在长海观台上看去，蓝天白云，皑皑峰雪尽收眼底，感觉山和天互相连接在一起没有距离，这也是长海的一大景观。"
11+
},
12+
{
13+
"title": "五彩池",
14+
"subtitle": "则查洼沟景点-五彩池",
15+
"image": "../data/jiuzhai/wucaichi.jpg",
16+
"coordinates": [
17+
103.93303602365336,
18+
33.04646925591396
19+
],
20+
"description": "五彩池是九寨沟的精粹，是景区最小颜色最为丰富的海子，上半部呈碧蓝色，下半部呈橙红色，左边呈天蓝色，右边呈橄榄绿色。海子生长着水绵、小蕨等水生植物群落和草本植物。冬季四周冰天雪地，五彩池却不冻冰，甚为奇绝。"
21+
},
22+
{
23+
"title": "上季节海",
24+
"subtitle": "则查洼沟景点-上季节海",
25+
"image": "../data/jiuzhai/shangjijiehai.jpg",
26+
"coordinates": [103.92902077067332, 33.05970589470181],
27+
"description": "上季节海毗邻五彩池，湖水随季节变化，时盈时涸。秋日雨季，湖水上涨，湖色湛蓝，夏日水浅呈翠绿色，初冬以后，湖水干涸，湖床上长满青草，海子又成了放牧草滩，草滩上生长着联合国一类保护植物--若希维奇"
28+
},
29+
{
30+
"title": "下季节海",
31+
"subtitle": "则查洼沟景点-下季节海",
32+
"image": "../data/jiuzhai/xiajijiehai.jpg",
33+
"coordinates": [103.91843444449766, 33.11997839989726],
34+
"description": "下季节海镶嵌在花繁草茂的山坳里，水量随着季节而变化，秋季时，雨量充沛，湖水饱满，下季节海的水色最湛蓝透明，远远望去就好像是鲜蓝的墨水。冬春季节，水位渐低，一直到初夏，湖水甚至全部干涸，湖床上长满了牧草，成为放牧牛马的福地。一到电秋天，叶子转黄，远远看去满树金光。"
35+
},
36+
{
37+
"title": "五花海",
38+
"subtitle": "日则沟景点-五花海",
39+
"image": "../data/jiuzhai/wuhuahai.jpg",
40+
"coordinates": [
41+
103.88099726484862,
42+
33.159143349891465
43+
],
44+
"description": "五花海，海拔2472米，水深5米，面积9万平方米，被誉为“九寨沟一绝”和“九寨精华”，在珍珠滩瀑布之上，熊猫湖的下部于日则沟孔雀河上游的尽头。五花海四周的山坡，入秋后便笼罩在一片绚丽的绝色秋色中，色彩丰富，姿态万千。"
45+
},
46+
{
47+
"title": "珍珠滩瀑布",
48+
"subtitle": "日则沟景点—珍珠滩瀑布",
49+
"image": "../data/jiuzhai/zhenzhutan.jpg",
50+
"coordinates": [
51+
103.88723487431847,
52+
33.16587890523388
53+
],
54+
"description": "珍珠滩瀑布高21米，宽162米，是九寨沟内一个典型的组合景观，是电视剧《西游记》片段中，唐僧师徒牵马涉水的地方。瀑布落差最大可达40米，气势非凡，雄伟壮观。瀑布冲进谷底，卷起千堆浪花，向东狂奔而去。"
55+
},
56+
{
57+
"title": "诺日朗瀑布",
58+
"subtitle": "日则沟景点—诺日朗瀑布",
59+
"image": "../data/jiuzhai/nuorilang.jpg",
60+
"coordinates": [
61+
103.90771770744831,
62+
33.163703206300525
63+
],
64+
"description": "诺日朗瀑布宽270米，高24.5米，是中国大型钙化瀑布之一，也是中国最宽的瀑布。藏语中诺日朗是伟岸高大的意思，因此诺日朗瀑布意思就是雄伟壮观的瀑布。滔滔水流自诺日朗群海而来，经瀑布流下，如银河飞泻，声震山谷。"
65+
},
66+
{
67+
"title": "树正群海",
68+
"subtitle": "树正沟景点-树正群海",
69+
"image": "../data/jiuzhai/shuzhengqunhai.jpg",
70+
"coordinates": [
71+
103.89731764184347,
72+
33.19859679345478
73+
],
74+
"description": "树正群海景区是九寨沟秀丽风景的大门。树正群海沟全长13.8公里，共有各种湖泊（海子）40余个，约占九寨沟景区全部湖泊的40%。上部海子的水翻越湖堤，从树丛中溢出，激起白色的水花，在青翠中跳跳蹦蹦，穿梭奔窜。"
75+
},
76+
{
77+
"title": "芦苇海",
78+
"subtitle": "树正沟景点-芦苇海",
79+
"image": "../data/jiuzhai/luweihai.jpg",
80+
"coordinates": [
81+
103.9181730938379,
82+
33.23129463237716
83+
],
84+
"description": "芦苇海海拔2140米，全长2.2公里，是一个半沼泽湖泊。海中芦苇丛生，水鸟飞翔，清溪碧流，漾绿摇翠，蜿蜒空行，好一派泽国风光。芦苇海中，荡荡芦苇，一片青葱，微风徐来，绿浪起伏。飒飒之声，委婉抒情，使人心旷神怡。"
85+
},
86+
{
87+
"title": "扎如寺",
88+
"subtitle": "扎如沟景点-扎如寺",
89+
"image": "../data/jiuzhai/zharusi.jpg",
90+
"coordinates": [
91+
103.93169934861643,
92+
33.25624201104978
93+
],
94+
"description": "扎如寺坐落于扎如沟宝镜岩下，是九寨沟最大的雍仲苯教寺庙，距今已有一千年的历史，藏语全称叫“热悟贡扎西彭措林”（圣地吉祥圆满洲）。扎如寺由大殿、藏经楼、吉祥多门塔等组成，是一座具有浓厚藏族寺庙色彩的建筑。"
95+
}
96+
]

‎examples/data/jiuzhai/luweihai.jpg

27.7 KB
Loading

‎examples/data/jiuzhai/nuorilang.jpg

34.7 KB
Loading

‎examples/data/jiuzhai/shangjijiehai.jpg

324 KB
Loading

‎examples/data/jiuzhai/shuzhengqunhai.jpg

74.1 KB
Loading

‎examples/data/jiuzhai/wucaichi.jpg

29.2 KB
Loading

‎examples/data/jiuzhai/wuhuahai.jpg

88.5 KB
Loading

‎examples/data/jiuzhai/xiajijiehai.jpg

211 KB
Loading

‎examples/data/jiuzhai/zharusi.jpg

21.2 KB
Loading

‎examples/data/jiuzhai/zhenzhutan.jpg

27.7 KB
Loading

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -622,6 +622,7 @@ window.examplesResources = {
622622
"title_componentsSearch_Vue": 'Search component(Vue)',
623623
"title_componentsCompass_Vue": 'Compass component(Vue)',
624624
"title_componentsDraw_Vue": 'Draw component(Vue)',
625+
"title_componentsFlyTo_Vue": 'FlyTo component(Vue)',
625626
"title_componentsTheme_Vue": 'Theme component',
626627
"title_componentsDemo_Vue": 'Landuse demo',
627628
"title_componentsEstateMonitoringPlatform_Vue": 'Estate project visual monitoring platform demo',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,7 @@ window.examplesResources = {
567567
"title_componentsQuery_Vue": '查询组件',
568568
"title_componentsSearch_Vue": '搜索组件',
569569
"title_componentsCompass_Vue": '指南针组件',
570+
"title_componentsFlyTo_Vue": '飞行定位组件',
570571
"title_componentsDraw_Vue": '绘制组件',
571572
"title_componentsTheme_Vue": '主题切换',
572573
"title_componentsDemo_Vue": '土地利用示例',

0 commit comments

Comments
 (0)