258 lines
7.2 KiB
Vue
258 lines
7.2 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 :chart-data="chartsData.valData" height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
var aspectScale = 0.8807505292367753;
|
|
// var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
|
|
// var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
|
|
var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
|
|
|
|
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
|
|
let geoData = geoJsonData;
|
|
let mapName = ref('ZJ');
|
|
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: {},
|
|
},
|
|
},
|
|
geo3D: {
|
|
map: mapName.value,
|
|
roam: true,
|
|
zoom: 1.2,
|
|
show: true,
|
|
zlevel: -1, // 必须设置，
|
|
viewControl: {
|
|
distance: 110,
|
|
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 ]
|
|
},
|
|
label: {
|
|
show: true,
|
|
distance: 0,
|
|
color: '#000',
|
|
padding: [6, 4, 2, 4],
|
|
borderRadius: 4,
|
|
backgroundColor: 'rgba(255,255,255,0.2)',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#E87813', // 地图初始化区域字体颜色
|
|
borderWidth: 0,
|
|
borderColor: '#000',
|
|
},
|
|
},
|
|
emphasis: {
|
|
//高亮状态的效果
|
|
label: {
|
|
show: true,
|
|
color: '#fff',
|
|
},
|
|
itemStyle: {
|
|
color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
// 闪烁散点图系列
|
|
{
|
|
name: '闪烁散点',
|
|
type: 'effectScatter', // 使用 effectScatter 类型
|
|
coordinateSystem: 'geo',
|
|
data: [
|
|
// 示例数据点，实际应用中应替换为真实的数据
|
|
{
|
|
name: '孟定镇',
|
|
value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
|
|
itemStyle: {
|
|
color: '#FF0000', // 孟定镇的颜色
|
|
},
|
|
},
|
|
{
|
|
name: '勐永镇',
|
|
value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
|
|
itemStyle: {
|
|
color: '#00FF00', // 勐永镇的颜色
|
|
},
|
|
},
|
|
],
|
|
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,
|
|
},
|
|
],
|
|
},
|
|
valData: [
|
|
{
|
|
map: mapName.value,
|
|
roam: true,
|
|
zoom: 0.9,
|
|
show: true,
|
|
itemStyle: {
|
|
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
|
color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
|
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
|
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
|
borderColor: 'rgba(92, 184, 238, 1)', // 图形描边的颜色。[ default: #333 ]
|
|
},
|
|
label: {
|
|
show: true,
|
|
distance: 0,
|
|
color: '#000',
|
|
padding: [6, 4, 2, 4],
|
|
borderRadius: 4,
|
|
backgroundColor: 'rgba(255,255,255,.66)',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#E87813', // 地图初始化区域字体颜色
|
|
borderWidth: 0,
|
|
borderColor: '#000',
|
|
},
|
|
},
|
|
// emphasis: {
|
|
// //高亮状态的效果
|
|
// label: {
|
|
// show: true,
|
|
// color: '#fff',
|
|
// },
|
|
// itemStyle: {
|
|
// // show: false,
|
|
// areaColor: {
|
|
// type: 'linear',
|
|
// x: 0,
|
|
// y: 0,
|
|
// x2: 1,
|
|
// y2: 0,
|
|
// colorStops: [
|
|
// { offset: 0, color: '#4bffb4' },
|
|
// { offset: 1, color: '#4bffb4' },
|
|
// ],
|
|
// },
|
|
// },
|
|
// },
|
|
},
|
|
// 闪烁散点图系列
|
|
{
|
|
name: '闪烁散点',
|
|
type: 'effectScatter', // 使用 effectScatter 类型
|
|
coordinateSystem: 'geo',
|
|
data: [
|
|
// 示例数据点，实际应用中应替换为真实的数据
|
|
{
|
|
name: '孟定镇',
|
|
value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
|
|
itemStyle: {
|
|
color: '#FF0000', // 孟定镇的颜色
|
|
},
|
|
},
|
|
{
|
|
name: '贺派乡',
|
|
value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
|
|
itemStyle: {
|
|
color: '#00FF00', // 贺派乡的颜色
|
|
},
|
|
},
|
|
],
|
|
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,
|
|
},
|
|
],
|
|
});
|
|
|
|
onMounted(() => {
|
|
console.info('iconUrl', iconUrl);
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
.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>
|