矢量瓦片

1,630 阅读11分钟

mapbox切片原理

参考: github.com/jingsam/vec…
示例:
线要素:
假设示例线要素的坐标为:

  • (2,2)

  • (2,10)

  • (10,10) 编码需要3条指令:

  • MoveTo(+2,+2)

  • LineTo(+0,+8)

  • LineTo(+8,+0)

使用postgis进行矢量瓦片切片

示例sql

select ST_AsMVT(P, 'adcode', 4096, 'geom') as "mvt" from ( select fid, ST_AsMVTGeom(ST_Transform(geom, 3857),ST_Transform(ST_MakeEnvelope(112.5,31.952162238024968,123.75,21.943045533438177, 4326), 3857), 4096, 64, TRUE) geom FROM adcode where ST_Transform(geom, 4326) && ST_MakeEnvelope(112.5,31.952162238024968,123.75,21.943045533438177, 4326) ) AS P;

sql详解

1. ST_AsMVTGeom
1.1 函数

geometry ST_AsMVTGeom(geometry geom, box2d bounds, integer extent=4096, integer buffer=256, boolean clip_geom=true);

1.2 描述

将一个图层中位于参数box2d范围内的一个几何图形的所有坐标转换为MapBox VectorTile坐标空间里的坐标。
函数各个参数的含义:

  • geom —— 被转换的几何图形信息。
  • bounds —— 某个矢量切片的范围对应的空间参考坐标系中的几何矩形框(没有缓冲区)。
  • extent —— 是按规范定义的矢量切片坐标空间中的某个矢量切片的范围。如果为NULL,则默认为4096(边长为4096个单位的正方形)。
  • buffer —— 矢量坐标空间中缓冲区的距离,位于该缓冲区的几何图形部位根据clip_geom参数被裁剪或保留。如果为NULL,则默认为256。
  • clip_geom —— 用于选择位于缓冲区的几何图形部位是被裁剪还是原样保留。如果为NULL,则默认为true。

extent说明:
瓦片的extent只是指明了瓦片的范围,并不是瓦片的渲染之后的大小。例如一张extent为4096的矢量瓦片,并不意味着最终渲染出来的是一张4096 X 4096大小的图片。渲染出的图片大小并不由extent决定,通常会被渲染为256 X 256或512 X 512大小的图片。假设将一张extent为4096的矢量瓦片渲染为256 X 256大小的图片,那么(0, 0)~(16, 16)坐标范围内的点都将被综合到图片上的(0, 0)像素点。

2.ST_AsMVT
2.1 函数

bytea ST_AsMVT(anyelement row, text name, integer extent, text geom_name)

2.2 描述

ST_AsMVT聚合函数用于将基于MapBox VectorTile坐标空间的几何图形转换为MapBox VectorTile二进制矢量切片。

3.其余说明
3.1 adcode

adcode 为source_layer名称,用于前端锁定该图层的唯一值

3.2 where语句

where语句完成了求交操作,在转矢量瓦片之前,先对数据进行一遍筛选

一个服务包含多个图层

可以通过" || "操作符调用多次这个函数来同时创建多个图层的同一位置的矢量切片。

select (
(select ST_AsMVT(P, 'adcode', 4096, 'geom') as "mvt" from ( select fid, ST_AsMVTGeom(ST_Transform(geom, 3857),ST_Transform(ST_MakeEnvelope(112.5,31.952162238024968,123.75,21.943045533438177, 4326), 3857), 4096, 64, TRUE) geom FROM adcode where ST_Transform(geom, 4326) && ST_MakeEnvelope(112.5,31.952162238024968,123.75,21.943045533438177, 4326) ) AS P)
||
(select ST_AsMVT(P, 'adcode_many', 4096, 'geom') as "mvt" from ( select fid, ST_AsMVTGeom(ST_Transform(geom, 3857),ST_Transform(ST_MakeEnvelope(112.5,31.952162238024968,123.75,21.943045533438177, 4326), 3857), 4096, 64, TRUE) geom FROM adcode_many where ST_Transform(geom, 4326) && ST_MakeEnvelope(112.5,31.952162238024968,123.75,21.943045533438177, 4326) ) AS P)
) as mvt;

服务元信息提供格式

