提交 d9c0373b authored 作者: yanpeng's avatar yanpeng

union map

上级 e4c2ca62
......@@ -50,7 +50,7 @@ export const countryCoordMap = {
// 欧洲
俄罗斯: [37.6184, 55.7558], // 俄罗斯莫斯科
德国: [10.4515, 51.1657], // 德国柏林
英国: [-3.436, 55.3781], // 英国伦敦
英国: [-2, 54], // 英国伦敦
法国: [2.2137, 46.2276], // 法国巴黎
意大利: [12.5674, 41.8719], // 意大利罗马
西班牙: [-3.7492, 40.4637], // 西班牙马德里
......@@ -218,12 +218,12 @@ export function convertAsiaCenterCoord(coord) {
const [lng, lat] = coord;
// 将以本初子午线为基准的坐标转换为以亚洲为中心的坐标
// world-asia-center.json 是将标准坐标的经度减去了 180 度
let newLng = lng - 180;
// world-asia-center.json 是将标准坐标的经度加上了 180 度(地图向右平移)
let newLng = lng + 180;
// 规范化到 [-180, 180] 范围
if (newLng < -180) {
newLng += 360;
if (newLng > 180) {
newLng -= 360;
}
return [newLng, lat];
......
......@@ -626,6 +626,7 @@ function createChart() {
map: "world",
roam: true,
zoom: 1.2,
nameMap: nameMap,
label: {
show: false
},
......
......@@ -7,12 +7,19 @@
<div class="sub-title">{{ subtitle }}</div>
</div>
<div class="description">{{ description }}</div>
<div v-if="quantity > 0" class="quantity" :style="{ color: color }">{{ quantity }}{{ unit || "个" }}</div>
<div v-if="quantity > 0" class="quantity" :style="{ color: color }">
{{ quantity }}{{ unit || "个" }}
<div class="quantity-title-des" v-if="desMap[title]">
<img class="info-icon" :src="infoIcon" alt="" />
{{ desMap[title] }}
</div>
</div>
</div>
</div>
</template>
<script setup>
import infoIcon from "../assets/icons/info-icon.png";
defineProps({
title: {
type: String,
......@@ -39,6 +46,11 @@ defineProps({
default: "#409EFF"
}
});
const desMap = {
实体清单: "中国实体数量",
商业管制清单: "受管制物项数量",
关键与新兴技术清单: "关键与新兴技术数量"
};
</script>
<style scoped lang="scss">
......@@ -53,9 +65,7 @@ defineProps({
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
......@@ -117,9 +127,27 @@ defineProps({
.quantity {
position: absolute;
top: 20px;
top: 15px;
right: 20px;
font-size: 32px;
font-weight: 700;
width: 150px;
display: flex;
flex-direction: column;
align-items: flex-end;
.quantity-title-des {
display: flex;
align-items: center;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
line-height: 1.4;
.info-icon {
width: 16px;
height: 16px;
margin-right: 4px;
}
}
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论