基于 mapbox 离线地图解决方案

为满足内网环境下提供数据可视化地图,首先需要解决地图瓦片服务本地化部署,其次在有限条件下尽可能丰富的展现地图可视化效果。以此为前提,选择了 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 介绍

如何使用?

可以查看 FoxGIS Server Lite 文档

MBTiles 格式数据获取

可以通过以下两种方式获取:

1、可以直接在 download.geofabrik.de 获取开源且免费的 OSM(OpenStreetMap ) 数据

2、还可以在 openmaptiles.org 获取免费或者收费的 OSM 数据

两者区别

相同点:

  • 数据源都为 OSM(OpenStreetMap) 数据

不同点:

  • 前者不提供地图的样式,后者提供完整的地图样式
  • 前者提供不同层级的细粒度的瓦片数据(未进行图层合并或者数据优化),后者提供完整的世界地图瓦片数据(数据已经整合且优化)
  • 前者数据更新及时,后者提供免费的数据为三年前瓦片数据(收费的数据则较新)

除了两者上的一些异同之外,结合目前情况,还有以下影响因素:

1、地图瓦片数据的合并及处理需要了解 GIS 的相关知识,学习成本比较大。

2、地图样式处理需要有较好的设计资源,因为地图本身的特性,如放大或缩小不同等级呈现出不同的内容或样式,所以说设计一个好的地图,不仅从宏观层面还是从微观层面都需要设计师的参与,维护成本太高。

最后选择采用第二种方式提供的地图数据及地图样式。

瓦片服务搭建过程(本地开发环境 )

以下过程以 macOS 为例

1、准备阶段

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>

原文链接:juejin.im

上一篇:React with TypeScript 最佳实践
下一篇:react基础教程之hook,redux(vue&amp;react本就可学其一会其一)

相关推荐

官方社区

扫码加入 JavaScript 社区