一、背景
項目需要熱力圖的效果,對比了各種結合cesium生成的熱力圖效果和數據量大的局限性,決定采用切片加載的方式加載熱力圖,原因如下:
1.數據量大的話,從前端通過后台查詢比較費時,3000條就很卡了,對動輒上萬多數據可行性不高。
2.前端對大數據添加渲染壓力也大
如果所有的數據在服務端生成渲染圖片輸出到前端,這兩個問題都迎刃而解。
3.Geoserver可以將矢量圖層,發布成柵格圖層,通過設置sld(geoserver的樣式文件),能夠將圖層顯示成熱力圖的效果
想要這種效果
二、步驟
sld設置參考網址為:docs.geoserver.org/latest/en/u…
首先要有一個具有 權重的矢量圖層,根據矢量圖層中的字段,確定熱力圖的影響范圍,后邊主要內容就是設置sld的樣式,參考網址上有一個sld的樣式,下邊列舉一下關鍵參數:
<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="vec:Heatmap">
<ogc:Function name="parameter">
<ogc:Literal>data</ogc:Literal>
</ogc:Function>
<ogc:Function name="parameter">
<ogc:Literal>weightAttr</ogc:Literal>
<ogc:Literal>value</ogc:Literal>
</ogc:Function>
<ogc:Function name="parameter">
<ogc:Literal>radiusPixels</ogc:Literal>
<ogc:Function name="env">
<ogc:Literal>radius</ogc:Literal>
<ogc:Literal>10</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>the_geom</ogc:PropertyName></Geometry>
<Opacity>0.6</Opacity>
<ColorMap type="ramp" >
<ColorMapEntry color="#FFFFFF" quantity="0" label="nodata"
opacity="0"/>
<ColorMapEntry color="#FFFFFF" quantity="0.02" label="nodata"
opacity="0"/>
<ColorMapEntry color="#4444FF" quantity=".1" label="nodata"/>
<ColorMapEntry color="#FF0000" quantity=".5" label="values" />
<ColorMapEntry color="#FFFF00" quantity="1.0" label="values" />
</ColorMap>
</RasterSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
SLD 的主要方面是:
第 14-15 行定義了渲染轉換,使用過程vec:Heatmap.
第 16-18 行提供輸入數據參數,data在此過程中命名。
第 19-22 行為過程weightAttr參數提供了一個值,該值指定為每個數據點提供權重的輸入屬性。
第 23-29 行提供了radiusPixels參數值,它控制着熱圖在每個點周圍的“傳播”。在此 SLD 中,此參數的值可由名為 的 SLD 替換變量提供,radius默認值為100像素。
第 30-33 行提供pixelsPerCell參數,該參數控制計算熱圖柵格的分辨率。
第 34-38 行提供了outputBBOX參數,該參數給出了標准 SLD 環境變量的值wms_bbox。
第 40-45 行提供了outputWidth參數,該參數給出了標准 SLD 環境變量的值wms_width。
第 46-52 行提供了outputHeight參數,該參數給出了標准 SLD 環境變量的值wms_height。
第 55-70 行指定 aRasterSymbolizer來設置計算柵格表面的樣式。符號包含數據范圍 [0..1] 的漸變顏色圖。
第 58 行指定輸入要素類型的幾何屬性,這是通過 SLD 驗證所必需的
三、結果
四、出現的問題
1.關於熱力圖周邊透明色和數據區域內0值的顏色區分,我想要的效果是只在我的數據區域內0值顏色是深藍色,數據范圍之外是透明色,不然已加載整個地球都是深藍色,不好看
解決思路一:修改數據區域的范圍,沒找到解決方式
解決思路二:把數據區域的0值用數據庫批量改為0.1,容易實現,暫用這種方式
各位有更好的思路請留言或者私信我交流
步驟1:將數據庫數據0值批量改為0.1
步驟2:修改樣式,將0值透明度設置為0,0.1值的范圍設置為深藍色
最終的樣式sld如下:
<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>dc_heat</Name>
<UserStyle>
<Title>dc_heat</Title>
<Abstract>A heatmap </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>value1</ogc:Literal>
</ogc:Function>
<ogc:Function name="parameter">
<ogc:Literal>radiusPixels</ogc:Literal>
<ogc:Function name="env">
<ogc:Literal>radius</ogc:Literal>
<ogc:Literal>2</ogc:Literal>
</ogc:Function>
</ogc:Function>
<ogc:Function name="parameter">
<ogc:Literal>pixelsPerCell</ogc:Literal>
<ogc:Literal>20</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>the_geom</ogc:PropertyName>
</Geometry>
<Opacity>1</Opacity>
<ColorMap type="ramp" >
<ColorMapEntry color="#0055ff" quantity="0" label="0000FF" opacity="0"/>
<ColorMapEntry color="#0028ff" quantity="0.0001" label="00ffff" />
<ColorMapEntry color="#6fc8dc" quantity="0.1" label="6fc8dc" />
<ColorMapEntry color="#00ffb2" quantity="0.3" label="00ff00" />
<ColorMapEntry color="#ffff00" quantity="0.4" label="ffff00" />
<ColorMapEntry color="#ff9900" quantity="0.7" label="ff9900" />
<ColorMapEntry color="#ff0000" quantity="1" label="ff0000" />
</ColorMap>
</RasterSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
2.生成的熱力圖放大之后數據變成格子了,不好看 ,加上三維模型沒有想要的效果
將樣式文件中的
<ogc:Literal>pixelsPerCell</ogc:Literal> <ogc:Literal>20</ogc:Literal>
放大之后整體樣式就不好看了,一坨
怎么辦塞??????
3.Qgis可以生成熱力圖效果,但是不支持導出sld文件,阿歐!
參考:www.freesion.com/article/244…
大家也可以關注我的csdn博客,地址