Openlayer结合heatmap热力图的实现

来源：互联网发布：王德民知乎编辑：程序博客网时间：2024/05/21 09:29

<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

阅读全文

0 0