利用高德地图api的svgmarker组件绘制柱状图
本文介绍如何在高德地图上利用SvgMarker组件实现柱状图效果。 通过自定义SVG图形，开发者可以在地图上创建更直观、更具视觉冲击力的数据可视化效果。
核心方案是利用SvgMarker组件的自定义绘制能力。不同于直接在地图上绘制，SvgMarker允许使用SVG格式定义复杂图形，从而实现更丰富的视觉效果。
关键代码片段如下：
AMapUI.loadUI(['overlay/SvgMarker'], (SvgMarker) => {
if (!SvgMarker.supportSvg) {
alert('当前浏览器不支持SVG');
return;
}
const data = [
{
height: 60, width: 20, fillColor: 'red', id: '1',
position: [121.47567708984376, 31.22694067865231],
title: "上石化边界卫六路站1"
},
{
height: 80, width: 20, fillColor: 'green', id: '2',
position: [121.48567708984376, 31.22694067865231],
title: "上石化边界卫六路站2"
}
];
data.forEach(item => {
const svgMarker = new SvgMarker({
zIndex: 120,
position: item.position,
content: `<svg width="${item.width}" height="${item.height + 100}">
<rect width="${item.width}" height="${item.height}" fill="${item.fillColor}" />
</svg>`,
label: {
content: item.title,
offset: [0, -item.height - 10]
}
});
map.add(svgMarker);
});
});
这段代码首先加载SvgMarker组件，并检查浏览器是否支持SVG。然后，它使用一个数据数组，每个对象代表一个柱状图的柱子，包含高度、宽度、颜色、位置和标题信息。 代码循环遍历数据数组，为每个数据项创建一个SvgMarker实例，并使用SVG代码动态生成柱状图的矩形。 label 属性用于显示柱状图的标题，offset 属性调整标题位置。 最后，将创建的SvgMarker添加到地图上。 通过调整height、width 和 fillColor 属性，可以控制柱子的高度、宽度和颜色，从而实现自定义的柱状图效果。 zIndex 属性确保柱状图正确显示在其他地图元素之上。
