echarts 使用bmap绘制polygon多边形

效果预览

代码

echarts option配置中的series写法如下：

series:[
    {
        type: 'custom',
        coordinateSystem: 'bmap',
        renderItem: (params, api) => renderPolygon(params, api, gArea),
        data: gArea,
        seriesIndex: 1,
    },
    // 在面的中心展示文字
    // {
    //     type: 'effectScatter',
    //     coordinateSystem: 'bmap',
    //     data: gAreaText,
    //     symbolSize: 10,
    //     rippleEffect: {
    //         brushType: 'stroke'
    //     }
    // }
]

定义的变量和方法如下：

const points = [
    [120.27044133879757, 31.54860147094725],
    [120.27087049223995, 31.541198574066147],
    [120.28666333891964, 31.54160626983641],
    [120.28501109816646, 31.54909499740599],
    [120.27044133879757, 31.54860147094725]
]
const gArea = [
    {
        coords: points,
        style: {
            fill: 'rgba(210, 146, 82, 0.2)', // 多边形填充颜色
            stroke: 'rgba(210, 146, 82, 0.7)',
            lineWidth: 1
        }
    }
]
const gAreaText = [
    {
        name: '名称啊',
        value: calculateCenter(points), // 文本位置
        label: {
            show: true,
            formatter: '{b}', // 显示名称
            position: 'inside',
            color: 'rgba(210, 146, 82, 0.7)',
            fontSize: '16px'
        },
        itemStyle: {
            color: 'transparent' // 透明的点
        }
    }
]

const calculateCenter = (polygon) => {
    let center = [0, 0];
    for (let i = 0; i < polygon.length; i++) {
        center[0] += polygon[i][0];
        center[1] += polygon[i][1];
    }
    center[0] /= polygon.length;
    center[1] /= polygon.length;
    return center;
}

const renderPolygon = (params, api, gArea) => {
    const points = gArea[params.dataIndex]?.coords;
    return {
        type: 'polygon',
        shape: {
            points: points.map(function (point) {
                return api.coord(point);
            })
        },
        style: gArea[params.dataIndex]?.style,
    };
}