From 3717e24abe2d2fd348f3cd13ad903dca3af167f1 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期四, 05 十二月 2024 16:16:03 +0800
Subject: [PATCH] 拆分省厅标签
---
src/views/screen/components/screen-map/index.vue | 155 +++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 130 insertions(+), 25 deletions(-)
diff --git a/src/views/screen/components/screen-map/index.vue b/src/views/screen/components/screen-map/index.vue
index 8a263a0..ea2a99f 100644
--- a/src/views/screen/components/screen-map/index.vue
+++ b/src/views/screen/components/screen-map/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="map-container">
- <wrapper-title :title="'鍖哄煙鍦板浘'"></wrapper-title>
+ <!-- <wrapper-title :title="'鍖哄煙鍦板浘'"></wrapper-title> -->
<div class="map-content">
<div ref="map" class="map-style"></div>
</div>
@@ -11,22 +11,23 @@
<script>
import * as echarts from 'echarts';
import 'echarts-gl';
-import mapData from '@/assets/map/zigong.json';
+import mapData from '@/assets/map/zigong2.json';
import WrapperTitle from '../wrapper-title/index';
+import ScreenData from '../screen-data/index';
echarts.registerMap('zigong', mapData);
-console.log(mapData);
let mapChart = null;
let tempName = '';
let observer = null;
const mapConfig = {
- series: [{
- map: "zigong", //娉ㄥ唽鍦板浘鐨勫悕瀛�
- type: "map3D",
+ geo3D: {
+ map: 'zigong',
+ show: true,
bottom: 0,
left: 0,
top: 0,
right: 0,
+ zlevel: 1,
itemStyle: {
color: "#4189f2", // 鑳屾櫙
opacity: 1, //閫忔槑搴�
@@ -44,28 +45,112 @@
// 鎺у埗鍣�
viewControl: {
beta: -30,
- alpha: 90,
- distance: 100,
+ alpha: 50,
+ distance: 78,
maxBeta: 180,
- panSensitivity: 0
+ panSensitivity: 0,
+ zoomSensitivity: 1,
+ rotateSensitivity: 0,
},
// 榧犳爣绉诲叆鏃舵牱寮�
emphasis: {
itemStyle: {
- color: "#F63545"
+ color: "#F63545",
}
},
+ // regions: mapData.features.map((item) => {
+ // return {
+ // name: item.properties.name,
+ // itemStyle: {
+ // color: "#4189f2"
+ // }
+ // }
+ // })
+ },
+ series: [
+ {
+ map: "zigong", //娉ㄥ唽鍦板浘鐨勫悕瀛�
+ type: "map3D",
+ bottom: 0,
+ left: 0,
+ top: 0,
+ right: 0,
+ zlevel: 2,
+ itemStyle: {
+ color: "#4189f2", // 鑳屾櫙
+ opacity: 0, //閫忔槑搴�
+ borderWidth: 0, // 杈规瀹藉害
+ borderColor: "#fff", // 杈规棰滆壊
+ fontSize: 18, //
+ },
- // 鏁版嵁
- data: mapData.features.map((item) => {
- return {
- name: item.properties.name,
- itemStyle: {
- color: "#4189f2"
+ // 鏍囩
+ label: {
+ show: false,
+ color: "#fff", //鍦板浘鍒濆鍖栧尯鍩熷瓧浣撻鑹�
+ fontSize: 18,
+ },
+ // 鎺у埗鍣�
+ viewControl: {
+ beta: -30,
+ alpha: 50,
+ distance: 78,
+ maxBeta: 180,
+ panSensitivity: 0,
+ zoomSensitivity: 1,
+ rotateSensitivity: 0,
+ },
+
+ // 鏁版嵁
+ data: mapData.features.map((item) => {
+ return {
+ name: item.properties.name,
+ itemStyle: {
+ color: "#4189f2"
+ }
}
- }
- }),
- }
+ }),
+
+ },
+ {
+ type: 'lines3D',
+ coordinateSystem: 'geo3D',
+ zlevel: 15,
+
+ effect: {
+ show: true,
+ period: 5,
+ trailLength: 0.2,
+ color: '#01AAED',
+ },
+ lineStyle: {
+ width: 3,
+ opacity: 0.6,
+ color: '#FFB800'
+ },
+ data: [
+ [
+ [104.343914,29.470778],
+ [104.766432,29.328016]
+ ],
+ [
+ [104.603116,29.347364],
+ [104.766432,29.328016]
+ ],
+ [
+ [104.873139,29.30861],
+ [104.766432,29.328016]
+ ],
+ [
+ [105.058792,29.1521],
+ [104.766432,29.328016]
+ ],
+ [
+ [104.848535,29.410526],
+ [104.766432,29.328016]
+ ],
+ ]
+ }
]
};
@@ -77,18 +162,27 @@
}
},
components: {
- WrapperTitle
+ WrapperTitle,
+ ScreenData
},
methods: {
filterData(name) {
this.initConfig();
- let temp = mapConfig.series[0].data.find(item => item.name === name);
+ let temp = mapConfig.geo3D.regions.find(item => item.name === name);
+
+ // mapConfig.geo3D.regions.push({
+ // name: name,
+ // itemStyle: {
+ // color: '#F63545'
+ // }
+ // });
temp.itemStyle.color = '#F63545';
mapChart.setOption(mapConfig, true);
this.$emit('filterData', name);
},
initConfig() {
- mapConfig.series[0].data.forEach(item => {
+ // mapConfig.geo3D.regions = [];
+ mapConfig.geo3D.regions.forEach(item => {
item.itemStyle.color = '#4189f2';
});
},
@@ -112,6 +206,7 @@
mapChart = echarts.init(this.$refs.map);
mapChart.setOption(mapConfig, true);
mapChart.on('click', (params) => {
+ return;
if (tempName === params.name) {
tempName = '';
this.initConfig();
@@ -143,12 +238,22 @@
.map-content {
flex: 1;
- background: rgba(67, 102, 155, 0.3);
- border: 1px solid rgba(47, 91, 157, 0.8);
+ position: relative;
+ // background: rgba(67, 102, 155, 0.3);
+ // border: 1px solid rgba(47, 91, 157, 0.8);
}
+
.map-style {
width: 100%;
height: 100%;
}
}
-</style>
\ No newline at end of file
+
+.data-container {
+ width: 100%;
+ display: flex;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+</style>
--
Gitblit v1.8.0