MapBox加载矢量瓦片

基于python + Postgresql MVT+ MapBox 加载矢量瓦片的方法

• 服务端 django_restframework + psycopg2

from rest_framework.views import APIView
from rest_framework.response import Response
import psycopg2.extras
DB_HOST = ''
DB_PORT = 5432
DB_USERNAME = ''
DB_PASSWORD = ''
DB_NAME = ''
class PostgresMapApiView(APIView):
    def get(self, request, table_name, z, x, y):
        columns = ',' + request.GET.get('columns', '') if request.GET.get('columns', None) else ''
        id_column = ',' + request.GET.get('id_column', '') if request.GET.get('id_column', None) else ''
        conn = psycopg2.connect(host=DB_HOST, port=DB_PORT, user=DB_USERNAME, password=DB_PASSWORD, database=DB_NAME)
        cursor = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
        sql = " WITH mvtgeom as ( SELECT  ST_AsMVTGeom ( ST_Transform(geom, 3857),ST_TileEnvelope(" + z + "," + x + ", " + y + ")) as geom " + columns + id_column + " FROM " + table_name + ",(SELECT ST_SRID(geom) AS srid FROM " + table_name + " LIMIT 1) a WHERE ST_Intersects(geom,ST_Transform(ST_TileEnvelope(" + z + ", " + x + ", " + y + "),srid))) SELECT ST_AsMVT(mvtgeom.*, '" + table_name + "', 4096, 'geom' ) AS mvt from mvtgeom;"
        cursor.execute(sql)
        r = cursor.fetchone()
        try:
            from django.http.response import StreamingHttpResponse
            response = StreamingHttpResponse(r)
            response['Content-Type'] = 'application/x-protobuf'
            return response
        except:
            return Response(formatResponse(code=404))

• web端  mapbox

map.on('load', function () {
        map.addLayer({
          "id": "mapillary-point",
          type: 'symbol',
          "source": {
            "type": "vector",
            "tiles": ["http://192.168.10.113:8000/demo/postgres/【表名】/{z}/{x}/{y}?columns=【需要的列名】"],
            "minzoom": 6,
          },
          'source-layer': '【表名】',
          "glyphs": "font/{fontstack}/{range}.pbf",
          "layout": {
            "text-size": 13.3333,
            "text-field": "{【展示的字段名称】}",
            "text-optional": true,
          },
          "paint": {
            "text-color": "#ffffff", // 文本的颜色（可选，默认值为 #000000）
            "text-halo-color": "rgba(0,0,0,0)", // 文本的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
          }
        })
        map.addLayer({
          "id": "mapillary-polygon",
          type: 'fill',
          "source": {
            "type": "vector",
            "tiles": ["http://192.168.10.113:8000/demo/postgres/【表名】/{z}/{x}/{y}?id_column=需要的列名】"],
            "minzoom": 6,
          },
          'source-layer': '【表名】',
          'paint': {
            'fill-color': '#fff000',
            'fill-opacity': 0.3,
            "fill-outline-color": "#000000",
          }
        }, 'mapillary-point')
        map.on('click', 'mapillary-polygon', (e) => {
          console.log(e.features[0])
        })
      });