简介：热力图采用PostGis数据库存储地图和人流点数据，通过Geoserver服务发布，前端采用OpenLayers引入并展现完成。
##开发流程图
详细说明
Postgis数据准备
the_geom用于存储坐标信息
企业客户地图：
- WGS84
- Postgis 文件
- monitor库
人流定位数据：
- 存入Postgis，坐标系：
EPSG:4326 该表只存储5分钟内的定位数据，每5分钟刷新一次，并删除之前5分钟的数据
- 一个企业客户占一个表，一个表里含有多个楼层
- monitor库
表示例：
| id |
province_id |
city_id |
enterprise |
building |
floor |
the_geom |
postion_time |
| 1 |
116 |
11602 |
zhongshanyiyuan |
ZS1 |
F1 |
0101000020E6100000000000C0E9D369410000000028F75141 |
2016-08-08 10:00:00 |
AP点位数据
存入Postgis，坐标系：EPSG:4326
表示例：
|ft_id|by|fl_id|ft_name_cn|ft_name_en|ft_type|py_type|c_time|u_time|u_flag|the_geom|
|—|
||| ZH0000110100100001| XH1-B1-AP-001||||||| 0101000020E61000001C29C7744A655E405CC51EBF08794340|
新建Geoserver图层
发布WMS服务 style sld
发布地图
)
发布AP点位
)
发布人流热图
)
热图样式设置
一 环境部署
正常部署geoserver，本次版本是2.6
下载地址：http://geoserver.org/release/stable/
另外要下载
Extensions的wps扩展插件。
解压wps，将jar包放进geoserver部署的web-INF/lib中，重启geoserver。
二 生成热力图的样式文件heatmap.sld
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <?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>
<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>style中发布这样的一个sld文件。
Openlayers装载图层
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| var baseServer = "http://geoserver地址/geoserver/gcks/wms";
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: 'EPSG:900913',
center: [13541202.790897895,4709549.109971935],
zoom: 19
})
});
var layer1 = new ol.layer.Image({
visible: true,
source: new ol.source.ImageWMS({
ratio: 1,
url: baseServer,
serverType: "geoserver",
params: {
FORMAT: 'image/png',
VERSION: '1.1.0',
LAYERS: 'gcks:mod_heatmap_5mins',
STYLES: ''
}
})
});
var layer2 = new ol.layer.Image({
visible: true,
source: new ol.source.ImageWMS({
ratio: 1,
url: baseServer,
serverType: "geoserver",
params: {
FORMAT: 'image/png',
VERSION: '1.1.0',
LAYERS: 'gcks:fl_info_1',
STYLES: ''
}
})
});
map.addLayer(layer1);
map.addLayer(layer2);
|
最终展示效果：
)