敬请各位大神看看这是怎么回事？百度热力图

qq_18835365 2018-07-31 05:14:11

功能需求：选择csv格式的热力图数据文件，将热力图显示在地图上，采用winform实现，目前程序设计是采用webbroser，嵌套自己设计的htm文件，现在已经能从前台读取csv文件，且基本可以在地图上显示出来，但是存在几个小问题：
1.点击“生成热力图”之后，热力图不能马上出现，必须鼠标左键拖动地图一下才能出来；
2.热力图出来之后鼠标滚轮不能滚动，必须点地图左上角标尺之后才能实现滚轮缩放；
3.生成的热力图总是红红一片，不能随着地图级别缩放和热力值大小渐变。
请各位大神帮忙看看是怎么回事？

C#代码：

string jsstring = JsonConvert.SerializeObject(arrayA);

                    webBrowser1.Document.InvokeScript("showheatmap", new string[] { jsstring });

htm代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

    <title>热力图</title>

    <style type="text/css">

        ul, li

        {

            list-style: none;

            margin: 0;

            padding: 0;

            float: left;

        }

        html

        {

            height: 100%;

        }

        body

        {

            height: 100%;

            margin: 0px;

            padding: 0px;

            font-family: "微软雅黑";

        }

        #container

        {

            height: 100%;

            width: 100%;

        }

        #r-result

        {

            width: 100%;

        }

    </style>

</head>

<body>

    <div id="container">

    </div>

</body>

</html>

<script type="text/javascript">

    var map = new BMap.Map("container");          // 创建地图实例

    var point = new BMap.Point(108.93, 34.27);

    map.centerAndZoom(point, 5);             // 初始化地图，设置中心点坐标和地图级别

    map.enableScrollWheelZoom(); // 允许滚轮缩放

	map.addControl(new BMap.NavigationControl());

    map.addControl(new BMap.ScaleControl());

    map.addControl(new BMap.OverviewMapControl());

    var opts = { offset: new BMap.Size(50, 5) };

    map.addControl(new BMap.MapTypeControl(opts));

    map.setCurrentCity("西安");

    if (!isSupportCanvas()) {

        alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')

    }

    //判断浏览区是否支持canvas

    function isSupportCanvas() {

        var elem = document.createElement('canvas');

        return !!(elem.getContext && elem.getContext('2d'));

    }

    function showheatmap(heatmapdata) {

        var jsdata = JSON.parse(heatmapdata);

        var point = new BMap.Point(jsdata[jsdata.length - 3], jsdata[jsdata.length - 2]);

        map.centerAndZoom(point, jsdata[jsdata.length - 1]); 

        var len = jsdata.length;

        var points = new Array(len / 3-1);

        if (len >= 1) {

            for (var i = 0; i < len-3; i = i + 3) {

                points.push({

                    lng: jsdata[i],

                    lat: jsdata[i + 1],

                    count: jsdata[i + 2]

                });

            }

        }

        heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 3 });

        map.addOverlay(heatmapOverlay);

        heatmapOverlay.setDataSet({ data: points, max: 3000 });

        heatmapOverlay.show();

    }

</script>

...全文

235 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_18835365 2018-08-02

打赏
举报

引用 1 楼 caozhy 的回复:

https://www.codeproject.com/articles/88956/gheat-net

版主，帮忙给解决一下问题吧，帮助帮助新人吧

qq_18835365 2018-08-02

打赏
举报

问题3目前已经发现了问题，但是不知道怎么解决。
问题是points数组的动态赋值问题，如果将数据写死成如下就可以：
points =[
{"lng":100.19,"lat":25.65,"count":38},
{"lng":100.19,"lat":25.66,"count":726},
{"lng":100.24,"lat":25.54,"count":3},
{"lng":121.1,"lat":31.3,"count":25},
{"lng":121.11,"lat":31.3,"count":7}];

qq_18835365 2018-08-01