import * as echarts from 'echarts';
|
// 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;
|
|
/**
|
* 计算地图中心点和缩放比例
|
* @param {*} gridData 网格数据
|
* @returns
|
*/
|
function calCenterPointAndZoom(gridData) {
|
const coordinates = [];
|
let maxLng = -180;
|
let minLng = 180;
|
let maxLat = -90;
|
let minLat = 90;
|
let zoom = 1;
|
gridData.forEach((g) => {
|
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]);
|
});
|
});
|
|
console.log('zoom', zoom);
|
|
return {
|
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 = `${width}px`;
|
div.style.height = `${height}px`;
|
document.body.appendChild(div);
|
// 注册上海市地图数据
|
// console.log(shanghaiMap);
|
|
// shanghaiMap(echarts);
|
echarts.registerMap('shanghai', { geoJSON: shanghai });
|
const chart = echarts.init(div);
|
|
// 1. 准备网格数据（转换为ECharts多边形格式）
|
const gridPolygons = gridData.map((grid, index) => ({
|
name: `grid_${index}`,
|
value: [grid.centerLng, grid.centerLat, grid.value], // 中心点经纬度和数值
|
coords: grid.coordinates // 网格四角经纬度坐标数组 [[lng1,lat1], [lng2,lat2], ...]
|
}));
|
const { centerLng, centerLat, zoom, bounds } =
|
calCenterPointAndZoom(gridData);
|
|
// 2. 配置项
|
const option = {
|
// title: {
|
// text: 'Travel Routes'
|
// },
|
geo: {
|
map: 'shanghai', // 基础地图
|
center: [centerLng, centerLat],
|
roam: true, // 禁止缩放平移
|
zoom: zoom, // 地图缩放比例
|
label: { show: true }, // 显示地名标签
|
itemStyle: { areaColor: '#ddddddff', borderColor: '#999' }
|
},
|
series: [
|
{
|
type: 'custom',
|
coordinateSystem: 'geo',
|
renderItem: (params, api) => {
|
// 将经纬度转换为屏幕坐标
|
const grid = gridPolygons[params.dataIndex];
|
// const v = api.value(0);
|
const points = grid.coords.map((coord) => api.coord(coord));
|
// const points = grid.coords;
|
return {
|
type: 'polygon',
|
transition: ['shape'],
|
shape: { points },
|
style: api.style({
|
fill: grid.value[2],
|
stroke: 'white',
|
lineWidth: 1
|
})
|
};
|
},
|
data: gridPolygons,
|
label: { show: false }
|
}
|
]
|
};
|
|
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 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);
|
});
|
}
|
|
export default { generateGridMap };
|
