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 0000000..3e87673 Binary files /dev/null and b/src/assets/images/vsualized/marker.png differ diff --git a/src/components/530926geo.json b/src/components/530926geo.json index c4a9bca..ff46acf 100644 --- a/src/components/530926geo.json +++ b/src/components/530926geo.json @@ -18524,7 +18524,6 @@ 23.547411 ] ] - ] ] } diff --git a/src/components/centerMap copy.vue b/src/components/centerMap copy.vue new file mode 100644 index 0000000..773a9a0 --- /dev/null +++ b/src/components/centerMap copy.vue @@ -0,0 +1,250 @@ + + + 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';