Verified Commit b957d946 authored by jxtxzzw's avatar jxtxzzw

足迹地图支持显示照片

Signed-off-by: jxtxzzw's avatarjxtxzzw <jxtxzzw@126.com>
parent 8d32a518
Pipeline #177 passed with stages
in 8 minutes and 15 seconds
......@@ -5,20 +5,23 @@
"lat": 30.455,
"date": "2020-12-09",
"name": "XX公园",
"map": "china"
"map": "china",
"pictures": "1.jpg,2.jpg"
},
{
"id": 2,
"lng": 114.345,
"lat": 31.455,
"name": "YY博物馆",
"map": "china"
"map": "china",
"pictures": null
},
{
"id": 3,
"lng": 134.345,
"lat": 33.455,
"name": "ZZZ",
"map": "world"
"map": "world",
"pictures": "1.jpg"
}
]
......@@ -8,6 +8,7 @@
"coding": "/data/coding/",
"exhibit": "/data/photo/",
"food": "/data/food/",
"honor": "/data/honor/"
"honor": "/data/honor/",
"footprint": "/data/footprint/"
}
}
......@@ -18,7 +18,7 @@ function getPointLayer(data, that) {
.scale('point_count', {
type: 'quantile', // 根据四分位数将每个聚合点实际包含的点的个数分为五份
})
.size('point_count', [30, 40, 50, 60, 70]) // 根据每个聚合点实际包含的点的个数决定点的大小
.size('point_count', [20, 25, 30, 35, 40]) // 根据每个聚合点实际包含的点的个数决定点的大小
.color('#4cfd47')
.style({
opacity: 1,
......@@ -27,6 +27,13 @@ function getPointLayer(data, that) {
.active(true) // hover 高亮显示
.select(true) // 选中高亮显示
.animate(true) // 水波纹效果,可以扩展更多的点动画效果
.on('click', (e) => {
if (e.feature.cluster) {
that.$Message.info(that.$t('footprint.cluster_click'))
} else {
that.$emit('pictures', e.feature.id, e.feature.pictures)
}
})
}
export function constructMapAndScene(map, source, that) {
......
......@@ -181,7 +181,9 @@
"desc": "Click to switch between China Footprint and World Footprint",
"cluster": "There are {count} records here",
"date": "Arrived on {date} ",
"name": "Arrived at {name}"
"name": "Arrived at {name}",
"cluster_click": "Zoom in, and click on a single footprint to see the picture(s)",
"no_pictures": "No pictures here, so why not visit other footprints?"
},
"exam": {
"total": "Total",
......
......@@ -181,7 +181,9 @@
"desc": "点击切换中国足迹与世界足迹",
"cluster": "这里有 {count} 条记录",
"date": "于 {date} ",
"name": "到达 {name}"
"name": "到达 {name}",
"cluster_click": "放大,然后点击单个足迹查看照片吧",
"no_pictures": "这里没有照片,换别的足迹看看吧"
},
"exam": {
"total": "满分",
......
......@@ -23,14 +23,42 @@
display: map === 'china' ? 'block' : 'none',
}"
@scene="saveChinaScene"
@pictures="showPictures"
/>
<WorldFootprint @scene="saveWorldScene" />
<WorldFootprint @scene="saveWorldScene" @pictures="showPictures" />
<Modal v-model="pictureModal" footer-hide width="90">
<!-- 对话框宽度,对话框的宽度是响应式的,当屏幕尺寸小于 768px 时,宽度会变为自动auto -->
<!-- 当其值不大于 100 时以百分比显示,大于 100 时为像素 -->
<Carousel
v-if="pictureModal"
v-model="carouselId"
loop
autoplay
:autoplay-speed="5000"
>
<!-- .ivu-carousel-item 这个 div 宽度为 0 的问题,需要加上 v-if="pictureModal" 令其和 Modal 一起渲染就 OK 了 -->
<!-- 类似的,对于 list,需要加上 v-if="list.length" -->
<CarouselItem v-for="picture in pictures" :key="picture.id">
<div class="demo-carousel">
<div class="cycle-gallery">
<div class="img-box">
<div class="img-holder">
<img :src="setting.src.footprint + picture" />
</div>
</div>
</div>
</div>
</CarouselItem>
</Carousel>
</Modal>
</div>
</template>
<script>
import ChinaFootprint from '@/components/ChinaFootprint'
import WorldFootprint from '@/components/WorldFootprint'
import { setting } from 'assets/reader'
export default {
name: 'Footprint',
components: {
......@@ -39,9 +67,14 @@ export default {
},
data() {
return {
setting,
map: 'china',
chinaScene: null,
worldScene: null,
pictureModal: false,
pictureId: 0,
carouselId: 0,
pictures: [],
}
},
watch: {
......@@ -65,6 +98,70 @@ export default {
saveWorldScene(scene) {
this.worldScene = scene
},
showPictures(id, pictures) {
this.pictureId = id
if (pictures != null && pictures !== '') {
this.pictures = pictures.split(',')
this.pictureModal = true
} else {
this.$Message.error(this.$t('footprint.no_pictures'))
this.pictures = []
this.pictureModal = false
}
},
},
}
</script>
<style scoped>
.demo-carousel {
text-align: center;
color: #fff;
font-size: 20px;
background: #fff;
}
.cycle-gallery {
position: relative;
text-align: center;
padding: 40px 200px 33px;
margin: 0 0 60px;
line-height: 1.6;
}
.cycle-gallery p {
color: #515a6e;
}
.cycle-gallery .img-box {
display: block;
line-height: 1.5;
padding: 0 0 40px;
}
.cycle-gallery .img-box .img-holder {
display: inline-block;
vertical-align: middle;
margin: 0 22px 0 0;
overflow: hidden;
}
.cycle-gallery .img-box .img-holder img {
/* TODO 样式大小有待调整 */
width: 100%;
height: 100%;
border-radius: 10%;
}
.cycle-gallery .img-box h3 {
margin: 0;
line-height: 1.33333;
color: #635c73;
}
.cycle-gallery .img-box a {
font-weight: bold;
}
.cycle-gallery::after {
content: '';
position: absolute;
bottom: 0;
left: 180px;
right: 180px;
height: 1px;
background: #f4f4f4;
}
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment