基于Martin的全国基础底图实现

概述

前面有文章基于Martin实现MapboxGL自定义底图分享了Martin的使用，本文使用网络收集的数据实现了全国基础数据的收集和基础底图。

实现后效果

全图效果

不确定国界

局部细节

建筑物

放大后三维效果

实现

1. 数据准备

实例中包含如下数据：

边界线和九段线数据
省边界面数据
省会城市点数据
市边界面数据
市中心点数据
区边界面数据
区中心点数据
建筑物数据
河流（1级、2级和5级）
铁路数据
公路数据
机场数据

2. 数据入库

将准备好的数据导入的数据库中。

可借助QGIS实现，操作步骤可参考教程QGIS工具箱导入。
或借助工具PostGIS PostGIS Bundle 3 for PostgreSQL x64 12 Shapefile and DBF Loader Exporter导入到数据库中。可参考教程数据的导入
或下载我分享的数据库备份文件还原

3. 修改配置文件

在martin.exe同级目录下新建文件config.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: 16# Amount of memory (in MB) to use for caching tiles [default: 512, 0 to disable]
cache_size_mb: 50000# 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: '{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: 4096functions:# Optionally set how source ID should be generated based on the function's name and schemasource_id_format: '{schema}.{function}'# Associative arrays of table sourcestables:table_source_id:# ID of the MVT layer (optional, defaults to table name)layer_id: my_base# Table schema (required)schema: public# Table name (required)table: province,capital,city# Geometry SRID (required)srid: 4326# Geometry column name (required)geometry_column: geom# Feature id column nameid_column: ~# An integer specifying the minimum zoom levelminzoom: 0# An integer specifying the maximum zoom level. MUST be >= minzoommaxzoom: 10# 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: 30# 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 ]
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 sourceicons: ./icons      
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       
# Font configuration
fonts:# A list of *.otf, *.ttf, and *.ttc font files and dirs to search recursively.- ./font/msyh.ttf

5. 启动服务

在cmd命令窗口中输入命令.\martin.exe --config ./config.yaml启动。

6. 前端调用

前端调用服务的完整代码如下：