{
  "vector_layers": [
    {
      "id": "adcode",
      "description": "",
      "minzoom": 3,
      "maxzoom": 14,
      "fields": {
        "RuleID": "Number",
        "Shape_Area": "Number",
        "Shape_Le_1": "Number",
        "市": "String",
        "市代码": "Number",
        "总就业": "Number",
        "省": "String",
        "省代码": "Number",
        "第一产": "Number",
        "第三产": "Number",
        "第二产": "Number",
        "类型": "String"
      }
    },
    {
      "id": "point",
      "description": "",
      "minzoom": 3,
      "maxzoom": 14,
      "fields": {
        "code": "Number",
        "fclass": "String",
        "name": "String",
        "osm_id": "String",
        "population": "Number"
      }
    }
  ],
  "tilestats": {
    "layerCount": 2,
    "layers": [
      {
        "layer": "adcode",
        "count": 26,
        "geometry": "Polygon",
        "attributeCount": 12,
        "attributes": [
          {
            "attribute": "RuleID",
            "count": 1,
            "type": "number",
            "values": [
              1
            ],
            "min": 1,
            "max": 1
          },
          {
            "attribute": "Shape_Area",
            "count": 26,
            "type": "number",
            "values": [
              11012620975.4,
              11058238780.5,
              11258930970.1,
              11924978433.2,
              12623024234.6,
              12705803151.2,
              13279558658.7,
              14393233922.6,
              15852808860.2,
              16703625432.3,
              1774440792.53,
              18283423503.5,
              19077078711.9,
              22344759914.4,
              22494633204.7,
              4085632634.67,
              5360067329.32,
              5625141484.19,
              6046665522.68,
              6385337094.48,
              6665811495.99,
              7899075155.52,
              8174638447.95,
              8222804709.16,
              9171489130.24,
              9335756097.46
            ],
            "min": 1774440792.53,
            "max": 22494633204.7
          },
          {
            "attribute": "Shape_Le_1",
            "count": 26,
            "type": "number",
            "values": [
              1011873.27782,
              1012186.08944,
              1084830.48336,
              1188628.83669,
              1381168.14064,
              1412294.26897,
              1469324.21953,
              458880.374513,
              463538.154366,
              525787.62611,
              562273.302328,
              616655.303771,
              640510.689051,
              651483.331289,
              676977.345371,
              682944.783658,
              702248.058441,
              707310.820758,
              710747.278107,
              728183.668113,
              760630.773967,
              784751.376285,
              799571.995724,
              845650.400553,
              894482.8917,
              913078.633567
            ],
            "min": 458880.374513,
            "max": 1469324.21953
          },
          {
            "attribute": "市",
            "count": 26,
            "type": "string",
            "values": [
              "上海市",
              "南京市",
              "南通市",
              "台州市",
              "合肥市",
              "嘉兴市",
              "宁波市",
              "安庆市",
              "宣城市",
              "常州市",
              "扬州市",
              "无锡市",
              "杭州市",
              "池州市",
              "泰州市",
              "湖州市",
              "滁州市",
              "盐城市",
              "绍兴市",
              "舟山市",
              "芜湖市",
              "苏州市",
              "金华市",
              "铜陵市",
              "镇江市",
              "马鞍山市"
            ]
          },
          {
            "attribute": "市代码",
            "count": 26,
            "type": "number",
            "values": [
              310000,
              320100,
              320200,
              320400,
              320500,
              320600,
              320900,
              321000,
              321100,
              321200,
              330100,
              330200,
              330400,
              330500,
              330600,
              330700,
              330900,
              331000,
              340100,
              340200,
              340500,
              340700,
              340800,
              341100,
              341700,
              341800
            ],
            "min": 310000,
            "max": 341800
          },
          {
            "attribute": "总就业",
            "count": 26,
            "type": "number",
            "values": [
              114.6,
              116.5,
              1375.66,
              144.3,
              191.5,
              194.8,
              204,
              221.8,
              267.1,
              275.5,
              282.2,
              310.4,
              334.2,
              335.5,
              346,
              353.5,
              388.2,
              407.79,
              431.8,
              455,
              462.6,
              542.8,
              560,
              692.3,
              696.1,
              75.1
            ],
            "min": 75.1,
            "max": 1375.66
          },
          {
            "attribute": "省",
            "count": 4,
            "type": "string",
            "values": [
              "上海市",
              "安徽省",
              "江苏省",
              "浙江省"
            ]
          },
          {
            "attribute": "省代码",
            "count": 4,
            "type": "number",
            "values": [
              310000,
              320000,
              330000,
              340000
            ],
            "min": 310000,
            "max": 340000
          },
          {
            "attribute": "第一产",
            "count": 26,
            "type": "number",
            "values": [
              10.55,
              105,
              109.3,
              15.61,
              15.8,
              21.09,
              21.7,
              21.9,
              26.84,
              29.4,
              33.3,
              33.6,
              39.4,
              40.83,
              42.6,
              42.7,
              45.05,
              49.3,
              55.7,
              59.7,
              64.2,
              67.84,
              69.04,
              70.4,
              83.7,
              95.9
            ],
            "min": 10.55,
            "max": 109.3
          },
          {
            "attribute": "第三产",
            "count": 26,
            "type": "number",
            "values": [
              107.3,
              107.9,
              108.5,
              108.9,
              115.4,
              118.4,
              120.87,
              127.04,
              148.6,
              156.3,
              158.8,
              159.7,
              177.4,
              254.05,
              264.8,
              273.8,
              282.9,
              35.36,
              392.1,
              43.9,
              51.4,
              68.1,
              76.13,
              82.4,
              87.8,
              912.01
            ],
            "min": 35.36,
            "max": 912.01
          },
          {
            "attribute": "第二产",
            "count": 26,
            "type": "number",
            "values": [
              106.5,
              111.9,
              120.4,
              137.4,
              146.2,
              158.5,
              163.59,
              174.51,
              180.06,
              183.7,
              189.5,
              211.6,
              213.6,
              244.3,
              28,
              29.19,
              290.34,
              31.8,
              405.8,
              42.6,
              422.82,
              57.4,
              63.6,
              85.1,
              94.28,
              96.9
            ],
            "min": 28,
            "max": 422.82
          },
          {
            "attribute": "类型",
            "count": 3,
            "type": "string",
            "values": [
              "副省级市",
              "地级市",
              "直辖市"
            ]
          }
        ]
      },
      {
        "layer": "point",
        "count": 16492,
        "geometry": "Point",
        "attributeCount": 5,
        "attributes": [
          {
            "attribute": "code",
            "count": 9,
            "type": "number",
            "values": [
              1001,
              1002,
              1003,
              1004,
              1010,
              1020,
              1030,
              1041,
              1050
            ],
            "min": 1001,
            "max": 1050
          },
          {
            "attribute": "fclass",
            "count": 9,
            "type": "string",
            "values": [
              "city",
              "county",
              "farm",
              "hamlet",
              "island",
              "locality",
              "suburb",
              "town",
              "village"
            ]
          },
          {
            "attribute": "name",
            "count": 1000,
            "type": "string",
            "values": [
              ",隔溪张村",
              "Anjia",
              "Aofan",
              "Bai Sha Lin Chang",
              "Beilu",
              "Caizhai",
              "Guishan",
              "Haohantu",
              "Huitouwan",
              "Kengkou",
              "Longgong",
              "Ma'ao",
              "Malingkou",
              "Nanlinghu",
              "Pancun",
              "Shang'ao",
              "Shimulong",
              "Shuangjin",
              "Tangjiawang",
              "Tantou Island",
              "Xia",
              "Xiaohuangtang",
              "Xiaojia",
              "Xiheng",
              "Yangjia",
              "Yaohu",
              "Yinkeng",
              "Yu'ao",
              "Zhaitou Jiao",
              "Zhongduan",
              "Zishazhou",
              "e修鸽家电维修",
              "xiaomaowu",
              "㫃塘坞口",
              "一一七社区",
              "一市镇",
              "一沟里",
              "一社",
              "一统碑",
              "一都孙村",
              "一都村",
              "丁伙镇",
              "丁兰社区",
              "丁兰街道",
              "丁北",
              "丁卯街道",
              "丁堰街道",
              "丁堰镇",
              "丁塘村",
              "丁塘社区",
              "丁宅乡",
              "丁家",
              "丁家村",
              "丁家桥镇",
              "丁家畈村",
              "丁小郢",
              "丁山河村",
              "丁山社区",
              "丁岗",
              "丁岗镇",
              "丁店",
              "丁所",
              "丁村",
              "丁架形",
              "丁桥苑社区",
              "丁桥镇",
              "丁棚",
              "丁沟镇",
              "丁河村",
              "丁涧店",
              "丁程",
              "丁舍",
              "丁蜀镇",
              "丁西",
              "丁郢",
              "丁香镇",
              "七井乡",
              "七亩丘",
              "七古登社区",
              "七圩社区",
              "七坞口",
              "七坞岗",
              "七堡社区",
              "七大户",
              "七家坞",
              "七峰村",
              "七广",
              "七庄村",
              "七房",
              "七星街道",
              "七星镇",
              "七林湾村",
              "七格社区",
              "七洲",
              "七甲闸社区",
              "七联",
              "七贤桥村",
              "七都镇",
              "七里",
              "七里亭村"
            ]
          },
          {
            "attribute": "osm_id",
            "count": 1000,
            "type": "string",
            "values": [
              "1036411320",
              "1070286782",
              "1338631346",
              "1339088743",
              "1439717507",
              "1568725594",
              "1568726755",
              "1586567000",
              "1588003393",
              "1594147431",
              "1594196001",
              "1594197516",
              "1594198529",
              "1594199575",
              "1594280307",
              "1594726979",
              "1594728656",
              "1594730193",
              "1594840800",
              "1603607841",
              "1603607844",
              "1603607857",
              "1611212497",
              "1612053447",
              "1618586303",
              "1642883473",
              "1666058767",
              "1669502051",
              "1675935512",
              "1675935515",
              "1699224580",
              "1699224581",
              "1699224582",
              "1699224587",
              "1699224591",
              "1699224592",
              "1699224593",
              "1699224594",
              "1699703343",
              "1699703354",
              "1699703360",
              "1699703377",
              "1699703383",
              "1699703387",
              "1699703400",
              "1699703408",
              "1699703421",
              "1699703426",
              "1699703429",
              "1699703457",
              "1699703465",
              "1699703467",
              "1699703489",
              "1699703502",
              "1699703507",
              "1699703518",
              "1699703527",
              "1699703536",
              "1699703553",
              "1699703558",
              "1699703577",
              "1699703586",
              "1699703596",
              "1699703604",
              "1699703612",
              "1699703623",
              "1699703647",
              "1699703651",
              "1699703657",
              "1699703674",
              "1699703678",
              "1699703683",
              "1699703707",
              "1699703711",
              "1699703727",
              "1699703732",
              "1699703736",
              "1699703758",
              "1699703765",
              "1699703769",
              "1699703784",
              "1699703796",
              "1699703806",
              "1699703821",
              "1699703829",
              "1699703832",
              "1699703851",
              "1699703860",
              "1699703873",
              "1699703884",
              "1699761800",
              "1699761816",
              "1699761826",
              "1699761834",
              "1699761838",
              "1699761863",
              "1699761874",
              "1699761888",
              "1699761940",
              "1699761954"
            ]
          },
          {
            "attribute": "population",
            "count": 106,
            "type": "number",
            "values": [
              0,
              1000,
              100000,
              102000,
              10465994,
              109000,
              110000,
              1121261,
              12000,
              120000,
              126000,
              13000,
              130000,
              132000,
              14000,
              143149,
              143600,
              1500,
              150000,
              15550000,
              160000,
              1620000,
              1700000,
              181000,
              184729,
              20,
              2000,
              200000,
              21000,
              220000,
              22728,
              23000,
              2304774,
              24000,
              2400000,
              2500,
              257764,
              2600,
              260000,
              2601000,
              2800,
              28000,
              2893542,
              3000,
              30000,
              30661,
              3114105,
              3500,
              3563700,
              3670000,
              37000,
              38000,
              39646,
              4000,
              40000,
              400000,
              41203,
              41409,
              4500,
              45000,
              4529000,
              4569,
              4591972,
              4612000,
              4618558,
              47212,
              4912239,
              5000,
              50000,
              51000,
              52800,
              53400,
              5361572,
              54451,
              55000,
              56000,
              5968838,
              6000,
              600000,
              60447,
              60648,
              6372624,
              65203,
              6600,
              68000,
              72000,
              7260240,
              7282835,
              7605689,
              76759,
              77400,
              8000,
              80000,
              8004680,
              8070,
              8087000,
              82178,
              83564,
              86000,
              8700373
            ],
            "min": 0,
            "max": 15550000
          }
        ]
      }
    ]
  }
}