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 | 48 ++++++++++++++++++++++++------------------------ 1 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/utils/map/grid.js b/src/utils/map/grid.js index 2a45509..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,9 +250,9 @@ labelsLayer.add(m); }); map.add(labelsLayer); - map.on('zoomend', () => { - console.log(map.getZoom()); - }); + // map.on('zoomend', () => { + // console.log(map.getZoom()); + // }); return { textViews: _textViews, labelsLayer }; } }, @@ -277,13 +276,14 @@ }, drawGridColorCustom(gridViews, texts) { - var max,min - texts.forEach(t => { + var max, min; + texts.forEach((t) => { + if (!t) return; if (!max || t > max) { - max = t + max = t; } if (!min || t < min) { - min = t + min = t; } }); gridViews.forEach((g, i) => { @@ -291,7 +291,7 @@ 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), @@ -303,5 +303,5 @@ fillOpacity: color[3] == 0 ? 0 : 0.7 }); }); - }, + } }; -- Gitblit v1.9.3