From 1c31659852f8360cc0fdfac26aff51e54b8b8b67 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 27 十二月 2024 17:21:58 +0800
Subject: [PATCH] 添加排名展示；优化展示方式
---
src/utils/map/index_old.js | 5 +-
src/views/satellitetelemetry/SatelliteTelemetry.vue | 13 ++++--
src/components/animation/SatelliteAnimation.vue | 6 ++
src/views/satellitetelemetry/SatelliteTelemetry copy.vue | 4 +
src/utils/map/grid.js | 74 +++++++++++++++++++++++++++++++++++++
src/utils/map/3dLayer.js | 2
src/views/satellitetelemetry/SatelliteProxy.js | 8 ++--
7 files changed, 98 insertions(+), 14 deletions(-)
diff --git a/src/components/animation/SatelliteAnimation.vue b/src/components/animation/SatelliteAnimation.vue
index b3cfaaf..bc0845f 100644
--- a/src/components/animation/SatelliteAnimation.vue
+++ b/src/components/animation/SatelliteAnimation.vue
@@ -100,11 +100,15 @@
const d = data[index];
// SatelliteProxy.clearText(mapViews);
// eslint-disable-next-line vue/no-mutating-props
- that.mapViews.textViews = SatelliteProxy.drawDataText(
+ const { textViews, labelsLayer } = SatelliteProxy.drawDataText(
that.mapViews.points,
d,
that.mapViews.textViews
);
+ // eslint-disable-next-line vue/no-mutating-props
+ that.mapViews.textViews = textViews;
+ // eslint-disable-next-line vue/no-mutating-props
+ that.mapViews.labelsLayer = labelsLayer;
SatelliteProxy.drawColor(that.mapViews.gridViews, d);
}
);
diff --git a/src/utils/map/3dLayer.js b/src/utils/map/3dLayer.js
index 419dd98..d68337c 100644
--- a/src/utils/map/3dLayer.js
+++ b/src/utils/map/3dLayer.js
@@ -30,7 +30,7 @@
const fDatas = _factorDatas;
const factor = _factor;
drawMesh(fDatas, factor);
- // console.log(map.getZoom());
+ console.log(map.getZoom());
}
var _maxHeight = 1000,
diff --git a/src/utils/map/grid.js b/src/utils/map/grid.js
index bb3807f..df44cf7 100644
--- a/src/utils/map/grid.js
+++ b/src/utils/map/grid.js
@@ -102,6 +102,42 @@
});
}
+/**
+ * 娴烽噺鏂囨湰鏍囨敞
+ */
+function textLabelMarker(position, text, direction) {
+ // eslint-disable-next-line no-undef
+ return new AMap.LabelMarker({
+ position: position,
+ zooms: [10, 20],
+ opacity: 1,
+ zIndex: 2,
+ // icon: {
+ // image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png',
+ // anchor: 'bottom-center',
+ // size: [25, 34],
+ // clipOrigin: [459, 92],
+ // clipSize: [50, 68]
+ // },
+ text: {
+ // 娉ㄦ剰鍐呭鏍煎紡蹇呴』鏄痵tring
+ content: text ? text + '' : '',
+ direction: direction ? direction : 'center',
+ style: {
+ fontSize: 12,
+ fillColor: '#fff',
+ // strokeColor: 'rgba(0, 0, 0, 0.5)',
+ // strokeWidth: 3,
+ backgroundColor: '#122b54a9'
+ // padding: [3, 10],
+ // backgroundColor: 'yellow',
+ // borderColor: '#ccc',
+ // borderWidth: 3
+ }
+ }
+ });
+}
+
export default {
parseGridPoint,
@@ -184,6 +220,44 @@
}
},
+ drawGridTextLabel(points, textViews, labelsLayer, direction) {
+ if (textViews) {
+ points.forEach((p, i) => {
+ textViews[i].setPosition(p.lnglat_GD);
+ textViews[i].setText({
+ content: p.data ? p.data + '' : ''
+ });
+ });
+ return { textViews, labelsLayer };
+ } else {
+ // 鍒涘缓涓�涓� LabelsLayer 瀹炰緥鏉ユ壙杞� LabelMarker锛孾LabelsLayer 鏂囨。](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
+ // eslint-disable-next-line no-undef
+ const labelsLayer = new AMap.LabelsLayer({
+ zooms: [12, 20],
+ zIndex: 1000,
+ // 寮�鍚爣娉ㄩ伩璁╋紝榛樿涓哄紑鍚紝v1.4.15 鏂板灞炴��
+ collision: false,
+ // 寮�鍚爣娉ㄦ贰鍏ュ姩鐢伙紝榛樿涓哄紑鍚紝v1.4.15 鏂板灞炴��
+ animation: false
+ });
+ const _textViews = [];
+ // const m = textLabelMarker([121.329723, 31.240625], 25);
+ // _textViews.push(m);
+ // labelsLayer.add(m);
+ points.forEach((p) => {
+ const m = textLabelMarker(p.lnglat_GD, p.data, direction);
+ _textViews.push(m);
+ // 灏� LabelMarker 瀹炰緥娣诲姞鍒� LabelsLayer 涓�
+ labelsLayer.add(m);
+ });
+ map.add(labelsLayer);
+ map.on('zoomend', () => {
+ console.log(map.getZoom());
+ });
+ return { textViews: _textViews, labelsLayer };
+ }
+ },
+
drawGridColor(gridViews, texts, factorName) {
// new Promise((resolve, reject) => {
// gridViews.forEach((g, i) => {
diff --git a/src/utils/map/index_old.js b/src/utils/map/index_old.js
index eb73075..8085547 100644
--- a/src/utils/map/index_old.js
+++ b/src/utils/map/index_old.js
@@ -72,8 +72,9 @@
function _initControlbar() {
controlbar = new AMap.ControlBar({
position: {
- right: '300px',
- top: '260px'
+ right: '10px',
+ // top: '260px',
+ bottom: '0px'
}
});
map.addControl(controlbar);
diff --git a/src/views/satellitetelemetry/SatelliteProxy.js b/src/views/satellitetelemetry/SatelliteProxy.js
index 9472516..bc6be57 100644
--- a/src/views/satellitetelemetry/SatelliteProxy.js
+++ b/src/views/satellitetelemetry/SatelliteProxy.js
@@ -31,25 +31,25 @@
}
// 缁樺埗鐩戞祴鏁版嵁鍊�
-function drawDataText(points, gridData, textViews) {
+function drawDataText(points, gridData, textViews, labelsLayer) {
const data = gridData.map((v, i) => {
return {
lnglat_GD: points[i],
data: v.pm25
};
});
- return gridMapUtil.drawGridText(data, textViews);
+ return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
}
// 缁樺埗鐩戞祴鏁版嵁鎺掑悕鏂囨湰
-function drawRankText(points, gridData) {
+function drawRankText(points, gridData, textViews, labelsLayer) {
const data = gridData.map((v, i) => {
return {
lnglat_GD: points[i],
data: v.rank
};
});
- return gridMapUtil.drawGridText(data);
+ return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
}
// 缁樺埗鐩戞祴鏁版嵁鍊煎搴旂綉鏍奸鑹�
diff --git a/src/views/satellitetelemetry/SatelliteTelemetry copy.vue b/src/views/satellitetelemetry/SatelliteTelemetry copy.vue
index 77117f5..2c516aa 100644
--- a/src/views/satellitetelemetry/SatelliteTelemetry copy.vue
+++ b/src/views/satellitetelemetry/SatelliteTelemetry copy.vue
@@ -115,11 +115,13 @@
function drawTextAndColor(gridData) {
// SatelliteProxy.clearText(mapViews);
// 鏂囨湰鏍囪
- mapViews.textViews = SatelliteProxy.drawDataText(
+ const { textViews, labelsLayer } = SatelliteProxy.drawDataText(
mapViews.points,
gridData,
mapViews.textViews
);
+ mapViews.textViews = textViews;
+ mapViews.labelsLayer = labelsLayer;
SatelliteProxy.drawColor(mapViews.gridViews, gridData);
}
diff --git a/src/views/satellitetelemetry/SatelliteTelemetry.vue b/src/views/satellitetelemetry/SatelliteTelemetry.vue
index 82cfe88..6b37603 100644
--- a/src/views/satellitetelemetry/SatelliteTelemetry.vue
+++ b/src/views/satellitetelemetry/SatelliteTelemetry.vue
@@ -94,11 +94,14 @@
function drawTextAndColor(gridData) {
// SatelliteProxy.clearText(mapViews);
// 鏂囨湰鏍囪
- mapViews.textViews = SatelliteProxy.drawDataText(
- mapViews.points,
- gridData,
- mapViews.textViews
- );
+ const { textViews: dataTxt, labelsLayer: dataLayer } =
+ SatelliteProxy.drawDataText(mapViews.points, gridData, mapViews.dataTxt);
+ mapViews.dataTxt = dataTxt;
+ mapViews.dataLayer = dataLayer;
+ const { textViews: rankTxt, labelsLayer: rankLayer } =
+ SatelliteProxy.drawRankText(mapViews.points, gridData, mapViews.rankTxt);
+ mapViews.rankTxt = rankTxt;
+ mapViews.rankLayer = rankLayer;
SatelliteProxy.drawColor(mapViews.gridViews, gridData);
}
--
Gitblit v1.9.3