修改地图撒点数据处理

This commit is contained in:
maojiacai
2025-10-30 17:57:55 +08:00
parent 35583f52d4
commit b9ad571738
2 changed files with 139 additions and 80 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="carcTitle">省内区域劳务协作撒点</div> <div class="carcTitle">省内区域劳务协作撒点</div>
<div ref="map" style="width: 17vw; height: 14.5vw"></div> <div ref="map" style="width: 19vw; height: 16vw"></div>
</div> </div>
</template> </template>
@ -36,91 +36,150 @@ const calcResponsivePX = (pxValue) => {
// 初始点位数据 // 初始点位数据
const initialPoints = [ const initialPoints = [
{ name: "攀枝花", value: [101.718, 26.582, 0], count: 0 }, { name: "绵阳市", value: [104.69,31.47, 0], count: 0 },
{ name: "雅安", value: [103.009, 29.988, 0], count: 0 }, { name: "广元市昭化区", value: [105.97,32.33, 0], count: 0 },
{ name: "眉山", value: [103.848, 30.082, 0], count: 0 }, { name: "巴中市恩阳区", value: [106.64,31.80, 0], count: 0 },
{ name: "自贡", value: [104.777, 29.350, 0], count: 0 }, { name: "达州市渠县", value: [106.98,30.84, 0], count: 0 },
{ name: "泸州", value: [105.442, 28.871, 0], count: 0 }, { name: "达州市开江县", value: [107.88,31.09, 0], count: 0 },
{ name: "资阳", value: [104.628, 30.122, 0], count: 0 }, { name: "达州市大竹县", value: [107.21,30.74, 0], count: 0 },
{ name: "遂宁", value: [105.576, 30.523, 0], count: 0 }, { name: "广安市", value: [106.64,30.46, 0], count: 0 },
{ name: "广安", value: [106.636, 30.463, 0], count: 0 }, { name: "广安市岳池县", value: [106.45,30.54, 0], count: 0 },
{ name: "德阳", value: [104.399, 31.130, 0], count: 0 }, { name: "广安华蓥市", value: [106.79,30.40, 0], count: 0 },
{ name: "绵阳", value: [104.684185, 31.473263, 0], count: 0 }, { name: "南充顺庆区", value: [106.10,30.80, 0], count: 0 },
{ name: "广元", value: [105.834, 32.435, 0], count: 0 }, { name: "遂宁市大英县", value: [105.24,30.60, 0], count: 0 },
{ name: "巴中", value: [106.753, 31.857, 0], count: 0 }, { name: "德阳市中江县", value: [104.69,31.04, 0], count: 0 },
{ name: "达州", value: [107.467, 31.209, 0], count: 0 }, { name: "资阳市雁江区", value: [104.68,30.11, 0], count: 0 },
{ name: "南充", value: [106.110, 30.837, 0], count: 0 } { name: "雅安市荥经县", value: [102.85,29.80, 0], count: 0 },
{ name: "雅安市天全县", value: [102.76,30.07, 0], count: 0 },
{ name: "眉山市青神县", value: [103.85,29.84, 0], count: 0 },
{ name: "自贡贡井区", value: [104.72,29.35, 0], count: 0 },
{ name: "泸州市", value: [105.45,28.88, 0], count: 0 },
{ name: "攀枝花市", value: [101.73,26.59, 0], count: 0 },
]; ];
// 获取动态配置 // 生成随机高度值函数
const getChartOption = () => ({ const generateRandomHeights = (points, minHeight = 10, maxHeight = 25) => {
tooltip: { return points.map(point => ({
trigger: "item", ...point,
formatter: (params) => { value: [point.value[0], point.value[1], Math.random() * (maxHeight - minHeight) + minHeight]
if (params.seriesType === "scatter3D") { }));
return `${params.name}<br/>合作社数量:${params.data.count || 0}`; };
// 获取动态配置 - 只展示 initialPoints 中的数据
const getChartOption = () => {
// 每次调用生成新的随机高度
const pointsWithRandomHeights = generateRandomHeights(initialPoints);
return {
tooltip: {
trigger: "item",
formatter: (params) => {
if (params.seriesType === "scatter3D") {
return `${params.name}<br/>合作社数量:${params.data.count || 0}`;
}
return params.name;
},
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "#30DCFF",
textStyle: {
color: "#fff",
fontSize: calcResponsivePX(12)
} }
return params.name;
}
},
geo3D: {
type: "map3D",
map: "sichuan",
regionHeight: 6,
boxHeight: 2,
roam: false,
label: {
show: true,
color: "#CBF2FA",
fontSize: calcResponsivePX(10),
fontWeight: "bold"
}, },
itemStyle: { geo3D: {
color: "rgba(27, 129, 150, 0.4)", type: "map3D",
borderColor: "#61cfff", map: "sichuan",
borderWidth: 2, regionHeight: 6,
opacity: 0.75 boxHeight: 2,
}, roam: false,
emphasis: { label: {
itemStyle: { color: "rgba(27, 129, 150, 0.65)", opacity: 0.85 }, show: false, // 隐藏地图区域标签,只显示散点
label: { color: "#ffff00" } color: "#fff",
}, fontSize: calcResponsivePX(10),
light: { fontWeight: "bold",
main: { intensity: 1.6, shadow: true, shadowQuality: "high", alpha: 35, beta: 15 }, borderWidth: 5,
ambient: { intensity: 0.35 } borderColor: "rgba(40,40,41,0.48)"
}, },
shading: "lambert", itemStyle: {
viewControl: { color: "rgba(27,129,150,0.18)",
distance: 110, borderColor: "#61cfff",
alpha: 45, borderWidth: 2,
beta: 10, opacity: 0.3 // 降低地图透明度,突出散点
}, },
groundPlane: { show: false }, emphasis: {
postEffect: { itemStyle: {
enable: true, color: "rgba(27, 129, 150, 0.3)",
bloom: { opacity: 0.5
},
label: { show: false }
},
light: {
main: {
intensity: 1.6,
shadow: true,
shadowQuality: "high",
alpha: 35,
beta: 15
},
ambient: { intensity: 0.35 }
},
shading: "lambert",
viewControl: {
distance: 110,
alpha: 45,
beta: 10
},
groundPlane: { show: false },
postEffect: {
enable: true, enable: true,
bloomIntensity: 0.25 bloom: {
enable: true,
bloomIntensity: 0.25
}
} }
} },
}, series: [
series: [
{ {
name: "城市点位(3D)", name: "城市点位(3D)",
type: "scatter3D", type: "scatter3D",
coordinateSystem: "geo3D", coordinateSystem: "geo3D",
data: initialPoints.map(p => ({ data: pointsWithRandomHeights.map(p => ({
name: p.name, name: p.name,
value: [p.value[0], p.value[1], 6], value: p.value,
count: p.count count: p.count,
// 为每个点单独配置 label
label: {
show: true,
position: [0, 0, p.value[2] + 3], // 3D坐标 [x, y, z]在点上方3个单位
formatter: p.name,
backgroundColor: 'rgba(0,0,0,0.7)',
borderWidth: 1,
padding: [2, 6],
borderRadius: 3,
color: '#fff',
fontSize: 10
}
})), })),
symbol: "triangle", symbol: "triangle", // 改为圆形,更明显
symbolSize: calcResponsivePX(12), symbolSize: calcResponsivePX(12), // 增大符号尺寸
itemStyle: { color: "#FFBE34" }, itemStyle: { color: "#FFBE34" },
label: { show: false } // label: {
// show: true,
// position: "top",
// formatter: "{b}", // 只显示名称
// color: "#FFF",
// fontSize: calcResponsivePX(11),
// fontWeight: "bold",
// backgroundColor: "rgba(0,0,0,0.8)",
// // borderColor: "#FFBE34",
// borderWidth: calcResponsivePX(1),
// padding: [4, 6],
// borderRadius: calcResponsivePX(1)
// }
} }
] ]
}); }
};
// 处理图表重绘(防抖优化) // 处理图表重绘(防抖优化)
const handleChartResize = debounce(() => { const handleChartResize = debounce(() => {

View File

@ -59,18 +59,18 @@
:type1="cardFourInfo.type1" :type1="cardFourInfo.type1"
:type2="cardFourInfo.type2" :type2="cardFourInfo.type2"
> >
<el-carousel <!-- <el-carousel-->
:interval="8000" <!-- :interval="8000"-->
type="card" <!-- type="card"-->
height="17vw" <!-- height="17vw"-->
indicator-position="none" <!-- indicator-position="none"-->
:autoplay="true" <!-- :autoplay="true"-->
> <!-- >-->
<!-- <el-carousel-item><LaborSystemOne /></el-carousel-item> --> <!-- <el-carousel-item><LaborSystemOne /></el-carousel-item> -->
<el-carousel-item class="isVisibleImg"><LaborSystemTwo /></el-carousel-item> <div class="isVisibleImg"><LaborSystemTwo /></div>
<!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> --> <!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> -->
<!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> --> <!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
</el-carousel> <!-- </el-carousel>-->
</enterprise-employment-card> </enterprise-employment-card>
<enterprise-employment-card <enterprise-employment-card
style="margin-top: 0.625vw" style="margin-top: 0.625vw"