GeoServer发布Heatmap

转自原文 GeoServer发布Heatmap

百度等热力图是使用开源的heatmap.js做的，但是这种解决方案的缺陷是：

1 数据量大的话，从前端通过后台查询比较费时，比如arcserver默认设置返回1000条查询记录，3000条就很卡了，对动辄上万多数据可行性不高。

2 前端对大数据添加渲染压力也大。

如果所有的数据在服务端生成渲染图片输出到前端，这两个问题都迎刃而解。

本文便阐述如何使用geoserer在服务端生成热力图，返回前端地图显示。

一  环境部署

正常部署geoserver，本次版本是2.6

下载地址：http://geoserver.org/release/stable/

另外要下载

Extensions的wps扩展插件。

解压wps，将jar包放进geoserver部署的web-INF/lib中，重启geoserver。

二 生成热力图的样式文件heatmap.sld

    <?xml version="1.0" encoding="ISO-8859-1"?>  
       <StyledLayerDescriptor version="1.0.0"  
           xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"  
           xmlns="http://www.opengis.net/sld"  
           xmlns:ogc="http://www.opengis.net/ogc"  
           xmlns:xlink="http://www.w3.org/1999/xlink"  
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">  
         <NamedLayer>  
           <Name>Heatmap</Name>  
           <UserStyle>  
             <Title>Heatmap</Title>  
             <Abstract>A heatmap surface showing population density</Abstract>  
             <FeatureTypeStyle>  
               <Transformation>  
                 <ogc:Function name="gs:Heatmap">  
                   <ogc:Function name="parameter">  
                     <ogc:Literal>data</ogc:Literal>  
                   </ogc:Function>  
                   <ogc:Function name="parameter">  
                     <ogc:Literal>weightAttr</ogc:Literal>  
                     <ogc:Literal>jan_je</ogc:Literal>  
                   </ogc:Function>  
                   <ogc:Function name="parameter">  
                     <ogc:Literal>radiusPixels</ogc:Literal>  
                     <ogc:Function name="env">  
                       <ogc:Literal>radius</ogc:Literal>  
                       <ogc:Literal>100</ogc:Literal>  
                     </ogc:Function>  
                   </ogc:Function>  
                   <ogc:Function name="parameter">  
                     <ogc:Literal>pixelsPerCell</ogc:Literal>  
                     <ogc:Literal>10</ogc:Literal>  
                   </ogc:Function>  
                   <ogc:Function name="parameter">  
                     <ogc:Literal>outputBBOX</ogc:Literal>  
                     <ogc:Function name="env">  
                       <ogc:Literal>wms_bbox</ogc:Literal>  
                     </ogc:Function>  
                   </ogc:Function>  
                   <ogc:Function name="parameter">  
                     <ogc:Literal>outputWidth</ogc:Literal>  
                     <ogc:Function name="env">  
                       <ogc:Literal>wms_width</ogc:Literal>  
                     </ogc:Function>  
                   </ogc:Function>  
                   <ogc:Function name="parameter">  
                     <ogc:Literal>outputHeight</ogc:Literal>  
                     <ogc:Function name="env">  
                       <ogc:Literal>wms_height</ogc:Literal>  
                     </ogc:Function>  
                   </ogc:Function>  
                 </ogc:Function>  
               </Transformation>  
              <Rule>  
                <RasterSymbolizer>  
                <!-- specify geometry attribute to pass validation -->  
                  <Geometry>  
                    <ogc:PropertyName>geom</ogc:PropertyName></Geometry>  
                  <Opacity>0.6</Opacity>  
                    <ColorMap type="ramp" >  
                    <ColorMapEntry color="#0000FF" quantity="0" label="nodata" opacity="0"/>  
                    <ColorMapEntry color="#00FFFF" quantity="0.02" label="nodata"  
                      opacity="0"/>  
                    <ColorMapEntry color="#00FF00" quantity=".1" label="nodata"/>  
                    <ColorMapEntry color="#FFFF00" quantity=".5" label="values" />  
                    <ColorMapEntry color="#FF0000" quantity="1.0" label="values" />  
                  </ColorMap>  
                </RasterSymbolizer>  
               </Rule>  
             </FeatureTypeStyle>  
           </UserStyle>  
         </NamedLayer>  
        </StyledLayerDescriptor>  

