当前位置：首页 > news >正文

基于Martin实现MapboxGL自定义底图

news 来源：原创 2024/9/20 4:50:01

概述

本文分享基于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 fallbackdefault_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 schemasfrom_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 columnsource_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 trueclip_geom: true# Buffer distance in tile coordinate space to optionally clip geometries, optional, default to 64buffer: 64# Tile extent in tile coordinate space, optional, default to 4096extent: 4096# Associative arrays of table sourcestables: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 nameid_column: gid# An integer specifying the minimum zoom levelminzoom: 0# An integer specifying the maximum zoom level. MUST be >= minzoommaxzoom: 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 spaceextent: 4096# Buffer distance in tile coordinate space to optionally clip geometriesbuffer: 64# Boolean to control if geometries should be clipped or encoded as isclip_geom: true# Geometry typegeometry_type: GEOMETRY# List of columns, that should be encoded as tile properties (required)properties:gid: int4# Associative arrays of function sourcesfunctions:function_source_id:# Schema name (required)schema: public# Function name (required)function: function_zxy_query# An integer specifying the minimum zoom levelminzoom: 0# An integer specifying the maximum zoom level. MUST be >= minzoommaxzoom: 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.mbtilessources:# 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 sourcebanks: ./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

启动后界面如下。

访问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 IDstyle: style,center: [107.11040599933166, 34.26271532332011], // starting position [lng, lat]zoom: 3,doubleClickZoom: false,hash: false,localFontFamily: true,logoPosition: 'bottom-right'});</script>
</body></html>