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>  

四  效果图