为满足内网环境下提供数据可视化地图,首先需要解决地图瓦片服务本地化部署,其次在有限条件下尽可能丰富的展现地图可视化效果。以此为前提,选择了 mapbox 的一整套解决方案。
ps: 感谢 FoxGIS Server Lite 作者@jingsam的支持
地图相关知识简介
在描述具体方案之前,先简单介绍一下地图相关知识。
瓦片地图
为了达到更快的地图加载效率,地图资源大多以瓦片形式加载,即在不同的缩放等级下,在服务端获取相对应的瓦片资源,关于瓦片原理的介绍
坐标系
现在常用的坐标系一般分为以下三种,这三个坐标系之间也是可以相互转换的
- WGS84(mapbox、谷歌):即地球坐标系,国际上通用坐标系
- GCJ-02(高德、腾讯):即火星坐标系,WGS84坐标系经加密后的坐标系。
- BD-09(百度):即百度坐标系,GCJ-02坐标系经加密后的坐标系。
地图瓦片服务本地部署
简介
使用 FoxGIS Server Lite 来搭建矢量瓦片地图服务
此项目基于 nodejs、Express搭建,是一款简单易用的矢量瓦片地图服务软件
其中处理瓦片数据使用了 mapbox 官方维护的 @mapbox/mbtile
库(通过 nodejs 和 tilelive.js 集成来处理 MBTiles 格式的数据),更多关于 @mapbox/mbtile 介绍
如何使用?
MBTiles 格式数据获取
可以通过以下两种方式获取:
1、可以直接在 download.geofabrik.de 获取开源且免费的 OSM(OpenStreetMap ) 数据
2、还可以在 openmaptiles.org 获取免费或者收费的 OSM 数据
两者区别
相同点:
- 数据源都为 OSM(OpenStreetMap) 数据
不同点:
- 前者不提供地图的样式,后者提供完整的地图样式
- 前者提供不同层级的细粒度的瓦片数据(未进行图层合并或者数据优化),后者提供完整的世界地图瓦片数据(数据已经整合且优化)
- 前者数据更新及时,后者提供免费的数据为三年前瓦片数据(收费的数据则较新)
除了两者上的一些异同之外,结合目前情况,还有以下影响因素:
1、地图瓦片数据的合并及处理需要了解 GIS 的相关知识,学习成本比较大。
2、地图样式处理需要有较好的设计资源,因为地图本身的特性,如放大或缩小不同等级呈现出不同的内容或样式,所以说设计一个好的地图,不仅从宏观层面还是从微观层面都需要设计师的参与,维护成本太高。
最后选择采用第二种方式提供的地图数据及地图样式。
瓦片服务搭建过程(本地开发环境 )
以下过程以 macOS 为例
1、准备阶段
- 下载 FoxGIS Server Lite 客户端
- 在
openmaptiles.org
下载 地图瓦片数据 (地图版本为 2017-07-03_planet_z0_z14) - 在 maptiler-basic-gl-style 中将此项目中的
style.json
文件下载到本地
2、将下载好的压缩包解压到指定目录下,并进入 foxgis-server-lite-macos
文件夹下
cd foxgis-server-lite-macos
3、将之前下载好的地图放到 foxgis-server-lite-macos/data/tilesets
文件夹内,
4、将下载好的 style.json
文件中相关内容进行替换如下
# 替换瓦片数据请求地址
# 将
"url": "https://api.maptiler.com/tiles/v3/tiles.json?key={key}"
# 替换为
"url": "http://localhost:1234/api/tilesets/2017-07-03_planet_z0_z14/tilejson"
# 替换字体文件并添加 sprite 图
# 将
"glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}",
# 替换为
"sprite": "http://localhost:1234/api/sprites/streets/sprite",
"glyphs": "http://localhost:1234/api/fonts/{fontstack}/{range}.pbf",
5、修改 style.json
文件中的字体名称
# 将所有 "text-font" 项的值替换为 ["Open Sans Regular"], 如:
"text-font": ["Noto Sans Regular"],
# 替换为
"text-font": ["Open Sans Regular"],
6、将修改好的 style.json
文件添加到 foxgis-server-lite-macos/data/styles
文件夹内
7、直接运行或命令行启动foxgis-server-lite-macos
文件夹下 foxgis-server-lite-macos
文件即可
# 启动瓦片服务
./foxgis-server-lite-macos
8、紧接着会提示服务启动成功
# 默认服务端口号是1234
Listening on port 1234
# 如果需要更改端口号可以通过设置环境变量改变
export PORT=8080 && ./foxgis-server-lite-macos
注:如果更改了服务端口号,也需要同步修改 style.json 中请求地址的端口号
完成以上步骤,就已经成功的运行起地图瓦片服务了,接下来结合 mapbox 就可以在页面上渲染出地图了。
mapbox 简介
支持移动端、桌面端以及网页,灵活、快速的地理信息可视化工具。
如何使用?
mapbox 提供了比较丰富的文档内容,我们应用的是 Mapbox GL JS
推荐可以从 Example 开始看
简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body,#map{
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="http://localhost:1234/api/assets/mapbox-gl.css" />
<script src="http://localhost:1234/api/assets/mapbox-gl.js"></script>
</head>
<body>
<div id="map"></div>
</body>
<script>
var map = new mapboxgl.Map({
container: "map", // container id
style: "http://localhost:1234/api/styles/style", // style URL
center: [116.40, 39.9066], // starting position [lng, lat]
zoom: 13 // starting zoom
});
</script>
</html>