MapBox加载矢量瓦片

2021-12-03 13:33:19 阅读：482 来源： 互联网

标签：get text MapBox DB ST 瓦片 id columns 加载

基于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])
        })
      });

标签：get,text,MapBox,DB,ST,瓦片,id,columns,加载
来源： https://www.cnblogs.com/yvyao/p/15637320.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

MapBox加载矢量瓦片