PostgreSQL ST_AsMVT 到 VectorTiles 到 Leaflet 层

Question

我正在尝试从 PostgreSQL 数据库创建矢量切片，并通过 Flask 将它们提供给 Leaflet map 。我已经关注了这个medium.com article这几乎让我一路走来。

但是，当我打开带有 Leaflet map 的页面时，我会在浏览器控制台中看到以下内容:

index.js:191 Uncaught Error: Unimplemented type: 4 at Pbf.skip (index.js:191) at Pbf.readFields (index.js:41) at new VectorTile$1 (vectortile.js:8) at FileReader. (Leaflet.VectorGrid.Protobuf.js:124)

为了创建图 block ，我使用以下命令:

  def tile_ul(x, y, z):
    n = 2.0 ** z
    lon_deg = x / n * 360.0 - 180.0
    lat_rad = math.atan(math.sinh(math.pi * (1 - 2 * y / n)))
    lat_deg = math.degrees(lat_rad)
    return  lon_deg,lat_deg

    def get_tile(z,x,y):
        xmin,ymin = tile_ul(x, y, z)
        xmax,ymax = tile_ul(x + 1, y + 1, z)
        tile = None
        query = """SELECT ST_AsMVT(tile) FROM (SELECT id, ST_AsMVTGeom(geom, ST_Makebox2d(ST_transform(ST_SetSrid(ST_MakePoint(%s,%s),4326),3857),ST_transform(ST_SetSrid(ST_MakePoint(%s,%s),4326),3857)), 4096, 0, false) AS geom FROM "TimeZone (LineGridExp)") AS tile"""
cursor = db.connection.cursor()
cursor.execute(query,(xmin,ymin,xmax,ymax))
tile = str(cursor.fetchone()[0])
cursor.close()
return tile

@app.route('/tiles')
@app.route('/tiles/<int:z>/<int:x>/<int:y>', methods=['GET'])
def tiles(z=0, x=0, y=0):
    tile = get_tile(z, x, y)
    response = make_response(tile)
    response.headers['Content-Type'] = "application/octet-stream"
    return response

要向传单添加图 block ，我使用:

var url = "http://localhost:5000/tiles/{z}/{x}/{y}"
var mapillaryLayer = L.vectorGrid.protobuf(url).addTo(mymap);

python端接收客户端的GET，不会抛出任何错误。 但是我不确定 SQL 查询和检测空图 block 或查询是否完全错误。

任何帮助将不胜感激。

汤姆

Answer 1

这都是查询不返回数据并且返回字节而不是字符串的问题:

 def get_tile(z,x,y):
    xmin, ymin = tile_ul(x, y, z)
    xmax, ymax = tile_ul(x + 1, y + 1, z)
    query = """SELECT ST_AsMVT(tile) FROM (
               SELECT id, ST_AsMVTGeom(geom, ST_MakeEnvelope( %s, %s, %s, %s ,4326), 4096, 256, false ) geom 
               FROM reproject ) as tile"""
    cursor = db.connection.cursor()
    cursor.execute(query,(xmin,ymin,xmax,ymax))
    tile = bytes(cursor.fetchone()[0])
    cursor.close()
    return tile