基于Martin实现MapboxGL自定义底图

概述

本文分享基于Martin实现MapboxGL底图的自定义。

实现后效果

Martin简介

Martin 是一个瓦片服务器，它能够从 PostGIS 数据库、PMTiles（本地或远程）以及 [MBTiles] (https://github.com/mapbox/mbtiles-spec) 文件中快速生成并提供矢量瓦片 ，允许动态地将多个瓦片源合并为一个。Martin 专为速度和大量流量进行了优化，使用 Rust 语言编写。

它可以：

• 使用POSTGIS数据库、MBTiles、PMTiles发布矢量切片；
• svg图自动生成精灵图；
• otf, ttf, ttc自动生成字体切片；

实现

config.yaml配置文件

推荐使用*.yaml配置文件，配置文件的内容可参考如下：

# Connection keep alive timeout [default: 75]
keep_alive: 75

# The socket address to bind [default: 0.0.0.0:3000]
listen_addresses: '0.0.0.0:3000'

# Set TileJSON URL path prefix. This overides the default of respecting the X-Rewrite-URL header.
# Only modifies the JSON (TileJSON) returned, martins' API-URLs remain unchanged. If you need to rewrite URLs, please use a reverse proxy.
# Must begin with a `/`.
# Examples: `/`, `/tiles`
base_path: /tiles

# Number of web server workers
worker_processes: 8

# Amount of memory (in MB) to use for caching tiles [default: 512, 0 to disable]
cache_size_mb: 1024

# If the client accepts multiple compression formats, and the tile source is not pre-compressed, which compression should be used. `gzip` is faster, but `brotli` is smaller, and may be faster with caching.  Default could be different depending on Martin version.
preferred_encoding: gzip

# Enable or disable Martin web UI. At the moment, only allows `enable-for-all` which enables the web UI for all connections. This may be undesirable in a production environment. [default: disable]
web_ui: enable

# Database configuration. This can also be a list of PG configs.
postgres:
  # Database connection string. You can use env vars too, for example:
  #   $DATABASE_URL
  #   ${DATABASE_URL:-postgresql://postgres@localhost/db} 'postgres://<database_username>:<database_userpassword>@<hostaddress>:<port_no>/<database_name>'
  connection_string: 'postgresql://postgres:root@localhost:5432/lzugis'

  #  If a spatial table has SRID 0, then this SRID will be used as a fallback
  default_srid: 4326

  # Maximum Postgres connections pool size [default: 20]
  pool_size: 20

  # Limit the number of table geo features included in a tile. Unlimited by default.
  max_feature_count: 1000

  # Control the automatic generation of bounds for spatial tables [default: quick]
  # 'calc' - compute table geometry bounds on startup.
  # 'quick' - same as 'calc', but the calculation will be aborted if it takes more than 5 seconds.
  # 'skip' - do not compute table geometry bounds on startup.
  auto_bounds: skip

  # Enable automatic discovery of tables and functions.
  # You may set this to `false` to disable.
  auto_publish:
    # Optionally limit to just these schemas
    from_schemas:
      - public
    # Here we enable both tables and functions auto discovery.
    # You can also enable just one of them by not mentioning the other,
    # or setting it to false.  Setting one to true disables the other one as well.
    # E.g. `tables: false` enables just the functions auto-discovery.
    tables:
      # Optionally set how source ID should be generated based on the table's name, schema, and geometry column
      source_id_format: 'base_{table}'
      # Add more schemas to the ones listed above
      # A table column to use as the feature ID
      # If a table has no column with this name, `id_column` will not be set for that table.
      # If a list of strings is given, the first found column will be treated as a feature ID.
      id_columns: gid
      # Boolean to control if geometries should be clipped or encoded as is, optional, default to true
      clip_geom: true
      # Buffer distance in tile coordinate space to optionally clip geometries, optional, default to 64
      buffer: 64
      # Tile extent in tile coordinate space, optional, default to 4096
      extent: 4096

  # Associative arrays of table sources
  tables:
    my_province:
      # ID of the MVT layer (optional, defaults to table name)
      layer_id: my_province

      # Table schema (required)
      schema: public

      # Table name (required)
      table: province

      # Geometry SRID (required)
      srid: 4326

      # Geometry column name (required)
      geometry_column: geom

      # Feature id column name
      id_column: gid

      # An integer specifying the minimum zoom level
      minzoom: 0

      # An integer specifying the maximum zoom level. MUST be >= minzoom
      maxzoom: 22

      # The maximum extent of available map tiles. Bounds MUST define an area
      # covered by all zoom levels. The bounds are represented in WGS:84
      # latitude and longitude values, in the order left, bottom, right, top.
      # Values may be integers or floating point numbers.
      bounds: [ -180.0, -90.0, 180.0, 90.0 ]

      # Tile extent in tile coordinate space
      extent: 4096

      # Buffer distance in tile coordinate space to optionally clip geometries
      buffer: 64

      # Boolean to control if geometries should be clipped or encoded as is
      clip_geom: true

      # Geometry type
      geometry_type: GEOMETRY

      # List of columns, that should be encoded as tile properties (required)
      properties:
        gid: int4

  # Associative arrays of function sources
  functions:
    function_source_id:
      # Schema name (required)
      schema: public

      # Function name (required)
      function: function_zxy_query

      # An integer specifying the minimum zoom level
      minzoom: 0

      # An integer specifying the maximum zoom level. MUST be >= minzoom
      maxzoom: 20

      # The maximum extent of available map tiles. Bounds MUST define an area
      # covered by all zoom levels. The bounds are represented in WGS:84
      # latitude and longitude values, in the order left, bottom, right, top.
      # Values may be integers or floating point numbers.
      bounds: [ -180.0, -90.0, 180.0, 90.0 ]

# Publish MBTiles files
mbtiles:
  paths:
    # scan this whole dir, matching all *.mbtiles files
    # - /dir-path
    # specific mbtiles file will be published as mbtiles2 source
    - ./world_cities.mbtiles
  sources:
    # named source matching source name to a single file
    # mb-src1: /path/to/mbtiles1.mbtiles      
sprites:
  paths:
    # all SVG files in this dir will be published as a "my_images" sprite source
    # - ./icons   
  sources:
    # SVG images in this directory will be published as a "my_sprites" sprite source
    banks: ./icons
# Font configuration
fonts:
  # A list of *.otf, *.ttf, and *.ttc font files and dirs to search recursively.
  - ./font/msyh.ttf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

启动

本示例是在windows环境中，在cmd命令行输入如下命令：

.\martin.exe --config ./config.yaml
1

启动后界面如下。

访问http://localhost:3000/catalog，返回数据如下：

前端调用

前端调用的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>mapbox</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/mapbox-gl.css" type="text/css">
    <link rel="stylesheet" href="style/map.css" type="text/css">
    <script src="lib/mapbox-gl.js"></script>
</head>

<body>
    <div id="map" class="map"></div>
    <script>
        var style = {
            "version": 8,
            "name": "Mapbox Streets",
            "sprite": "http://127.0.0.1:3000/sprite/banks",
            "glyphs": "http://127.0.0.1:3000/font/Microsoft YaHei Regular/{fontstack}/{range}.pbf",
            "sources": {
                "base-tile": {
                    "type": "vector",
                    "tiles": ['http://127.0.0.1:3000/my_province,base_capital,base_city,base_railway,base_buildings/{z}/{x}/{y}'],
                }
            },
            "layers": [
                {
                    "id": "my_province_fill",
                    "type": "fill",
                    "source": "base-tile",
                    'source-layer': 'my_province',
                    "paint": {
                        "fill-color": "#f00",
                        "fill-opacity": 0.2
                    }
                },
                {
                    "id": "my_province_line",
                    "type": "line",
                    "source": "base-tile",
                    'source-layer': 'my_province',
                    "paint": {
                        "line-color": "#f00",
                        "line-width": 1
                    }
                },
                {
                    "id": "base_capital",
                    "type": "symbol",
                    "source": "base-tile",
                    'source-layer': 'base_capital',
                    'layout': {
                        'icon-image': 'nongye',
                        'icon-size': 0.06,
                        'icon-allow-overlap': true,
                        'text-field': ['get', 'name'],
                        'text-size': 12,
                        'text-allow-overlap': true,
                        'text-justify': 'center',
                        'text-offset': [0, 1.5],
                        "text-font": [
                            "Microsoft YaHei Regular"
                        ]
                    },
                    paint: {
                        'text-color': 'rgb(159, 96, 55)',
                        'text-halo-color': '#fff',
                        'text-halo-width': 1.8,
                        'icon-color': '#f00',
                    }
                },
            ]
        }
        var map = new mapboxgl.Map({
            container: 'map', // container ID
            style: style,
            center: [107.11040599933166, 34.26271532332011], // starting position [lng, lat]
            zoom: 3,
            doubleClickZoom: false,
            hash: false,
            localFontFamily: true,
            logoPosition: 'bottom-right'
        });
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87