概述

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

实现后效果

image.png

Martin简介

image.png

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

启动

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

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

启动后界面如下。

image.png

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

image.png

前端调用

前端调用的代码如下：

<!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>