From 68ba3376731aa7a5760ba5fce1dc6ba0c80982b4 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 03 一月 2025 17:28:18 +0800
Subject: [PATCH] 调整网格文本样式
---
src/model/Legend.js | 24 ++-----
src/views/satellitetelemetry/SatelliteTelemetry.vue | 65 +++++++++++----------
src/api/index.js | 2
src/utils/map/grid.js | 48 ++++++++--------
src/views/satellitetelemetry/SatelliteProxy.js | 14 ++--
5 files changed, 76 insertions(+), 77 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index 9443b4c..e90dd06 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -10,7 +10,7 @@
}
if (debug) {
- ip1 = 'http://localhost:8084/';
+ ip1 = 'http://192.168.0.138:8084/';
}
const $http = axios.create({
diff --git a/src/model/Legend.js b/src/model/Legend.js
index e92ebd1..9d852d1 100644
--- a/src/model/Legend.js
+++ b/src/model/Legend.js
@@ -309,24 +309,16 @@
};
}
- // if (data == min) {
- // console.log(data);
- // }
-
- var per = (max - min) / this._custom.length;
+ // 灏嗘暟鎹寜鐓ч鑹叉暟閲忓垎闅旓紝姹傚嚭姣忎竴娈电殑鏁版嵁鍋忕Щ閲�
+ var per = (max - min) / (this._custom.length - 1);
+ // 璁＄畻褰撳墠鏁版嵁鎵�鍦ㄧ殑鍒嗘鑼冨洿
var i = parseInt((data - min) / per);
- var range = min + i * per
- if (i >= this._custom.length - 1) {
- i = this._custom.length - 2;
- range = min + i * per
- }
+ // 濡傛灉鏄渶澶у�硷紝鍚屾牱鍒嗗壊鍒版渶鍚庝竴娈�
+ if (i == this._custom.length - 1) i--;
+ var range = min + i * per;
let nextIndex = i + 1;
- let nextRange = min + nextIndex * per
- if (nextIndex > this._custom.length - 1) {
- nextIndex = this._custom.length - 1;
- nextRange = min + nextIndex * per
- }
+ let nextRange = min + nextIndex * per;
return {
color: this._custom[i],
@@ -334,7 +326,7 @@
range,
nextRange
};
- },
+ }
};
export { Legend };
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
});
});
- },
+ }
};
diff --git a/src/views/satellitetelemetry/SatelliteProxy.js b/src/views/satellitetelemetry/SatelliteProxy.js
index 34657a1..1b36366 100644
--- a/src/views/satellitetelemetry/SatelliteProxy.js
+++ b/src/views/satellitetelemetry/SatelliteProxy.js
@@ -23,8 +23,8 @@
function drawPolyline(gridInfo) {
// 缁樺埗缃戞牸
const points = gridInfo.map((v) => {
- // return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
- return [v.longitude, v.latitude]
+ return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
+ // return [v.longitude, v.latitude]
});
const gridPoints = gridMapUtil.parseGridPoint(points);
const gridViews = gridMapUtil.drawPolylines(gridPoints);
@@ -37,10 +37,11 @@
return {
lnglat_GD: points[i],
// data: v.pm25 ? (v.pm25 + '渭g/m鲁') : ''
- data: v.pm25 ? (v.pm25) : ''
+ data: v.pm25 ? v.pm25 : ''
};
});
- return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
+ // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
+ return gridMapUtil.drawGridText(data, textViews, 'top-center');
}
// 缁樺埗鐩戞祴鏁版嵁鎺掑悕鏂囨湰
@@ -49,10 +50,11 @@
return {
lnglat_GD: points[i],
// data: v.pm25 ? ('鎺掑悕: ' + v.rank) : ''
- data: v.pm25 ? (v.rank) : ''
+ data: v.pm25 ? v.rank : ''
};
});
- return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
+ // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
+ return gridMapUtil.drawGridText(data, textViews, 'bottom-center');
}
// 缁樺埗鐩戞祴鏁版嵁鍊煎搴旂綉鏍奸鑹�
diff --git a/src/views/satellitetelemetry/SatelliteTelemetry.vue b/src/views/satellitetelemetry/SatelliteTelemetry.vue
index fc74865..66ed9cc 100644
--- a/src/views/satellitetelemetry/SatelliteTelemetry.vue
+++ b/src/views/satellitetelemetry/SatelliteTelemetry.vue
@@ -50,32 +50,34 @@
import { useSatelliteGridStore } from '@/stores/satellite-grid';
// 鏌ヨ闀垮畞鍖鸿鏀垮尯鍒�
-onMapMounted(()=>{
- // eslint-disable-next-line no-undef
- var district = new AMap.DistrictSearch({
- extensions: "all", //杩斿洖琛屾斂鍖鸿竟鐣屽潗鏍囩瓑鍏蜂綋淇℃伅
- level: "district", //璁剧疆鏌ヨ琛屾斂鍖虹骇鍒负鍖�
- });
- district.search("闀垮畞鍖�", function (status, result) {
- var bounds = result.districtList[0].boundaries; //鑾峰彇鏈濋槼鍖虹殑杈圭晫淇℃伅
- if (bounds) {
- for (var i = 0; i < bounds.length; i++) {
- //鐢熸垚琛屾斂鍖哄垝 polygon
- // eslint-disable-next-line no-undef
- var polygon = new AMap.Polygon({
- map: map, //鏄剧ず璇ヨ鐩栫墿鐨勫湴鍥惧璞�
- strokeWeight: 3, //杞粨绾垮搴�
- path: bounds[i], //澶氳竟褰㈣疆寤撶嚎鐨勮妭鐐瑰潗鏍囨暟缁�
- fillOpacity: 0.1, //澶氳竟褰㈠～鍏呴�忔槑搴�
- fillColor: "#CCF3FF", //澶氳竟褰㈠～鍏呴鑹�
- // strokeColor: "#CC66CC", //绾挎潯棰滆壊
- strokeColor: "#0066ff", //绾挎潯棰滆壊
- });
+function initDistrict() {
+ onMapMounted(() => {
+ // eslint-disable-next-line no-undef
+ var district = new AMap.DistrictSearch({
+ extensions: 'all', //杩斿洖琛屾斂鍖鸿竟鐣屽潗鏍囩瓑鍏蜂綋淇℃伅
+ level: 'district' //璁剧疆鏌ヨ琛屾斂鍖虹骇鍒负鍖�
+ });
+ district.search('闀垮畞鍖�', function (status, result) {
+ var bounds = result.districtList[0].boundaries; //鑾峰彇鏈濋槼鍖虹殑杈圭晫淇℃伅
+ if (bounds) {
+ for (var i = 0; i < bounds.length; i++) {
+ //鐢熸垚琛屾斂鍖哄垝 polygon
+ // eslint-disable-next-line no-undef
+ var polygon = new AMap.Polygon({
+ map: map, //鏄剧ず璇ヨ鐩栫墿鐨勫湴鍥惧璞�
+ strokeWeight: 3, //杞粨绾垮搴�
+ path: bounds[i], //澶氳竟褰㈣疆寤撶嚎鐨勮妭鐐瑰潗鏍囨暟缁�
+ fillOpacity: 0.1, //澶氳竟褰㈠～鍏呴�忔槑搴�
+ fillColor: '#CCF3FF', //澶氳竟褰㈠～鍏呴鑹�
+ // strokeColor: '#ffffff' //绾挎潯棰滆壊
+ strokeColor: '#0077ff' //绾挎潯棰滆壊
+ });
+ }
+ map.setFitView(); //灏嗚鐩栫墿璋冩暣鍒板悎閫傝閲�
}
- map.setFitView(); //灏嗚鐩栫墿璋冩暣鍒板悎閫傝閲�
- }
+ });
});
-})
+}
const satelliteGridStore = useSatelliteGridStore();
const { loading, fetchData } = useFetchData(10000);
@@ -94,10 +96,11 @@
function onSearch(options) {
satelliteGridStore.fetchGridCell(options.id).then(() => {
drawGrid(satelliteGridStore.gridInfo);
+ initDistrict();
});
- satelliteGridStore.fetchGridData(options.id).then(()=>{
- max = satelliteGridStore.gridDataList.length
- fetchGridDataDetail(satelliteGridStore.gridDataList)
+ satelliteGridStore.fetchGridData(options.id).then(() => {
+ max = satelliteGridStore.gridDataList.length;
+ // fetchGridDataDetail(satelliteGridStore.gridDataList);
});
}
@@ -175,11 +178,13 @@
}
function handleRankClick(rankVisible) {
- rankVisible ? map.add(mapViews.rankLayer) : map.remove(mapViews.rankLayer);
+ // rankVisible ? map.add(mapViews.rankLayer) : map.remove(mapViews.rankLayer);
+ rankVisible ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt);
}
function handleDataClick(dataVisible) {
- dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer);
+ // dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer);
+ dataVisible ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt);
}
function handleColorClick(isStandardColor) {
@@ -203,7 +208,7 @@
bottom: 10px;
left: 0;
right: 0;
- color: #0066ff;
+ color: #0077ff;
}
.data-mix {
--
Gitblit v1.9.3