From b87b2befa85bd085f40dc5aa7ea9bfbc17d807e5 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期五, 10 一月 2025 17:15:02 +0800 Subject: [PATCH] 1. 调整了网格内文本的展示方式和样式; 2. 省去了单个网格4个顶点坐标的计算逻辑,交由后端完成; --- src/utils/map/grid.js | 119 +++++++++++++++++++++++++++++++++++------------------------ 1 files changed, 71 insertions(+), 48 deletions(-) diff --git a/src/utils/map/grid.js b/src/utils/map/grid.js index df44cf7..7f37bf6 100644 --- a/src/utils/map/grid.js +++ b/src/utils/map/grid.js @@ -84,28 +84,43 @@ * 鏂囨湰鏍囪 * 鍙慨鏀筽osition */ -function textMaker(position, text) { +function textMaker(position, text, anchor, type) { + let style = {}; + if (type == 'data') { + style = { + 'font-size': '12px', + 'text-align': 'center', + color: 'white', + background: '#122b54a9', + 'text-shadow': 'black 2px 2px 2px', + border: '0px', + 'margin-top': '4px' + }; + } else if (type == 'rank') { + style = { + 'font-size': '14px', + 'text-align': 'center', + color: 'white', + background: 'transparent', + 'text-shadow': 'black 2px 2px 2px', + 'border-radius': '2px', + border: '1px solid #122b54a9', + 'margin-bottom': '4px' + }; + } // eslint-disable-next-line no-undef return new AMap.Text({ text: text, + anchor, position: position, - style: { - 'font-size': '13px', - 'text-align': 'center', - color: 'white', - 'background-color': 'transparent', - 'text-shadow': 'black 2px 2px 2px', - 'border-radius': '2px', - border: '0px', - padding: '4px' - } + style: style }); } /** * 娴烽噺鏂囨湰鏍囨敞 */ -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 +139,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 +218,7 @@ return gridViews; }, - drawGridText(points, textViews) { + drawGridText(points, textViews, anchor, type) { if (textViews) { points.forEach((p, i) => { textViews[i].setPosition(p.lnglat_GD); @@ -212,11 +228,11 @@ } else { const _textViews = []; points.forEach((p) => { - const m = textMaker(p.lnglat_GD, p.data); + const m = textMaker(p.lnglat_GD, p.data, anchor, type); _textViews.push(m); }); map.add(_textViews); - return _textViews; + return { textViews: _textViews }; } }, @@ -241,9 +257,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 +264,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 +284,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