import * as echarts from 'echarts';
|
import 'echarts-extension-amap';
|
|
/**
|
* 计算地图中心点和缩放比例
|
* @param {*} gridData 网格数据
|
* @returns
|
*/
|
function calCenterPointAndZoom(gridData) {
|
let centerLng = 0;
|
let centerLat = 0;
|
let maxLng = -180;
|
let minLng = 180;
|
let maxLat = -90;
|
let minLat = 90;
|
let zoom = 10;
|
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);
|
});
|
if (gridData.length > 0) {
|
centerLng /= gridData.length;
|
centerLat /= gridData.length;
|
}
|
|
return {
|
centerLng,
|
centerLat,
|
zoom
|
};
|
}
|
|
function generateGridMap(gridData) {
|
// 1. 创建临时DOM元素
|
const div = document.createElement('div');
|
div.style.width = '800px';
|
div.style.height = '400px';
|
document.body.appendChild(div);
|
// 注册上海市地图数据
|
// console.log(shanghaiMap);
|
|
// shanghaiMap(echarts);
|
const chart = echarts.init(div);
|
|
chart.on('amaproam', function (e) {
|
console.log(e);
|
});
|
|
// // get AMap extension component
|
// var amapComponent = chart.getModel().getComponent('amap');
|
// // get the instance of AMap
|
// var amap = amapComponent.getAMap();
|
// // add some controls provided by AMap.
|
// amap.addControl(new AMap.Scale());
|
// amap.addControl(new AMap.ToolBar());
|
// // add SatelliteLayer and RoadNetLayer to map
|
// // var satelliteLayer = new AMap.TileLayer.Satellite();
|
// // var roadNetLayer = new AMap.TileLayer.RoadNet();
|
// // amap.add([satelliteLayer, roadNetLayer]);
|
// // Add a marker to map
|
// amap.add(
|
// new AMap.Marker({
|
// position: [110, 35]
|
// })
|
// );
|
|
// 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 } = calCenterPointAndZoom(gridData);
|
|
// 2. 配置项
|
const option = {
|
title: {
|
text: 'Travel Routes'
|
},
|
// amap component option
|
amap: {
|
// enable 3D mode
|
viewMode: '3D',
|
// initial options of AMap
|
// See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
|
// initial map center [lng, lat]
|
center: [centerLng, centerLat],
|
// initial map zoom
|
zoom: zoom,
|
// whether the map and echarts automatically handles browser window resize to update itself.
|
resizeEnable: true,
|
// customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
|
mapStyle: 'amap://styles/dark',
|
// whether echarts layer should be rendered when the map is moving. Default is true.
|
// if false, it will only be re-rendered after the map `moveend`.
|
// It's better to set this option to false if data is large.
|
renderOnMoving: false,
|
// the zIndex of echarts layer for AMap, default value is 2000.
|
// deprecated since v1.9.0, use `echartsLayerInteractive` instead.
|
// echartsLayerZIndex: 2019,
|
// whether echarts layer is interactive. Default value is true
|
// supported since v1.9.0
|
echartsLayerInteractive: true,
|
// whether to enable large mode. Default value is false
|
// supported since v1.9.0
|
largeMode: false,
|
// whether to return map camera state in `amaproam` event.
|
// supported since v1.10.0
|
returnMapCameraState: true
|
// Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
|
// There are some bugs about it, we can use `amap.add` instead.
|
// Refer to the codes at the bottom.
|
|
// More initial options...
|
},
|
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: grid.value[2],
|
lineWidth: 2
|
})
|
};
|
},
|
data: gridPolygons,
|
label: { show: false }
|
}
|
]
|
};
|
|
chart.setOption(option);
|
// 3. 导出为图片（返回base64）
|
return new Promise((resolve, reject) => {
|
setTimeout(() => {
|
const url = chart.getDataURL({
|
type: 'png',
|
pixelRatio: 1,
|
backgroundColor: '#fff'
|
});
|
resolve(url);
|
}, 3000);
|
});
|
}
|
|
export default { generateGridMap };
|
