280 lines
6.6 KiB
Vue
280 lines
6.6 KiB
Vue
<template>
|
|
<div class="map-center-warp">
|
|
<!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
|
|
<div class="map-pos">
|
|
<custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
|
|
</div>
|
|
|
|
<el-dialog
|
|
v-model="isShow"
|
|
:title="currentMap.name + dialogTitle"
|
|
:width="dialogWidth"
|
|
:style="{ 'background-image': 'url(' + getAssetsFile(bgImageVal) + ')' }"
|
|
:show-close="false"
|
|
:before-close="handleClose"
|
|
custom-class="map-info-dialog"
|
|
>
|
|
<template #header="{ close, titleId, titleClass }">
|
|
<slot name="header"></slot>
|
|
</template>
|
|
<slot name="dialogContent"></slot>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { ref, reactive, onMounted, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
|
|
const route = useRoute();
|
|
const props = defineProps({
|
|
dialogTitle: {
|
|
type: String,
|
|
default: '首页',
|
|
},
|
|
markerData: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
bgImage: {
|
|
type: String,
|
|
default: 'images/vsualized/mapopup.png',
|
|
},
|
|
dialogWidth: {
|
|
type: Number,
|
|
default: 360,
|
|
},
|
|
});
|
|
var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
|
|
let bgImageVal = computed(() => {
|
|
return props.bgImage;
|
|
});
|
|
const isShow = ref(false);
|
|
let geoData = geoJsonData;
|
|
let mapName = ref('ZJ' + route.name);
|
|
let mapConfig = reactive({
|
|
map: mapName.value,
|
|
zoom: 1,
|
|
viewControl: {
|
|
distance: 115,
|
|
alpha: 60,
|
|
beta: 0,
|
|
minBeta: -360,
|
|
maxBeta: 720,
|
|
// 限制视角，使不能旋转缩放平移
|
|
// rotateSensitivity: 0,
|
|
// zoomSensitivity: 0,
|
|
// panSensitivity: 0,
|
|
},
|
|
// itemStyle: {
|
|
// // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
|
// color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
|
// opacity: 1, // 图形的不透明度 [ default: 1 ]
|
|
// borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
|
// borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
|
|
// },
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: '#4bffb4', // 设置镇边界的颜色
|
|
borderWidth: 1, // 设置镇边界的宽度
|
|
areaColor: 'rgba(75,255,180,0.2)', // 设置背景透明，只显示边界
|
|
},
|
|
emphasis: {
|
|
borderColor: '#4bffb4',
|
|
borderWidth: 2,
|
|
areaColor: 'rgba(75,255,180,0.5)', // 设置背景透明，只显示边界
|
|
label: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
},
|
|
select: {
|
|
// 选中样式:ml-citation{ref="2,7" data="citationList"}
|
|
itemStyle: {
|
|
areaColor: 'rgba(75,255,180,0.6)',
|
|
borderColor: '#4bffb4',
|
|
borderWidth: 2,
|
|
},
|
|
label: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
|
|
label: {
|
|
show: true,
|
|
distance: 0,
|
|
color: '#fff',
|
|
padding: [6, 4, 2, 4],
|
|
borderRadius: 4,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#fff', // 地图初始化区域字体颜色
|
|
borderWidth: 0,
|
|
borderColor: '#000',
|
|
},
|
|
},
|
|
// emphasis: {
|
|
// //高亮状态的效果
|
|
// label: {
|
|
// show: true,
|
|
// color: '#fff',
|
|
// },
|
|
// itemStyle: {
|
|
// color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
|
|
// },
|
|
// },
|
|
});
|
|
|
|
const chartsData = reactive({
|
|
option: {
|
|
title: {
|
|
text: '',
|
|
left: 'center',
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (params) {
|
|
if (params.seriesType === 'effectScatter') {
|
|
return `${params.name}: (${params.value[0]}, ${params.value[1]})`;
|
|
}
|
|
return params.name;
|
|
},
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
orient: 'vertical',
|
|
left: 'right',
|
|
top: 'center',
|
|
feature: {
|
|
// dataView: { readOnly: false },
|
|
// restore: {},
|
|
// saveAsImage: {},
|
|
},
|
|
},
|
|
geo: {
|
|
roam: true,
|
|
left: '30px',
|
|
show: false,
|
|
zlevel: -1, // 必须设置，
|
|
...mapConfig,
|
|
},
|
|
series: [
|
|
{
|
|
roam: true,
|
|
type: 'map',
|
|
left: '30px',
|
|
...mapConfig,
|
|
},
|
|
{
|
|
name: '闪烁散点',
|
|
type: 'effectScatter', // 使用 effectScatter 类型
|
|
coordinateSystem: 'geo',
|
|
data: props.markerData,
|
|
symbolSize: function (val) {
|
|
return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
|
|
},
|
|
label: {
|
|
formatter: '{b}',
|
|
position: 'right',
|
|
show: false,
|
|
},
|
|
rippleEffect: {
|
|
period: 4, // 波纹动画周期
|
|
scale: 3, // 波纹缩放比例
|
|
brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
|
|
},
|
|
hoverAnimation: false,
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
let currentMap = reactive({});
|
|
|
|
const mapClick = (data) => {
|
|
if (props.markerData.length && props.markerData.length > 0) {
|
|
if (data.seriesType == 'effectScatter') {
|
|
isShow.value = true;
|
|
currentMap = data;
|
|
emit('mapclick', currentMap);
|
|
}
|
|
} else {
|
|
isShow.value = true;
|
|
currentMap = data;
|
|
emit('mapclick', currentMap);
|
|
}
|
|
};
|
|
const handleClose = () => {
|
|
isShow.value = false;
|
|
};
|
|
|
|
const emit = defineEmits(['mapclick']);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
::v-deep() {
|
|
.el-dialog {
|
|
background: url(iconUrl) no-repeat left top;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
border-radius: 8px !important;
|
|
min-height: 200px;
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
background-size: 100% 100%;
|
|
padding: 16px;
|
|
margin-top: 15%;
|
|
}
|
|
.el-dialog__header {
|
|
margin-top: 10px;
|
|
text-align: left;
|
|
padding-left: 48px;
|
|
.el-dialog__title,
|
|
i {
|
|
color: #fff !important;
|
|
}
|
|
.el-dialog__headerbtn {
|
|
top: 8px !important;
|
|
}
|
|
}
|
|
.map-dialog-my-header {
|
|
margin-top: 4px;
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
h4 {
|
|
font-weight: normal !important;
|
|
}
|
|
}
|
|
}
|
|
.map-center-warp {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: relative;
|
|
height: 90%;
|
|
.map-img {
|
|
width: 80%;
|
|
height: 80%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
object-fit: contain;
|
|
transform: translateX(-50%);
|
|
max-width: 1000px;
|
|
max-height: 1000px;
|
|
}
|
|
.map-pos {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
</style>
|