使用postgis，ST_TileEnvelope计算瓦片
1.postgis3.0版本新增了一个ST_TileEnvelope函数，这个函数可以用来直接定义瓦片规则，以往还需要我们自己计算xyz的范围使用ST_MakeEnvelope才能获取瓦片，这个新函数可以说是非常的方便了；
2.函数参数定义：
ST_TileEnvelope ( z, x, y, ST_MakeEnvelope ( - 180, - 90, 180, 90, 4326 ) )
z:缩放级别zoom
x:瓦片x
y:瓦片y
返回信息：在你定义的瓦片规则下xyz对应的范围
3.瓦片获取：
SELECT
ST_AsMVT ( tile ) tile
FROM
(
SELECT
st_asmvtgeom (
T.geom,
ST_TileEnvelope ( 10, 834, 446, ST_MakeEnvelope ( - 180, - 180, 180, -180, 4326 ) ),
4096,
0,
TRUE
) AS geom
FROM
dltb_43261 T
) AS tile
WHERE
tile.geom IS NOT NULL;
与
SELECT
ST_AsMVT ( tile ) tile
FROM
(
SELECT
st_asmvtgeom (
T.geom,
st_makeenvelope ( 113.203125, 22.8515625, 113.5546875, 23.203125, 4326 ), 4096, 0, TRUE ) AS geom
FROM
dltb_43261 T
) AS tile
WHERE
tile.geom IS NOT NULL;
是等价的
4.后端代码
1）xml mapper层配置
<select id="selectTile2" resultMap="BaseResultMap" parameterType="com.zgis.vector.vectortile.domain.TileXYZ">
SELECT
ST_AsMVT ( tile ) tile
FROM
(
SELECT
st_asmvtgeom (
T.geom,
ST_TileEnvelope ( #{z,jdbcType=INTEGER},#{x,jdbcType=INTEGER},#{y,jdbcType=INTEGER}, ST_MakeEnvelope ( - 180, - 180, 180, 180, 4326 ) ),
4096,
0,
TRUE
) AS geom
FROM
dltb_43261 T
) AS tile
WHERE
tile.geom IS NOT NULL;
select>
5.openlayers前端加载
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">script>
<link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.js">script>
<style>
html,body,#map{
width:100%;
height:100%;
padding:0;
margin:0;
}
style>
head>
<body>
<div id="map">div>
body>
<script>
var projection4326 = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
});
var defaultView = new ol.View({
projection: projection4326,
center: [113.3939,22.977],
//new ol.proj.fromLonLat([114.15, 22.65]),
zoom: 11
});
var vectorLayer=new ol.layer.VectorTile({
projection:projection4326,
source:new ol.source.VectorTile({
format:new ol.format.MVT(),
projection:projection4326,
tilePixelRatio:1,
url:'http://localhost:8050/zgis/vector/tile1/{z}/{x}/{y}'
})
});
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.VectorTile({
projection:projection4326,
source:new ol.source.VectorTile({
format:new ol.format.MVT(),
projection:projection4326,
tilePixelRatio:1,
url:'http://localhost:8050/zgis/vector/tile1/{z}/{x}/{y}'
})
})
];
//layers.push(vectorLayer);
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
units: 'degrees'
})
]),
layers: layers,
target: 'map',
view: defaultView
});
script>
html>