leaflet結合PostGIS動態渲染矢量瓦片(附源碼下載)

前言

leaflet 入門開發系列環境知識點了解:html

內容概覽

leaflet結合PostGIS動態渲染矢量瓦片
源代碼demo下載前端

效果圖以下:
python

具體實現思路:
根據前端地圖請求的地圖當前級別以及行列號zxy(http://localhost:5000/tiles/quanguospot/spot/14/13345/7097),
後臺接口python根據前端地圖傳值過來的zxy,動態計算地圖當前級別z行列號對應的地圖範圍extent(lonmin,latmin,lonmax,latmax),而後結合postgis動態生成矢量瓦片返回前端地圖渲染可視化。canvas

postgis-stMvt

python 後臺鏈接postgis 返回矢量切片api

使用

  • 在tileOline.py中配置本身的postgis鏈接參數
Dbpool = psycopg2.pool.SimpleConnectionPool(

1, app

2000, svg

dbname='postgis_31_sample', 函數

user='postgres', post

host='localhost', ui

password='postgres',

port='5432')

  • 根據ZXY計算對應地圖範圍Extent
import math

 def tile2lat(ytile, zoom):

n = 2.0 ** zoom

lat_rad = math.atan(math.sinh(math.pi * (1 - 2 * ytile / n)))

lat_deg = math.degrees(lat_rad)

return lat_deg

def tile2lon(xtile, zoom):

n = 2.0 ** zoom

lon_deg = xtile / n * 360.0 - 180.0

return lon_deg

def getLon(xtile, zoom):

a = []

a.append(tile2lon(xtile, zoom))

a.append(tile2lon(xtile+1, zoom)) 

return a

def getLat(ytile, zoom):

a = []

a.append(tile2lat(ytile, zoom))

a.append(tile2lat(ytile+1, zoom)) 

return a

lons = Util.getLon(x, z)

lats = Util.getLat(y, z)

lonmin = str(lons[0])

lonmax = str(lons[1])

latmin = str(lats[1])

latmax = str(lats[0])

 

  • 重要的查詢語句
// 傳 source-layer 和 tableName參數動態獲取

 query = "WITH mvtgeom AS(SELECT ST_AsMVTGeom(geom,ST_MakeEnvelope(%s,%s,%s,%s,4326),4096,64,true) AS geom FROM public." + tableName + \

" t where t.geom IS NOT NULL AND ST_Intersects(geom, ST_MakeEnvelope(%s,%s,%s,%s,4326))) SELECT ST_AsMVT(mvtgeom.*,'" + \sourceLayer + "') FROM mvtgeom ;"

  • postgis重要函數說明
( 1) ST_AsMVTGeom:將一個圖層中位於參數box2d範圍內的一個幾何圖形的全部座標轉換爲MapBox VectorTile座標空間裏的座標。

 ST_AsMVTGeom的官方文檔API:http://postgis.net/docs/manual-3.0/ST_AsMVTGeom.html

函數各個參數的含義:

geom —— 被轉換的幾何圖形信息。

bounds —— 某個矢量切片的範圍對應的空間參考座標系中的幾何矩形框(沒有緩衝區)。

extent —— 是按規範定義的矢量切片座標空間中的某個矢量切片的範圍。若是爲NULL,則默認爲4096(邊長爲4096個單位的正方形)。

buffer —— 矢量座標空間中緩衝區的距離,位於該緩衝區的幾何圖形部位根據clip_geom參數被裁剪或保留。若是爲NULL,則默認爲256。

clip_geom —— 用於選擇位於緩衝區的幾何圖形部位是被裁剪仍是原樣保留。若是爲NULL,則默認爲true。

注意:從3.0版本開始,能夠在配置時選擇Wagyu庫來裁剪和驗證MVT多邊形。Wagyu庫比默認的GEOS庫更快且能產生更正確的結果,可是它可能會丟棄小的多邊形。

(2) ST_AsMVT:ST_AsMVT聚合函數用於將基於MapBox VectorTile座標空間的幾何圖形轉換爲MapBox VectorTile二進制矢量切片。

PostGIS生成MVT矢量切片的步驟是:

使用ST_AsMVTGeom函數將幾何圖形的全部座標轉換爲MapBox VectorTile座標空間裏的座標,這樣就將基於空間座標系的幾何圖形轉換成了基於MVT座標空間的幾何圖形。

使用ST_AsMVT函數將基於MVT座標空間的幾何圖形轉換爲MVT二進制矢量切片。

ST_AsMVT的官方文檔API:http://postgis.net/docs/manual-3.0/ST_AsMVT.html 

函數各個參數的含義:

row —— 至少具備一個geometry列的行數據。

name —— 圖層名字,默認爲"default"。

extent —— 由MVT規範定義的屏幕空間(MVT座標空間)中的矢量切片範圍。

geom_name —— row參數的行數據中geometry列的列名,默認是第一個geometry類型的列。

feature_id_name —— 行數據中要素ID列的列名。若是未指定或爲NULL,則第一個有效數據類型(smallint, integer, bigint)的列將做爲要素ID列,其餘的列做爲要素屬性列。

  • leaflet矢量瓦片插件前端加載代碼
var map = L.map('map',{renderer: L.canvas}).setView({ lat:23.56,lng:113.23 }, 14);

var positron = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {

opacity: 1

}).addTo(map);

