From b2ecc2756c0b46ddcd8de8787d37affff6c11a97 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期三, 25 九月 2024 11:08:34 +0800
Subject: [PATCH] 地图调整测试
---
src/views/screen/components/map3.vue | 296 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 167 insertions(+), 129 deletions(-)
diff --git a/src/views/screen/components/map3.vue b/src/views/screen/components/map3.vue
index 1fbcbf2..a8380ee 100644
--- a/src/views/screen/components/map3.vue
+++ b/src/views/screen/components/map3.vue
@@ -14,48 +14,89 @@
type: Object,
default: {},
},
+ platformData: {
+ type: Object,
+ default: {},
+ },
},
data() {
return {
myChart: null, // ECharts 瀹炰緥
big: 130,
- data: [
- {
- name: '鑷祦浜曞尯',
- number: '0',
- value: [104.616237686031, 29.081, 300]
- },
- {
- name: '楂樻柊鍖�',
- number: '0',
- value: [104.84, 29.405, 300]
- },
- {
- name: '澶у畨鍖�',
- number: '0',
- value: [105.136, 29.30548885792289, 300]
- },
- {
- name: '娌挎哗鍖�',
- number: '0',
- value: [104.956237686031, 29.2, 300]
- },
- {
- name: '璐′簳鍖�',
- number: '0',
- value: [104.436237686031, 29.16048885792289, 300]
- },
- {
- name: '鑽ｅ幙',
- number: '0',
- value: [104.480237686031, 29.40048885792289, 300]
- },
- {
- name: '瀵岄『鍘�',
- number: '0',
- value: [105.12, 29.076, 300]
- }
- ],
+ // dotData: [
+ // {
+ // name: '鑷祦浜曞尯',
+ // value: [104.645471408, 29.150000, 300],
+ // platformOnline: true
+ // },
+ // {
+ // name: '楂樻柊鍖�',
+ // value: [104.780000, 29.22, 300],
+ // platformOnline: true
+ // },
+ // {
+ // name: '澶у畨鍖�',
+ // value: [104.90805, 29.275946, 300],
+ // platformOnline: true
+ // },
+ // {
+ // name: '娌挎哗鍖�',
+ // value: [104.78804, 29.130594, 300],
+ // platformOnline: true
+ // },
+ // {
+ // name: '璐′簳鍖�',
+ // value: [104.559106, 29.161427, 300],
+ // platformOnline: true
+ // },
+ // {
+ // name: '鑽ｅ幙',
+ // value: [104.3234, 29.2838, 300],
+ // platformOnline: true
+ // },
+ // {
+ // name: '瀵岄『鍘�',
+ // value: [104.950000, 29.04, 300],
+ // platformOnline: true
+ // }
+ // ],
+ // markData: [
+ // {
+ // name: '鑷祦浜曞尯',
+ // number: '0',
+ // value: [104.490471408, 28.960000, 300]
+ // },
+ // {
+ // name: '楂樻柊鍖�',
+ // number: '0',
+ // value: [104.86, 29.405, 300]
+ // },
+ // {
+ // name: '澶у畨鍖�',
+ // number: '0',
+ // value: [105.236, 29.30548885792289, 300]
+ // },
+ // {
+ // name: '娌挎哗鍖�',
+ // number: '0',
+ // value: [104.760237686031, 28.8500000, 300]
+ // },
+ // {
+ // name: '璐′簳鍖�',
+ // number: '0',
+ // value: [104.322237686031, 29.00048885792289, 300]
+ // },
+ // {
+ // name: '鑽ｅ幙',
+ // number: '0',
+ // value: [104.466237686031, 29.44048885792289, 300]
+ // },
+ // {
+ // name: '瀵岄『鍘�',
+ // number: '0',
+ // value: [105.18, 29.000000, 300]
+ // }
+ // ],
}
},
mounted() {
@@ -68,15 +109,24 @@
},
methods: {
initializeMap() {
- this.updateMapData()
+ // this.updateMapData()
this.getChinData('鑷础甯�', chinaJson)
},
updateMapData() {
- this.data.forEach(item => {
- if (this.geoCoordinates[item.name]) {
- item.number = this.geoCoordinates[item.name].score || '0'
- }
- })
+ if (this.geoCoordinates) {
+ this.markData.forEach(item => {
+ if (this.geoCoordinates[item.name]) {
+ item.number = this.geoCoordinates[item.name].score || '0'
+ }
+ })
+ }
+ if (this.platformData) {
+ this.dotData.forEach(item => {
+ if (this.platformData[item.name]) {
+ item.platformOnline = this.platformData[item.name].platformOnline
+ }
+ })
+ }
},
updateChart() {
if (this.myChart) {
@@ -84,7 +134,11 @@
// Update the scatter3D series data
const scatterSeries = option.series.find(s => s.type === 'scatter3D' && s.name !== '鏁ｇ偣鍥�');
if (scatterSeries) {
- scatterSeries.data = this.data;
+ scatterSeries.data = this.markData;
+ }
+ const dotSeries = option.series.find(s => s.type === 'scatter3D' && s.name === '鏁ｇ偣鍥�');
+ if (dotSeries) {
+ dotSeries.data = this.dotData;
}
this.myChart.setOption(option);
}
@@ -106,9 +160,9 @@
map: name,
left: '-5%',
top: '5%',
- boxWidth: 100,
- regionHeight: 2,
- zlevel: 5,
+ boxWidth: 80,
+ regionHeight: 0.5,
+ zlevel: 10,
tooltip: {
show: true,
@@ -123,7 +177,7 @@
},
label: {
- show: true, // (鍦板浘涓婄殑鍩庡競鍚嶇О)鏄惁鏄剧ず鏍囩
+ show: false, // (鍦板浘涓婄殑鍩庡競鍚嶇О)鏄惁鏄剧ず鏍囩
distance: 5,
formatter: function (params) {
return params.name ? params.name : ' '
@@ -136,7 +190,7 @@
emphasis: {
label: {
- show: true,
+ show: false,
textStyle: {
color: '#ffffff' // 楂樹寒鏂囧瓧涓轰寒钃濊壊
}
@@ -164,7 +218,7 @@
zoomSensitivity: 0, // 缂╂斁
panSensitivity: 0, // 骞崇Щ
center: [0, 0, 0],
- alpha: 70, // 鍊炬枩瑙掑害
+ alpha: 30, // 鍊炬枩瑙掑害
animationDurationUpdate: 1000, // 杩囨浮鍔ㄧ敾鐨勬椂闀�
animationEasingUpdate: 'cubicInOut' // 杩囨浮鍔ㄧ敾鐨勭紦鍔ㄦ晥鏋�
},
@@ -197,11 +251,11 @@
name: name,
type: 'map3D',
map: name,
- boxWidth: 100,
- regionHeight: 2,
+ boxWidth: 80,
+ regionHeight: 0.5,
left: '-5%',
top: '5%',
- zlevel: 10,
+ zlevel: 5,
// tooltip: {
// show: true,
@@ -238,7 +292,7 @@
zoomSensitivity: 0, // 缂╂斁
panSensitivity: 0, // 骞崇Щ
center: [0, 0, 0],
- alpha: 70 // 鍊炬枩瑙掑害
+ alpha: 30 // 鍊炬枩瑙掑害
}
},
{
@@ -250,41 +304,18 @@
silent: true,
itemStyle: {
- color: '#fc840e',
+ color: function (param) {
+ if (param.data.platformOnline) {
+ return '#04CD44';
+ } else {
+ return '#FF0756';
+ }
+ },
borderWidth: 1,
borderColor: '#fff'
},
- data: [
- {
- name: '鑷祦浜曞尯',
- value: [104.665471408, 29.23008885, 300]
- },
- {
- name: '楂樻柊鍖�',
- value: [104.805193, 29.3, 300]
- },
- {
- name: '澶у畨鍖�',
- value: [104.90805, 29.345946, 300]
- },
- {
- name: '娌挎哗鍖�',
- value: [104.80804, 29.200594, 300]
- },
- {
- name: '璐′簳鍖�',
- value: [104.579106, 29.241427, 300]
- },
- {
- name: '鑽ｅ幙',
- value: [104.3534, 29.3538, 300]
- },
- {
- name: '瀵岄『鍘�',
- value: [104.96, 29.08, 300]
- }
- ]
+ data: that.dotData
},
{
type: 'lines3D',
@@ -296,48 +327,48 @@
opacity: 1
},
data: [
- {
- coords: [
- [104.665471408, 29.23008885, 300],
- [104.6, 29.125, 430]
- ]
- },
- {
- coords: [
- [104.805193, 29.30148885792289, 300],
- [104.780237686031, 29.39548885792289, 430]
- ]
- },
- {
- coords: [
- [104.90805, 29.345946, 300],
- [105.056237686031, 29.33548885792289, 430]
- ]
- },
- {
- coords: [
- [104.80804, 29.200594, 300],
- [104.906237686031, 29.20048885792289, 430]
- ]
- },
- {
- coords: [
- [104.579106, 29.241427, 300],
- [104.486237686031, 29.19048885792289, 430]
- ]
- },
- {
- coords: [
- [104.3534, 29.3538, 300],
- [104.456237686031, 29.39048885792289, 430]
- ]
- },
- {
- coords: [
- [104.96, 29.08, 300],
- [105.05, 29.083, 430]
- ]
- }
+ // {
+ // coords: [
+ // [104.645471408, 29.150000, 300],
+ // [104.525471408, 28.960000, 430]
+ // ]
+ // },
+ // {
+ // coords: [
+ // [104.779193, 29.22148885792289, 300],
+ // [104.780237686031, 29.39548885792289, 430]
+ // ]
+ // },
+ // {
+ // coords: [
+ // [104.90805, 29.275946, 300],
+ // [105.106237686031, 29.22948885792289, 430]
+ // ]
+ // },
+ // {
+ // coords: [
+ // [104.78804, 29.130594, 300],
+ // [104.776237686031, 28.85048885792289, 430]
+ // ]
+ // },
+ // {
+ // coords: [
+ // [104.559106, 29.161427, 300],
+ // [104.356237686031, 29.00048885792289, 430]
+ // ]
+ // },
+ // {
+ // coords: [
+ // [104.3234, 29.2838, 300],
+ // [104.456237686031, 29.39048885792289, 430]
+ // ]
+ // },
+ // {
+ // coords: [
+ // [104.950000, 29.04, 300],
+ // [105.05, 28.983, 430]
+ // ]
+ // }
],
effect: {
show: true,
@@ -355,12 +386,12 @@
coordinateSystem: 'geo3D',
symbol: 'circle',
symbolSize: 0,
- data: that.data,
+ data: that.markData,
itemStyle: {
opacity: 1,
borderWidth: 1,
- borderColor: 'a4ddee'
+ borderColor: 'a4ddee',
},
label: {
@@ -404,6 +435,13 @@
this.updateChart();
},
deep: true
+ },
+ platformData: {
+ handler(newValue) {
+ this.updateMapData(newValue);
+ this.updateChart();
+ },
+ deep: true
}
},
}
--
Gitblit v1.8.0