Verified Commit 4d2f114b authored by jxtxzzw's avatar jxtxzzw

足迹:样式和翻译

Signed-off-by: jxtxzzw's avatarjxtxzzw <jxtxzzw@126.com>
parent 6e4a0c40
......@@ -15,7 +15,7 @@ function getPointLayer(data) {
.scale('point_count', {
type: 'quantile', // 根据四分位数将每个聚合点实际包含的点的个数分为五份
})
.size('point_count', [5, 10, 21, 42, 84]) // 根据每个聚合点实际包含的点的个数决定点的大小
.size('point_count', [30, 40, 50, 60, 70]) // 根据每个聚合点实际包含的点的个数决定点的大小
.color('#4cfd47')
.style({
opacity: 1,
......@@ -64,13 +64,20 @@ export function constructMapAndScene(map, source, that) {
pointLayer.on('mousemove', (e) => {
let popMessage = '<span>'
if (e.feature.cluster) {
popMessage = `这里有 ${e.feature.point_count} 条记录`
popMessage = that.$t('footprint.cluster', {
count: e.feature.point_count,
})
} else {
const { date, name } = e.feature
if (date) {
popMessage += `于 ${date} `
popMessage += that.$t('footprint.date', {
date,
})
}
popMessage += `到达 ${name}</span>`
popMessage += that.$t('footprint.name', {
name,
})
popMessage += `</span>`
}
const popup = new Popup({
offsets: [0, 0],
......@@ -86,9 +93,3 @@ export function constructMapAndScene(map, source, that) {
return scene
}
export function destroyScene(scene) {
console.log('in destory')
console.log(scene)
scene.destroy()
}
......@@ -169,5 +169,14 @@
"ate_at": "Ate on {date} in some restaurant",
"fired": "Fired personally",
"fired_at": "Fired on {date} personally"
},
"footprint": {
"china": "China",
"world": "World",
"current": "You are browsing ",
"desc": "Click to switch between China Footprint and World Footprint",
"cluster": "There are {count} records here",
"date": "Arrived on {date} ",
"name": "Arrived at {name}"
}
}
......@@ -169,5 +169,14 @@
"ate_at": "于 {date} 品尝过",
"fired": "成功下厨复现",
"fired_at": "于 {date} 成功下厨复现"
},
"footprint": {
"china": "中国",
"world": "世界",
"current": "你正在浏览 ",
"desc": "点击切换中国足迹与世界足迹",
"cluster": "这里有 {count} 条记录",
"date": "于 {date} ",
"name": "到达 {name}"
}
}
......@@ -16,9 +16,8 @@
<script>
import * as footprintUtil from 'assets/footprintUtil'
import { footprint } from 'assets/reader'
export default {
name: 'WorldFootprint',
name: 'ChinaFootprint',
data() {
return {
map: 'world',
......
......@@ -2,19 +2,19 @@
<div>
<Alert type="info">
<p>
你当前正在查看的是
{{ $t('footprint.current') }}
<i-switch
v-model="map"
size="large"
true-value="china"
false-value="world"
>
<span slot="open">中国</span>
<span slot="close">世界</span>
<span slot="open">{{ $t('footprint.china') }}</span>
<span slot="close">{{ $t('footprint.world') }}</span>
</i-switch>
足迹
{{ $t('navigation.footprint') }}
</p>
<template slot="desc">点击切换中国足迹与世界足迹</template>
<template slot="desc">{{ $t('footprint.desc') }}</template>
</Alert>
<!-- 不要使用 v-if 来决定是不是渲染某一个组件,也不要在切换时销毁原来的 scene,地图的加载比较慢,那样会容易卡死 -->
<!-- 初次加载就把场景全部构建好,利用 CSS 的 display: none 来决定是否显示 -->
......
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