From 68ba3376731aa7a5760ba5fce1dc6ba0c80982b4 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 03 一月 2025 17:28:18 +0800
Subject: [PATCH] 调整网格文本样式
---
src/utils/map/grid.js | 87 ++++++++++++++++++++++++-------------------
1 files changed, 48 insertions(+), 39 deletions(-)
diff --git a/src/utils/map/grid.js b/src/utils/map/grid.js
index df44cf7..f421dae 100644
--- a/src/utils/map/grid.js
+++ b/src/utils/map/grid.js
@@ -84,10 +84,11 @@
* 鏂囨湰鏍囪
* 鍙慨鏀筽osition
*/
-function textMaker(position, text) {
+function textMaker(position, text, anchor) {
// eslint-disable-next-line no-undef
return new AMap.Text({
text: text,
+ anchor,
position: position,
style: {
'font-size': '13px',
@@ -96,7 +97,7 @@
'background-color': 'transparent',
'text-shadow': 'black 2px 2px 2px',
'border-radius': '2px',
- border: '0px',
+ border: '1px',
padding: '4px'
}
});
@@ -105,7 +106,7 @@
/**
* 娴烽噺鏂囨湰鏍囨敞
*/
-function textLabelMarker(position, text, direction) {
+function textLabelMarker(position, text, direction, style) {
// eslint-disable-next-line no-undef
return new AMap.LabelMarker({
position: position,
@@ -124,15 +125,16 @@
content: text ? text + '' : '',
direction: direction ? direction : 'center',
style: {
+ 'border-radius': '.25rem',
fontSize: 12,
fillColor: '#fff',
- // strokeColor: 'rgba(0, 0, 0, 0.5)',
- // strokeWidth: 3,
- backgroundColor: '#122b54a9'
- // padding: [3, 10],
+ strokeColor: 'rgba(0, 0, 0, 1)',
+ strokeWidth: 4,
+ // backgroundColor: '#122b54a9',
+ padding: [3, 10],
// backgroundColor: 'yellow',
- // borderColor: '#ccc',
- // borderWidth: 3
+ borderColor: '#ccc',
+ borderWidth: 30
}
}
});
@@ -202,7 +204,7 @@
return gridViews;
},
- drawGridText(points, textViews) {
+ drawGridText(points, textViews, anchor) {
if (textViews) {
points.forEach((p, i) => {
textViews[i].setPosition(p.lnglat_GD);
@@ -212,11 +214,11 @@
} else {
const _textViews = [];
points.forEach((p) => {
- const m = textMaker(p.lnglat_GD, p.data);
+ const m = textMaker(p.lnglat_GD, p.data, anchor);
_textViews.push(m);
});
map.add(_textViews);
- return _textViews;
+ return { textViews: _textViews };
}
},
@@ -241,9 +243,6 @@
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);
@@ -251,34 +250,14 @@
labelsLayer.add(m);
});
map.add(labelsLayer);
- map.on('zoomend', () => {
- console.log(map.getZoom());
- });
+ // map.on('zoomend', () => {
+ // console.log(map.getZoom());
+ // });
return { textViews: _textViews, labelsLayer };
}
},
drawGridColor(gridViews, texts, factorName) {
- // new Promise((resolve, reject) => {
- // gridViews.forEach((g, i) => {
- // const data = parseFloat(texts[i]);
- // const { color, nextColor, range, nextRange } =
- // Legend.getStandardColorAndNext(factorName, data);
- // const ratio = (data - range) / (nextRange - range);
- // const _color = getColorBetweenTwoColors(
- // color.map((v) => v * 255),
- // nextColor.map((v) => v * 255),
- // ratio
- // );
- // resolve({ g, _color, color });
- // });
- // }).then((res) => {
- // const { g, _color, color } = res;
- // g.setOptions({
- // fillColor: _color,
- // fillOpacity: color[3]
- // });
- // });
gridViews.forEach((g, i) => {
const data = parseFloat(texts[i]);
const { color, nextColor, range, nextRange } =
@@ -291,7 +270,37 @@
);
g.setOptions({
fillColor: _color,
- fillOpacity: color[3]
+ fillOpacity: color[3] == 0 ? 0 : 0.7
+ });
+ });
+ },
+
+ drawGridColorCustom(gridViews, texts) {
+ var max, min;
+ texts.forEach((t) => {
+ if (!t) return;
+ if (!max || t > max) {
+ max = t;
+ }
+ if (!min || t < min) {
+ min = t;
+ }
+ });
+ gridViews.forEach((g, i) => {
+ const data = parseFloat(texts[i]);
+ const { color, nextColor, range, nextRange } =
+ Legend.getCustomColorAndNext(data, min, max);
+ const ratio = (data - range) / (nextRange - range);
+
+ const _color = getColorBetweenTwoColors(
+ color.map((v) => v * 255),
+ nextColor.map((v) => v * 255),
+ ratio
+ );
+ g.setOptions({
+ fillColor: _color,
+ // fillOpacity: color[3]
+ fillOpacity: color[3] == 0 ? 0 : 0.7
});
});
}
--
Gitblit v1.9.3