From 21d0ef7882ef6d19f3da5c444b694f251a27dd16 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 20 三月 2024 13:48:01 +0800
Subject: [PATCH] feat:地图飞线
---
src/views/screen/components/screen-map/index.vue | 134 ++++++++++++++++++++++++++++++++++++++------
1 files changed, 114 insertions(+), 20 deletions(-)
diff --git a/src/views/screen/components/screen-map/index.vue b/src/views/screen/components/screen-map/index.vue
index 8a263a0..e1b84bc 100644
--- a/src/views/screen/components/screen-map/index.vue
+++ b/src/views/screen/components/screen-map/index.vue
@@ -15,18 +15,18 @@
import WrapperTitle from '../wrapper-title/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 +44,112 @@
// 鎺у埗鍣�
viewControl: {
beta: -30,
- alpha: 90,
- distance: 100,
+ alpha: 50,
+ distance: 105,
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: 105,
+ 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]
+ ],
+ ]
+ }
]
};
@@ -82,13 +166,21 @@
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 +204,7 @@
mapChart = echarts.init(this.$refs.map);
mapChart.setOption(mapConfig, true);
mapChart.on('click', (params) => {
+ return;
if (tempName === params.name) {
tempName = '';
this.initConfig();
@@ -144,8 +237,9 @@
.map-content {
flex: 1;
background: rgba(67, 102, 155, 0.3);
- border: 1px solid rgba(47, 91, 157, 0.8);
+ border: 1px solid rgba(47, 91, 157, 0.8);
}
+
.map-style {
width: 100%;
height: 100%;
--
Gitblit v1.8.0