echart 热力图与百度地图 结合后 坐标偏移

马学兵 发布于 2016/06/03 08:10
阅读 1K+
收藏 0

Echarts中的热力图在与百度地图匹配成功之后,热力图层总是偏移,开始以为是坐标数据自动生成的原因,但是试了试真实的坐标发现还是原来的样子,望大家讨论一下,帮忙看看问题在哪?


加载中
0
马学兵
马学兵

代码如下:

<script type="text/javascript">
    // 路径配置
    (function () {
        require.config({
            paths: {
                echarts: 'echarts/build/dist'
            },
            packages: [
            {
                name: 'BMap',
                location: 'echarts/extension/BMap/src',
                main: 'main'
            }
        ]
        });


        require(
    [
        'echarts',
        'BMap',
        'echarts/chart/map'
    ],
    function (echarts, BMapExtension) {
        var BMapExt = new BMapExtension($('#main')[0], BMap, echarts, { enableMapClick: false });
        var map = BMapExt.getMap();
        var container = BMapExt.getEchartsContainer();
        var startPoint = { x: 116.4551, y: 40.2539 };
        var point = new BMap.Point(startPoint.x, startPoint.y);
        map.centerAndZoom(point, 5);
        map.enableScrollWheelZoom(true);




        //        var stCtrl = new BMap.PanoramaControl(); //构造全景控件
        //        stCtrl.setOffset(new BMap.Size(20, 20));
        //        map.addControl(stCtrl); //添加全景控件
        //        map.addControl(new BMap.MapTypeControl()); //添加地图类别
        var heatData = [];
        for (var i = 0; i < 200; ++i) {
            heatData.push([
                        116.4551 + Math.random() * 20,
                        40.2539 + Math.random() * 16,
                        Math.random()
                    ]);
        }




        option = {


            title: {
                text: '热力图结合地图',
                x: 'center',
                textStyle: {
                    color: 'white'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                        {
                            name: '北京',
                            type: 'map',
                            mapType: 'none',
                            roam: true,
                            hoverable: false,
                            data: [],
                            heatmap: {
                                minAlpha: 0.1,
                                data: heatData
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(100,149,237,0.6)',
                                    borderWidth: 0.5,
                                    areaStyle: {
                                        color: '#1b1b1b'
                                    }
                                }
                            }
                        }
                    ]
        };
















        var myChart = BMapExt.initECharts(container);
        window.onresize = myChart.onresize;


        BMapExt.setOption(option);
    }
            );
    })();
 


</script>

0
马学兵
马学兵

还发现一个问题,鼠标滑动之后涂层自己就偏移了,跟百度地图完全不匹配


0
乾坤摄
乾坤摄
百度有个mapv的东西,这东西才能和地图整合
返回顶部
顶部