weightAttr标签指定权重字段，在这里我设置weightAttrz权重字段名称为jan_je。colormap中的热力图符号和范围设置，也是可以改和设置的。

而<ogc:PropertyName>geom</ogc:PropertyName></Geometry>这里是指定渲染的图形字段，查看数据库空间数据表的图形字段名称，如果是geom就写geom，如果是the_geom就写the_geom，根据自己数据库中图形字段名称来。在geoserver>styles中发布这样的一个sld文件。 

三 测试

3.1 使用geoserver发布一个点图层，加载sld

default style那设置发布的sld文件。

确定，发布。

3.2 openlayer加载wms点图层

    <?xml version="1.0" encoding="UTF-8"?>  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <title>热力图展示</title>  
    <!-- Import OL CSS, auto import does not work with our minified OL.js build -->  
    <!--<link rel="stylesheet" type="text/css" href="http://localhost:8090/geoserver/openlayers/theme/default/style.css"/>-->  
        <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">  
        <script src="openlayers/OpenLayers.js"></script>  
    <!-- Basic CSS definitions -->  
    <style type="text/css">  
        /* General settings */  
        body {  
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
            font-size: small;  
        }  
      
        /* The map and the location bar */  
        #map {  
            clear: both;  
            position: relative;  
            width: 1000px;  
            height: 600px;  
            border: 1px solid black;  
        }  
      
    </style>  
    <!-- Import OpenLayers, reduced, wms read only version -->  
    <!--<script src="http://localhost:8090/geoserver/openlayers/OpenLayers.js" type="text/javascript"></script>-->  
    <script defer="defer" type="text/javascript">  
    var map;  
    var untiled;  
      
      
    // pink tile avoidance  
    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;  
    // make OL compute scale according to WMS spec  
    OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;  
      
    function init(){  
        // if this is just a coverage or a group of them, disable a few items,  
        // and default to jpeg format  
        format = 'image/png';  
      
        var bounds = new OpenLayers.Bounds(  
                13218259.7875, 3713786.7208,  
                13355533.9608, 3805832.0664  
        );  
        var options = {  
            controls: [],  
            maxExtent: bounds,  
            maxResolution: 536.2272394531246,  
            projection: "EPSG:3857",  
            units: 'm'  
        };  
        map = new OpenLayers.Map('map', options);  
      
      
          
        // setup tiled layer  
        /* 
        tiled = new OpenLayers.Layer.WMS( 
                "cite:v_zhenjiang - Tiled", "http://localhost:8090/geoserver/cite/wms", 
                { 
                    "LAYERS": 'cite:v_zhenjiang', 
                    "STYLES": '', 
                    format: format 
                }, 
                { 
                    buffer: 0, 
                    displayOutsideMaxExtent: true, 
                    isBaseLayer: true, 
                    yx : {'EPSG:3857' : false} 
                } 
        );*/  
      
        // setup single tiled layer  
        untiled = new OpenLayers.Layer.WMS(  
                "cite:v_zhenjiang - Untiled", "http://localhost:8090/geoserver/cite/wms",  
                {  
                    "LAYERS": 'cite:v_zhenjiang',  
                    "transparent":"TRUE",  
                    "STYLES": '',  
                    format: format  
                },  
                {  
                    singleTile: true,  
                    ratio: 1,  
                    isBaseLayer: false,  
                    yx : {'EPSG:3857' : false}  
                }  
        );  
      
        var osmlayer = new OpenLayers.Layer.OSM( "osm");  
        map.addLayers([untiled,osmlayer]);  
        // build up all controls  
        map.addControl(new OpenLayers.Control.PanZoomBar({  
            position: new OpenLayers.Pixel(2, 15)  
        }));  
        map.addControl(new OpenLayers.Control.Navigation());  
        map.addControl(new OpenLayers.Control.MousePosition());  
        map.addControl(new OpenLayers.Control.LayerSwitcher());  
        map.zoomToExtent(bounds);  
        /*map.setCenter( 
                new OpenLayers.LonLat(119.45, 32.2).transform( 
                        new OpenLayers.Projection("EPSG:4326"), 
                        map.getProjectionObject() 
                ), 15 
        );*/  
      
    }  
      
    </script>  
    </head>  
    <body onload="init()">  
      
    <div id="map">  
      
    </div>  
    </body>  
    </html>  

四  效果图