Openlayer结合heatmap热力图的实现_heatmap.js 结合openlayers-优快云博客

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>heatmap.js OpenLayers Heatmap Layer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body, html {
            margin:0;
            padding:0;
            font-family:Arial;
        }
        #heatmapArea {
            position:relative;
            float:left;
            width:800px;
            height:600px;
            border:1px dashed black;
        }
    </style>
    <link rel="shortcut icon" type="image/png" href="http://www.patrick-wied.at/img/favicon.png" />


</head>
<body onload="init()">

    <div id="heatmapArea">

    </div>
    
<script type="text/javascript" src="js/gis/lib/OpenLayers.js"></script>
<script type="text/javascript" src="js/gis/lib/Heatmap-Openlayers/heatmap.js"></script>
<script type="text/javascript" src="js/gis/lib/Heatmap-Openlayers/heatmap-openlayers.js"></script>
<script type="text/javascript">
    var map, layer, heatmap;
    function init(){

        var testData={
            max: 46,
            data: [{lat: 33.5363, lon:-117.044, count: 1},{lat: 33.5608, lon:-117.24, count: 1}]
        };

        var transformedTestData = { max: testData.max , data: [] },
                data = testData.data,
                datalen = data.length,
                nudata = [];

        // in order to use the OpenLayers Heatmap Layer we have to transform our data into
        // { max: <max>, data: [{lonlat: <OpenLayers.LonLat>, count: <count>},...]}

        while(datalen--){
            nudata.push({
                lonlat: new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat),
                count: data[datalen].count
            });
        }

        transformedTestData.data = nudata;

        map = new OpenLayers.Map( 'heatmapArea');
        layer = new OpenLayers.Layer.OSM();

        // create our heatmap layer
        heatmap = new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, layer, {visible: true, radius:10}, {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
        map.addLayers([layer, heatmap]);

        map.zoomToMaxExtent();
        map.zoomIn();
        heatmap.setDataSet(transformedTestData);
    }
</script>
</html>

具体代码例子详情请见：https://github.com/followwwind/gis