From 364dbb45d35c9706c20d9d7b653278ebae31588b Mon Sep 17 00:00:00 2001 From: 13713575202 <1345916905@qq.com> Date: Tue, 29 Apr 2025 15:08:12 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=B7=BB=E5=8A=A0marker?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 2 + src/assets/images/vsualized/marker.png | Bin 0 -> 1665 bytes src/components/530926geo.json | 1 - src/components/centerMap copy.vue | 250 ++++++++++++++++++ src/components/centerMap.vue | 207 +++++++++------ src/components/subTop.vue | 9 +- src/views/entities/components/entitiesMap.vue | 97 +++++++ src/views/entities/index.vue | 3 +- 8 files changed, 474 insertions(+), 95 deletions(-) create mode 100644 src/assets/images/vsualized/marker.png create mode 100644 src/components/centerMap copy.vue create mode 100644 src/views/entities/components/entitiesMap.vue diff --git a/components.d.ts b/components.d.ts index 8122bea..03ff7d5 100644 --- a/components.d.ts +++ b/components.d.ts @@ -9,8 +9,10 @@ declare module 'vue' { export interface GlobalComponents { BaseBg: typeof import('./src/components/baseBg.vue')['default'] CenterMap: typeof import('./src/components/centerMap.vue')['default'] + 'CenterMap copy': typeof import('./src/components/centerMap copy.vue')['default'] CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default'] Components: typeof import('./src/components/index.js')['default'] + copy: typeof import('./src/components/centerMap copy.vue')['default'] CurrentTime: typeof import('./src/components/currentTime.vue')['default'] CustomBack: typeof import('./src/components/customBack.vue')['default'] CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default'] diff --git a/src/assets/images/vsualized/marker.png b/src/assets/images/vsualized/marker.png new file mode 100644 index 0000000000000000000000000000000000000000..3e876731ea1a1c111cd864505814b29aaa9cb11e GIT binary patch literal 1665 zcmV-{27dX8P)Px*J4r-AR9HvNmrZOOXBo$T&pR_a`w?gT5yx@rv?f$>NJya#rF;p6Rv-=>$^i~Y zkvLHys8kM>%7NmFj|&`tTO~LkK~+GYsx49_gc?c@jnt5mHmPVG+ligpj$^Ms;`Q#% zyzhf&)@yC;b=Gb!eOD{(YG$7K&GY=9|ND&aAzShRd3Ji8?lykQzzRYV>M82SFCrXY z|GnEgG|s<>ay*R+KSq;i!utQFm|K8Sm|=u77Twz5LrWXKAHL6RrMi^2G9m}0;OhhQT|tWb3| zD%k>MR;f^b2LAh1dxV3O-pZmlWN^d_p{ zJRx!rftxXoKM}Evp-fDbgV^RQZ2)a(XO4g>S#lh4p1gq2S4U4cKEO(l61D_T^_Mp0 zkAY>Lm?c6g^sIq4X{j|(OdgL;m*YG5@=H6A#NzWV}HN(sJ=LJ^IDxZgWU}t{w;2|9Q;E9;;_*_HtdYjg{+y zeTUJ~8|a0fCMj2))ql!@c~z0iD)x$RnIdGK5@iOd-O`6P%JxWVgGmqUC1jrs81TAz z$o0vim>`gkKZ$gmgy~DLGFQj(e7NIY)Hw8w$6;j*mKf!lJa3c{iyQMICaH3REK6z2 zKTX_Rt}Q;)c+h5XS3Ej><$xFl%@B`iPCiZHF3f$u0~^8Rf7b=x^HJy}(Iz(9)4~7u!=a^kjSvx`H_&LprP;MY;3a$l*up zS(+b*qhCQQ6X?0q5U(QBde%;wm&M75XY6<_=Dmz#4#!R2p|)8&EuFeqp=rk@rRyZi zD#ggL-@qa6=If?kPHV8&$i06+!aHGg5%zTB-ufQQy#hCx;Z6A)G4HCnQ3n%&;W{}M zS)kIYRPBKpyM9C9F!kqX$h=*Q(9)0`!5W7e(=-*}DoKJ;p z?G@i+3ZGI#$gOtywm_-C8>Kr$NCzD?$3Ek8hw10D@(FoDjf67v8>Hu}xc@u|l?h}@ z-?INTFZs$ytZv-JT+0}4u*@rkpEOx>=rot%ooE4zPU)JWI7E|J`fHq2Z5}yYM%Z9yq z=t1arCwP#1z>^Bed11-vDcu9VuGcpBs&a+&vD05X|u{chd2Z-90YR4MdFw16dA{|c> z7w@!paaaa8YX0S&i=D0b85XIsfF;>|%eV5JRuA4*L+|sZ#za{n +
+ +
+ +
+ + + + + +
+ + + diff --git a/src/components/centerMap.vue b/src/components/centerMap.vue index 016648d..86d39ec 100644 --- a/src/components/centerMap.vue +++ b/src/components/centerMap.vue @@ -25,6 +25,7 @@ import { isEmpty, getAssetsFile } from '@/utils'; import { ref, reactive, onMounted } from 'vue'; import { useRoute } from 'vue-router'; import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径 +import { Select } from '@element-plus/icons-vue'; const route = useRoute(); const props = defineProps({ dialogTitle: { @@ -40,6 +41,84 @@ var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href; 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 coordTransform = (lng, lat) => { + // 这里需要实现具体转换算法 + // 示例伪代码，需替换真实转换逻辑 + return [lng + 0.003, lat + 0.002]; +}; const chartsData = reactive({ option: { title: { @@ -66,104 +145,57 @@ const chartsData = reactive({ // saveAsImage: {}, }, }, - geo3D: { - map: mapName.value, + geo: { roam: true, - zoom: 1, left: '30px', - show: true, + show: false, zlevel: -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 ] - }, - 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)', // 地图板块的颜色 - }, - }, + ...mapConfig, }, series: [ { - type: 'map3D', - map: mapName.value, - zoom: 1, + roam: true, + type: 'map', left: '30px', - 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 ] + ...mapConfig, + }, + { + name: '闪烁散点', + type: 'effectScatter', // 使用 effectScatter 类型 + coordinateSystem: 'geo', + data: [ + // 示例数据点，实际应用中应替换为真实的数据 + { + name: '永星食品加工厂', + value: [99.081993, 23.554045, 150], // 经度, 纬度, 数值 + symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'), + itemStyle: { + color: '#4bffb4', // + }, + }, + { + name: '耿马镇', + value: [99.402267, 23.538889, 150], // 经度, 纬度, 数值 + symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'), + itemStyle: { + color: '#4bffb4', // 勐永镇的颜色 + }, + }, + ], + symbolSize: function (val) { + return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小 }, 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', - }, + formatter: '{b}', + position: 'right', + show: false, }, - emphasis: { - //高亮状态的效果 - label: { - show: true, - color: '#fff', - }, - itemStyle: { - color: 'rgba(75,255,180,0.3)', // 地图板块的颜色 - }, + rippleEffect: { + period: 4, // 波纹动画周期 + scale: 3, // 波纹缩放比例 + brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill' }, + hoverAnimation: false, }, ], }, @@ -189,6 +221,7 @@ const emit = defineEmits(['mapclick']); div { box-sizing: border-box; } + ::v-deep() { .el-dialog { background: url('@/assets/images/vsualized/mapopup.png') no-repeat left top; diff --git a/src/components/subTop.vue b/src/components/subTop.vue index efb2b74..90621fa 100644 --- a/src/components/subTop.vue +++ b/src/components/subTop.vue @@ -110,7 +110,9 @@ const handleCommand = (data) => { .down-menu { background: transparent; } - +.el-dropdown { + display: inline-block; +} .el-dropdown-link { color: $color-custom-main !important; i { @@ -173,11 +175,6 @@ const handleCommand = (data) => { border-radius: 4px; padding: 6px; text-align: center; - ::v-deep() { - .el-dropdown { - display: inline-block; - } - } } } diff --git a/src/views/entities/components/entitiesMap.vue b/src/views/entities/components/entitiesMap.vue new file mode 100644 index 0000000..17c99da --- /dev/null +++ b/src/views/entities/components/entitiesMap.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/src/views/entities/index.vue b/src/views/entities/index.vue index 1ab92e8..85a42e3 100644 --- a/src/views/entities/index.vue +++ b/src/views/entities/index.vue @@ -24,7 +24,7 @@ - +
@@ -59,6 +59,7 @@ import hotCharts from './components/hotCharts.vue'; import benefitCharts from './components/benefitCharts.vue'; import entitiesStatistics from './components/entitiesStatistics.vue'; import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue'; +import entitiesMap from './components/entitiesMap.vue';