zl程序教程

您现在的位置是:首页 >  其他

当前栏目

115Echarts - 热力图(Heatmap on Baidu Map Extension)

OnMap Extension baidu 力图
2023-09-11 14:15:43 时间

效果图

在这里插入图片描述

源代码

app.title = '热力图与百度地图扩展';

$.get('data/asset/data/hangzhou-tracks.json', function (data) {

    var points = [].concat.apply([], data.map(function (track) {
        return track.map(function (seg) {
            return seg.coord.concat([1]);
        });
    }));
    myChart.setOption(option = {
        animation: false,
        bmap: {
            center: [120.13066322374, 30.240018034923],
            zoom: 14,
            roam: true
        },
        visualMap: {
            show: false,
            top: 'top',
            min: 0,
            max: 5,
            seriesIndex: 0,
            calculable: true,
            inRange: {
                color: ['blue', 'blue', 'green', 'yellow', 'red']
            }
        },
        series: [{
            type: 'heatmap',
            coordinateSystem: 'bmap',
            data: points,
            pointSize: 5,
            blurSize: 6
        }]
    });
    if (!app.inNode) {
        // 添加百度地图插件
        var bmap = myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl());
    }
});