From 307b17ef15c73a071912a262834f2a5f68e1fa87 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 11 九月 2025 15:20:35 +0800
Subject: [PATCH] 完成走航季度报告自动生成
---
src/utils/chart/chart-map.js | 112 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 76 insertions(+), 36 deletions(-)
diff --git a/src/utils/chart/chart-map.js b/src/utils/chart/chart-map.js
index cb40c75..0918317 100644
--- a/src/utils/chart/chart-map.js
+++ b/src/utils/chart/chart-map.js
@@ -2,6 +2,12 @@
// import * as shanghaiMap from 'echarts-china-cities-js/echarts-china-cities-js/shanghai.js'; // 淇鍦板浘鏁版嵁鏂囦欢璺緞
// import 'echarts-china-cities-js/echarts-china-cities-js/shanghai.js'; // 淇鍦板浘鏁版嵁鏂囦欢璺緞
import { shanghai, jingan } from '@/utils/chart/shanghai.js'; // 纭繚璺緞姝ｇ‘
+import calculate from '@/utils/map/calculate.js';
+
+// 鍋忕Щ绾害锛屽搴旂害100绫�
+const OFFSET_LAT = 0.00082;
+// 鍋忕Щ绾害锛屽搴旂害100绫�
+const OFFSET_LNG = 0.0009;
/**
* 璁＄畻鍦板浘涓績鐐瑰拰缂╂斁姣斾緥
@@ -9,40 +15,47 @@
* @returns
*/
function calCenterPointAndZoom(gridData) {
- let centerLng = 0;
- let centerLat = 0;
+ const coordinates = [];
let maxLng = -180;
let minLng = 180;
let maxLat = -90;
let minLat = 90;
- let zoom = 100;
+ let zoom = 1;
gridData.forEach((g) => {
- centerLng += g.centerLng;
- centerLat += g.centerLat;
- maxLng = Math.max(maxLng, g.centerLng);
- minLng = Math.min(minLng, g.centerLng);
- maxLat = Math.max(maxLat, g.centerLat);
- minLat = Math.min(minLat, g.centerLat);
+ g.coordinates.forEach((coordArr) => {
+ coordinates.push({
+ lng: coordArr[0],
+ lat: coordArr[1]
+ });
+ maxLng = Math.max(maxLng, coordArr[0]);
+ minLng = Math.min(minLng, coordArr[0]);
+ maxLat = Math.max(maxLat, coordArr[1]);
+ minLat = Math.min(minLat, coordArr[1]);
+ });
});
- if (gridData.length > 0) {
- centerLng /= gridData.length;
- centerLat /= gridData.length;
- }
- console.log((maxLng - centerLng) / zoom);
+ console.log('zoom', zoom);
return {
- centerLng,
- centerLat,
- zoom
+ centerLng: (maxLng + minLng) / 2,
+ centerLat: (maxLat + minLat) / 2,
+ zoom,
+ bounds: [
+ minLng - OFFSET_LNG,
+ minLat - OFFSET_LAT,
+ maxLng + OFFSET_LNG,
+ maxLat + OFFSET_LAT
+ ]
};
}
function generateGridMap(gridData) {
+ const width = 800;
+ const height = 400;
// 1. 鍒涘缓涓存椂DOM鍏冪礌
const div = document.createElement('div');
- div.style.width = '800px';
- div.style.height = '400px';
+ div.style.width = `${width}px`;
+ div.style.height = `${height}px`;
document.body.appendChild(div);
// 娉ㄥ唽涓婃捣甯傚湴鍥炬暟鎹�
// console.log(shanghaiMap);
@@ -57,7 +70,8 @@
value: [grid.centerLng, grid.centerLat, grid.value], // 涓績鐐圭粡绾害鍜屾暟鍊�
coords: grid.coordinates // 缃戞牸鍥涜缁忕含搴﹀潗鏍囨暟缁� [[lng1,lat1], [lng2,lat2], ...]
}));
- const { centerLng, centerLat, zoom } = calCenterPointAndZoom(gridData);
+ const { centerLng, centerLat, zoom, bounds } =
+ calCenterPointAndZoom(gridData);
// 2. 閰嶇疆椤�
const option = {
@@ -72,18 +86,6 @@
label: { show: true }, // 鏄剧ず鍦板悕鏍囩
itemStyle: { areaColor: '#ddddddff', borderColor: '#999' }
},
- // series: [
- // {
- // type: 'scatter',
- // coordinateSystem: 'geo',
- // data: [
- // {
- // name: '榛勬郸鍖�',
- // value: [121.490317, 31.222771, 100] // 涓績鐐瑰潗鏍�+鏁板��
- // }
- // ]
- // }
- // ]
series: [
{
type: 'custom',
@@ -112,11 +114,49 @@
};
chart.setOption(option);
+
+ // 灏嗙粡绾害杞崲涓哄儚绱犲潗鏍�
+ const convert = (lng, lat) => {
+ return chart.convertToPixel(
+ {
+ geoIndex: 0
+ },
+ [lng, lat]
+ );
+ };
+
+ // 璁＄畻鐢诲竷鐨勫乏涓婅鍜屽彸涓嬭瀵瑰簲鐨勭粡绾害
+ // 璁＄畻缃戞牸鍖哄煙鐨勫乏涓婅鍜屽彸涓嬭缁忕含搴﹀搴旂殑鍍忕礌鍧愭爣
+ const topLeft = convert(bounds[0], bounds[3]);
+ const bottomRight = convert(bounds[2], bounds[1]);
+ // 璁＄畻鍚堥�傜殑缂╂斁鍊嶆暟
+ const scale = Math.min(
+ Math.abs(width / (bottomRight[0] - topLeft[0])),
+ Math.abs(height / (bottomRight[1] - topLeft[1]))
+ );
+ console.log('scale', scale);
+
+ // 鍦板浘缂╂斁姣斾緥
+ chart.setOption({
+ geo: {
+ zoom: scale
+ }
+ });
+
// 3. 瀵煎嚭涓哄浘鐗囷紙杩斿洖base64锛�
- return chart.getDataURL({
- type: 'png',
- pixelRatio: 1,
- backgroundColor: '#ddddddff'
+ return new Promise((resolve, reject) => {
+ // 寤惰繜鎵ц纭繚缁樺埗瀹屾垚
+ setTimeout(() => {
+ const url = chart.getDataURL({
+ type: 'png',
+ pixelRatio: 2,
+ backgroundColor: '#fff'
+ });
+ // 閿�姣佸疄渚嬪苟绉婚櫎涓存椂DOM
+ chart.dispose();
+ document.body.removeChild(div);
+ resolve(url);
+ }, 1000);
});
}
--
Gitblit v1.9.3