<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link href="./public/lib/mapbox-gl.css" rel="stylesheet" /><style>html,body,#map {width: 100%;height: 100%;inset: 0;overflow: hidden;background-color: #efefef;}</style>
</head><body><div id="map" class="map"></div><script src="./public/lib/mapbox-gl.js"></script><script>const url = 'http://localhost:3000/catalog'fetch(url).then(res => res.json()).then(res => {const { tiles, fonts } = reslet sources = {}, fontsArray = Object.keys(fonts)Object.keys(tiles).forEach(tile => {sources[tile] = {type: "vector",tiles: [`http://127.0.0.1:3000/${tile}/{z}/{x}/{y}`],}})var style = {version: 8,name: "Mapbox Streets",sprite: "http://127.0.0.1:3000/sprite/icons",glyphs: `http://127.0.0.1:3000/font/${fontsArray.join(',')}/{fontstack}/{range}.pbf`,sources: sources,layers: [// 背景图层{id: 'background',type: 'background',paint: {'background-color': '#fff'}},// 省填充{id: "base_province_fill",type: "fill",source: "base_province","source-layer": "base_province",paint: {"fill-color": "#f7f7f7","fill-opacity": 0.8,},},// 建筑物填充{id: "theme_building",type: "fill",source: "theme_building","source-layer": "theme_building",minzoom: 13,maxzoom: 14.4,paint: {"fill-color": "#eeeeee","fill-opacity": 1,},},// 建筑物拉伸{id: "theme_building_extrusion",type: "fill-extrusion",source: "theme_building","source-layer": "theme_building",minzoom: 13,paint: {"fill-extrusion-color": "#eeeeee","fill-extrusion-opacity": 0.6,'fill-extrusion-height': 25},},// 建筑物描边{id: "theme_building_border",type: "line",source: "theme_building","source-layer": "theme_building",minzoom: 13,maxzoom: 14.5,paint: {"line-color": "#eee","line-opacity": 1,},},// 建筑物标注{"id": "theme_building_label","type": "symbol","source": "theme_building",'source-layer': 'theme_building',minzoom: 14.5,'layout': {'text-field': ['get', 'name'],'text-size': 12,'text-allow-overlap': false,'text-justify': 'center',"text-font": ["Microsoft YaHei"]},paint: {'text-color': '#a3a3a3','text-halo-color': '#fff','text-halo-width': 1.2,}},// 省边界{id: "base_province",type: "line",source: "base_province","source-layer": "base_province",paint: {"line-color": "#989ea7","line-width": 0.5,'line-opacity': 1,},},// 城市边界{id: "base_city",type: "line",source: "base_city","source-layer": "base_city",minzoom: 6,paint: {"line-color": "#b6ccd8","line-width": 0.5,'line-opacity': 0.75,},},// 区县边界{id: "base_county",type: "line",source: "base_county","source-layer": "base_county",minzoom: 8.2,paint: {"line-color": "#b6ccd8","line-width": 0.3,'line-opacity': 0.8,},},// 一级水域面{id: "theme_hyd1_p",type: "fill",source: "theme_hyd1_p","source-layer": "theme_hyd1_p",minzoom: 6,paint: {"fill-color": "#b2cefe","fill-opacity": 1,},},// 二级水域面{id: "theme_hyd2_p",type: "fill",source: "theme_hyd2_p","source-layer": "theme_hyd2_p",minzoom: 6,paint: {"fill-color": "#b2cefe","fill-opacity": 1,},},// 一级水域线{id: "theme_hyd1_l",type: "line",source: "theme_hyd1_l","source-layer": "theme_hyd1_l",paint: {"line-color": "#b2cefe","line-width": 1,},},// 5级水域线{id: "theme_hyd5_l",type: "line",source: "theme_hyd5_l","source-layer": "theme_hyd5_l",minzoom: 8.4,paint: {"line-color": "#b2cefe","line-width": 0.8,},},// 路网{id: "theme_road",type: "line",source: "theme_road","source-layer": "theme_road",minzoom: 6,paint: {"line-color": "#ffac4d","line-width": 1,},},// 铁路{id: "theme_railway",type: "line",source: "theme_railway","source-layer": "theme_railway",minzoom: 8.4,paint: {"line-color": "#bec4cd","line-width": 2,},},// 铁路白色{id: "theme_railway_bg",type: "line",source: "theme_railway","source-layer": "theme_railway",minzoom: 8.4,paint: {"line-color": "#fff","line-width": 1.5,},},// 铁路间隔{id: "theme_railway_interval",type: "line",source: "theme_railway","source-layer": "theme_railway",minzoom: 8.4,paint: {"line-color": "#bec4cd","line-width": 1.5,"line-dasharray": [3, 3]},},// 国界线虚线{id: "base_boundry",type: "line",source: "base_boundry_l","source-layer": "base_boundry_l",filter: ["==", "type", 1],paint: {"line-color": "#e04747","line-width": 2,"line-dasharray": [3, 3]},},// 国界线{id: "base_boundry_l",type: "line",source: "base_boundry_l","source-layer": "base_boundry_l",filter: ["!=", "type", 1],paint: {"line-color": "#e04747","line-width": 2,},},// 九段线{id: "base_nineline",type: "line",source: "base_nineline","source-layer": "base_nineline",paint: {"line-color": "#e04747","line-width": 3,},},// 机场{"id": "theme_airport","type": "symbol","source": "theme_airport",'source-layer': 'theme_airport',minzoom: 8.2,'layout': {'icon-image': 'airport','icon-size': 0.55,'icon-allow-overlap': true,},paint: {'icon-color': '#f00',}},// 区县名称{"id": "base_county_c","type": "symbol","source": "base_county_c",'source-layer': 'base_county_c',minzoom: 8.2,filter: ['!=', ['get', 'district'], '北京'],'layout': {'icon-image': 'capital','icon-size': 0.32,'icon-allow-overlap': false,'text-field': ['get', 'district'],'text-size': 10,'text-allow-overlap': false,'text-justify': 'center','text-offset': [0, 1.3],"text-font": ["Microsoft YaHei"]},paint: {'text-color': 'rgb(80, 80, 80)','text-halo-color': '#fff','text-halo-width': 1.4,}},// 城市名称{"id": "base_city_c","type": "symbol","source": "base_city_c",'source-layer': 'base_city_c',minzoom: 6,filter: ['!=', ['get', 'district'], '北京'],'layout': {'icon-image': 'capital','icon-size': 0.35,'icon-allow-overlap': false,'text-field': ['get', 'district'],'text-size': 11,'text-allow-overlap': false,'text-justify': 'center','text-offset': [0, 1.3],"text-font": ["Microsoft YaHei"]},paint: {'text-color': 'rgb(80, 80, 80)','text-halo-color': '#fff','text-halo-width': 1.8,}},// 省会城市{"id": "base_capital","type": "symbol","source": "base_capital",'source-layer': 'base_capital',filter: ['!=', ['get', 'name'], '北京'],maxzoom: 5.9,'layout': {'icon-image': 'capital','icon-size': 0.38,'icon-allow-overlap': false,'text-field': ['get', 'name'],'text-size': 12,'text-allow-overlap': false,'text-justify': 'center','text-offset': [0, 1.5],"text-font": ["Microsoft YaHei"]},paint: {'text-color': 'rgb(80, 80, 80)','text-halo-color': '#fff','text-halo-width': 1.8,}},// 首都{"id": "base_capital_beijing","type": "symbol","source": "base_capital",'source-layer': 'base_capital',filter: ['==', ['get', 'name'], '北京'],'layout': {'icon-image': 'star','icon-size': 0.5,'icon-allow-overlap': false,'text-field': ['get', 'name'],'text-size': 14,'text-allow-overlap': false,'text-justify': 'center','text-offset': [0, 1.6],"text-font": ["Microsoft YaHei"]},paint: {'text-color': 'rgb(255, 0, 0)','text-halo-color': '#fff','text-halo-width': 1.6,'icon-color': '#f00',}},],};var map = new mapboxgl.Map({container: "map", // container IDstyle: style,center: [107.11040599933166, 34.26271532332011], // starting position [lng, lat]zoom: 3,minZoom: 3,doubleClickZoom: false,hash: false,localFontFamily: true,logoPosition: "bottom-right",});window.map = map})</script>
</body></html>