//設置圖斑的樣式

var vectorTileStyling = {

spot:{

color: '#ffd700',

fillColor: '#e6d933',

fillOpacity: 0.1,

fill: true,

opacity: 1,

weight: 3,

dashArray: '5',

}

}

var pbfUrl = "http://localhost:5000/tiles/quanguospot/spot/{z}/{x}/{y}";

var mapboxVectorTileOptions = {

rendererFactory: L.canvas.tile, //L.canvas.tile L.svg.tile

maxZoom: 20,

minZoom: 5,

vectorTileLayerStyles: vectorTileStyling

};

var vectorGrid = L.vectorGrid.protobuf(pbfUrl, mapboxVectorTileOptions).addTo(map)

  • leaflet結合mapboxGL矢量瓦片前端加載代碼
var map = L.map('map', {maxZoom: 17}).setView([23.3759016568317, 113.22544097900392], 13);

map.createPane("tileLayerZIndex");

map.getPane("tileLayerZIndex").style.zIndex = 0;

var positron = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {

opacity: 1,

pane: "tileLayerZIndex",

}).addTo(map);

var blankStyle = {

version: 8,

name: "BlankMap",

sources: {},

layers: [

]

};

var gl = L.mapboxGL({

accessToken: 'pk.eyJ1IjoiZ2lzeGlhb3dlaTEyMyIsImEiOiJja25zcTk4b3cweXZlMndwZjEyNzF1dXM2In0.V5daL_pyIbuSRN8K2PI80Q',

style: blankStyle

}).addTo(map);

gl.getMapboxMap().on('load', function() {

gl.getMapboxMap().addSource('myspot',{

'type':'vector',

'tiles':['http://localhost:5000/tiles/quanguospot/spot/{z}/{x}/{y}']

});

gl.getMapboxMap().addLayer({

'id': 'spot',//隨意

'source': 'myspot',//和上面那個source保持一致

'source-layer':'spot',//圖層名稱。就是數據的名稱

'type': 'fill',

'paint': {

"fill-color": "#e6d933", //讀取數據裏的properties下的value獲取顏色

'fill-opacity': 0.25,

//"fill-outline-color" :"#e6d933",

/*"line-dasharray":[2,4]*/

},

"maxzoom": 20,

"minzoom": 8,

});

gl.getMapboxMap().addLayer({

'id': 'spot_line',//隨意

'source': 'myspot',//和上面那個source保持一致

'source-layer':'spot',//圖層名稱。就是數據的名稱

'type': 'line',

'paint': {

"line-color": "#e6d933",

"line-width": 3,

"line-dasharray": [3,3]

},

"maxzoom": 20,

"minzoom": 8,

});});

完整demo源碼見小專欄文章尾部小專欄

文章尾部提供源代碼下載,對本專欄感興趣的話,能夠關注一波

相關文章
相關標籤/搜索