方案背景
????今年三月份寫了一篇postgis計(jì)算矢量切片镜豹，參考了網(wǎng)上資料給出了一份很粗糙的相關(guān)方案(文章寫的更粗糙)瘦赫。當(dāng)時(shí)的方案中只能針對(duì)gis形狀進(jìn)行渲染，而不能用屬性渲染.針對(duì)這個(gè)情況灶泵，本文進(jìn)行相對(duì)應(yīng)的修改硬猫。
前期準(zhǔn)備
????軟件是用的是Qgis和Postgis(Postgis版本為2.42 ,Postgresql版本為10.0)补箍。qgis使用Ramdom points in extent 用來生成測(cè)試數(shù)據(jù)，數(shù)據(jù)范圍參數(shù)使用
120.6327590942379970,120.8625335693359943,31.2309341430663991,31.4467678070068004（xmin,xmax,ymin,ymax）,數(shù)據(jù)量設(shè)置為十萬(wàn)啸蜜。生成好數(shù)據(jù)坑雅，再建好索引,添加字段v,根據(jù)奇偶性給字段賦值。
后臺(tái)梳理
????先看了ST_AsMVT和ST_AsMVTGeom幫助文檔衬横，一頭霧水.使用谷歌大法裹粤，發(fā)現(xiàn)了這個(gè)資料參考資料
只要通過上圖的方式就能查詢到我想要的帶屬性值的矢量切片，代碼如下蜂林。只要先輸入需要查找的范圍遥诉，用ST_AsMVTGeom查詢出范圍內(nèi)矢量并轉(zhuǎn)換成屏幕坐標(biāo)，最后用ST_AsMVT壓縮數(shù)據(jù)成mvt格式悉尾，和之前文章有所不同的是突那，查詢過程中加入了屬性的查詢，壓縮之后矢量切片就會(huì)帶上我們想要的屬性值（w.v就是我們想要的屬性值）
SELECT ST_AsMVT(tile,'points',4096,'geom') tile FROM (SELECT w.v,ST_AsMVTGeom(w.the_geom,Box2D(ST_MakeEnvelope(119.531250,30.751278,120.937500,31.952162, 4326)),4096, 0, true) AS geom FROM pnt w) AS tile where tile.geom is not null
????做完這些我們只要用后臺(tái)語(yǔ)言寫一個(gè)服務(wù),將前臺(tái)請(qǐng)求的切片坐標(biāo)z/x/y這些轉(zhuǎn)換成經(jīng)緯度得到最大最小經(jīng)緯度构眯，放到前面提到的sql中去查詢就可以愕难。
前臺(tái)展示
????前臺(tái)展示還是選用mapbox,添加自定義矢量切片數(shù)據(jù)源，修改下按值渲染顏色
map.addLayer({
"id": "custom-go-vector-tile-layer",
"type": "circle",
"source": "custom-go-vector-tile-source",
"source-layer": "points",
paint: {
'circle-radius': {
stops: [
[8, 0.1], [11, 0.5],[15, 3],[20, 60]
]
},
'circle-color': {
property: 'v',
stops: [
[0, '#990055'],
[1, '#2a55b9']
]
},
'circle-opacity': 1
}
});
顯示效果如下
性能對(duì)比
????一百萬(wàn)數(shù)據(jù)惫霸，頁(yè)面加載結(jié)束5s;十萬(wàn)數(shù)據(jù)猫缭，頁(yè)面加載結(jié)束1.86s.同樣數(shù)據(jù)，百萬(wàn)數(shù)據(jù)壹店，geoserver的(openlayer)頁(yè)面加載結(jié)束20.20s;十萬(wàn)數(shù)據(jù)時(shí)猜丹，geoserver的的(openlayer)頁(yè)面加載結(jié)束4.32s</br>
