Echart 热力图基于百度地图

最新推荐文章于 2024-08-08 11:50:46 发布

原创最新推荐文章于 2024-08-08 11:50:46 发布 · 863 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #javascript

地图专栏收录该内容

3 篇文章

订阅专栏

该博客展示了如何在HTML页面中结合ECharts库和百度地图API创建热力图。通过引入多个ECharts相关JS文件，以及加载地图和数据，实现了地图上的热力图渲染。数据来源于'datalz.json'，并设置了地图的中心位置、缩放级别和交互功能。热力图的视觉效果由visualMap组件控制，提供了不同颜色的范围表示数据的强度。

1.html 页面

<div style="height: 868px;width:1350px" id="map_canvas"></div>

2.映入js文件

<script src="${ctxPath}/static/echart/ec/echarts.min.js"></script>
<script src="${ctxPath}/static/echart/ec/echarts-gl.min.js"></script>
<script src="${ctxPath}/static/echart/ec/ecStat.min.js"></script>
<script src="${ctxPath}/static/echart/ec/dataTool.min.js"></script>
<script src="${ctxPath}/static/echart/ec/china.js"></script>
<script src="${ctxPath}/static/echart/ec/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度地图申请的AK"></script>
<script src="${ctxPath}/static/echart/ec/bmap.min.js"></script>
<script src="${ctxPath}/static/echart/js/echarts-demo.js"></script>

3.echart js文件

$(function () {

    var app = {};
    var chartDom = document.getElementById('map_canvas');
    var myChart = echarts.init(chartDom);
    var option;

    $.get(Feng.ctxPath +'/static/datalz.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: [103.823112, 36.065931],
                    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());
        }
    },"json");
    if (option && typeof option === "object") {
        myChart.setOption(option);
    }
    $(window).resize(myChart.resize);
});