From 2592dc279ec82bf3649a4dbe644c6416263a10ef Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 07 三月 2025 17:10:25 +0800
Subject: [PATCH] 各模块功能新增
---
src/utils/map/grid.js | 287 ++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 200 insertions(+), 87 deletions(-)
diff --git a/src/utils/map/grid.js b/src/utils/map/grid.js
index 2a45509..cbd6e1c 100644
--- a/src/utils/map/grid.js
+++ b/src/utils/map/grid.js
@@ -84,28 +84,46 @@
* 鏂囨湰鏍囪
* 鍙慨鏀筽osition
*/
-function textMaker(position, text) {
+function textMaker({ position, text, anchor, type, color }) {
+ let style = {};
+ if (type == 'data') {
+ style = {
+ 'font-size': '12px',
+ 'text-align': 'center',
+ 'font-weight': 600,
+ color: color ? color : 'white',
+ background: '#122b54a9',
+ // background: 'white',
+ 'text-shadow': 'black 1px 1px 1px',
+ border: '0px',
+ 'margin-top': '4px'
+ };
+ } else if (type == 'rank') {
+ style = {
+ 'font-size': '14px',
+ 'text-align': 'center',
+ color: color ? color : 'white',
+ background: 'transparent',
+ 'text-shadow': 'black 2px 2px 2px',
+ 'border-radius': '2px',
+ border: '1px solid #122b54a9',
+ // border: '1px solid rgba(255, 255, 255, 0.62)',
+ '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,18 +142,73 @@
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
}
}
});
+}
+
+/**
+ * 璁＄畻姣忎釜缃戞牸棰滆壊
+ */
+function calGridColor({ factorName, data, isCustomColor }) {
+ let _colorList = [];
+ if (isCustomColor) {
+ var max, min;
+ data.forEach((t) => {
+ if (!t) return;
+ if (!max || t > max) {
+ max = t;
+ }
+ if (!min || t < min) {
+ min = t;
+ }
+ });
+ data.forEach((d) => {
+ if (d) {
+ // 鏍规嵁閬ユ祴鏁版嵁璁＄畻缃戞牸棰滆壊
+ const { color, nextColor, range, nextRange } =
+ Legend.getCustomColorAndNext(d, min, max);
+ const ratio = (d - range) / (nextRange - range);
+
+ const _color = getColorBetweenTwoColors(
+ color.map((v) => v * 255),
+ nextColor.map((v) => v * 255),
+ ratio
+ );
+ _colorList.push(_color);
+ } else {
+ _colorList.push(undefined);
+ }
+ });
+ } else {
+ data.forEach((d) => {
+ if (d) {
+ // 鏍规嵁閬ユ祴鏁版嵁璁＄畻缃戞牸棰滆壊
+ const { color, nextColor, range, nextRange } =
+ Legend.getStandardColorAndNext(factorName, d);
+ const ratio = (d - range) / (nextRange - range);
+ const _color = getColorBetweenTwoColors(
+ color.map((v) => v * 255),
+ nextColor.map((v) => v * 255),
+ ratio
+ );
+ _colorList.push(_color);
+ } else {
+ _colorList.push(undefined);
+ }
+ });
+ }
+ return _colorList;
}
export default {
@@ -177,47 +250,60 @@
/**
* 缁樺埗涓�缁勫杈瑰舰
- * @param {*} points
+ * @param {Array} points 缃戞牸鍧愭爣鐐规暟缁�
+ * @param {Boolean} draw 鏄惁鍒涘缓瀹屾垚鍚庡悓鏃剁粯鍒�
*/
- drawPolylines(points) {
+ drawPolylines({ points, draw, event }) {
const gridViews = [];
points.forEach((p) => {
- let path = p.map((v) => {
- // eslint-disable-next-line no-undef
- return new AMap.LngLat(v[0], v[1]);
- });
//鍒涘缓澶氳竟褰� Polygon 瀹炰緥
// eslint-disable-next-line no-undef
var polygon = new AMap.Polygon({
- path: path, //璺緞
+ path: p.path, //璺緞
fillColor: '#fff', //澶氳竟褰㈠～鍏呴鑹�
strokeWeight: 1, //绾挎潯瀹藉害锛岄粯璁や负 2
strokeColor: 'white', //绾挎潯棰滆壊
- fillOpacity: 0
+ fillOpacity: 0,
+ extData: p.extData
});
+
+ if (typeof event === 'function') {
+ event(polygon);
+ }
gridViews.push(polygon);
});
- map.add(gridViews);
- map.setFitView(gridViews);
+ if (draw) {
+ map.add(gridViews);
+ map.setFitView(gridViews);
+ }
return gridViews;
},
- drawGridText(points, textViews) {
- if (textViews) {
- points.forEach((p, i) => {
- textViews[i].setPosition(p.lnglat_GD);
- textViews[i].setText(p.data);
+ drawGridText({ points, textViews, anchor, type, isCustomColor, useColor }) {
+ let colorList = [];
+ if (useColor) {
+ colorList = calGridColor({
+ factorName: 'PM25',
+ data: points.map((p) => p.data),
+ isCustomColor: isCustomColor
});
- return textViews;
- } else {
- const _textViews = [];
- points.forEach((p) => {
- const m = textMaker(p.lnglat_GD, p.data);
- _textViews.push(m);
- });
- map.add(_textViews);
- return _textViews;
}
+ if (textViews) {
+ map.remove(textViews);
+ }
+ const _textViews = [];
+ points.forEach((p, i) => {
+ const m = textMaker({
+ position: p.lnglat_GD,
+ text: p.data,
+ anchor,
+ type,
+ color: useColor ? colorList[i] : 'white'
+ });
+ _textViews.push(m);
+ });
+ // map.add(_textViews);
+ return { textViews: _textViews };
},
drawGridTextLabel(points, textViews, labelsLayer, direction) {
@@ -241,9 +327,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,57 +334,87 @@
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) {
- 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
- );
- g.setOptions({
- fillColor: _color,
- fillOpacity: color[3] == 0 ? 0 : 0.7
- });
+ /**
+ * 鏍规嵁閬ユ祴鏁版嵁锛岃缃搴旂綉鏍肩殑鏍囧噯鑹诧紝杩斿洖鏈夋暟鎹殑缃戞牸
+ * @param {Array} gridViews 缃戞牸澶氳竟褰㈠璞℃暟缁�
+ * @param {Array} gridDataDetail 鍗槦閬ユ祴鏁版嵁鏁扮粍
+ * @param {string} factorName 鐩戞祴鍥犲瓙鍚嶇О
+ * @param {number} opacity 閫忔槑搴�
+ */
+ drawGridColor(gridViews, gridDataDetail, factorName, opacity, zIndex) {
+ const res = [];
+ // 閬嶅巻鍗槦閬ユ祴鏁版嵁鏁扮粍
+ gridDataDetail.forEach((d, i) => {
+ if (d.pm25) {
+ const grid = gridViews[i];
+
+ // 鏍规嵁閬ユ祴鏁版嵁璁＄畻缃戞牸棰滆壊
+ const data = d.pm25;
+ 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
+ );
+ grid.setOptions({
+ zIndex: zIndex ? zIndex : 10,
+ fillColor: _color,
+ fillOpacity: opacity ? opacity : color[3] == 0 ? 0 : 0.7
+ });
+
+ res.push(grid);
+ }
});
+
+ return res;
},
- drawGridColorCustom(gridViews, texts) {
- var max,min
- texts.forEach(t => {
- if (!max || t > max) {
- max = t
+ drawGridColorCustom(gridViews, gridDataDetail, opacity) {
+ var max, min;
+ gridDataDetail.forEach((t) => {
+ if (!t.pm25) return;
+ if (!max || t.pm25 > max) {
+ max = t.pm25;
}
- if (!min || t < min) {
- min = t
+ if (!min || t.pm25 < min) {
+ min = t.pm25;
}
});
- 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
- });
+ const res = [];
+ // 閬嶅巻鍗槦閬ユ祴鏁版嵁鏁扮粍
+ gridDataDetail.forEach((d, i) => {
+ if (d.pm25) {
+ const grid = gridViews[i];
+
+ // 鏍规嵁閬ユ祴鏁版嵁璁＄畻缃戞牸棰滆壊
+ const data = d.pm25;
+ 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
+ );
+ grid.setOptions({
+ fillColor: _color,
+ fillOpacity: opacity ? opacity : color[3] == 0 ? 0 : 0.7
+ });
+
+ res.push(grid);
+ }
});
- },
+
+ return res;
+ }
};
--
Gitblit v1.9.3