项目成果展示 (所有项目文件都在阿里云的共享云虚拟主机上, 访问地图可以会有点慢, 请多多包涵).
01: 中国地图: http://test.sharegis.cn/mapbox/html/3china.html
02: 德国 - 德累斯顿市: http://test.sharegis.cn/mapbox/html/6germany.html
1. 简介
https://www.mapbox.com/ 是一家非常牛的公司, 比如像特斯拉, DJI 大疆创新, 孤独星球, Airbnb,GitHub,Cisco,Snap, 飞猪, Keep,Bosch 这些在国内外各自领域中响当当的企业都是它的客户. 专注于帮助企业打造定制化地图应用的 Mapbox 就是这样一家 "你看不见我, 但我无处不在" 的企业. 可以开发和定制 web,android,IOS,VR, 无人驾驶, 甚至是游戏地图场景等.
https://github.com/mapbox/mapbox-gl-js 是 Mapbox 一款开源 Web 地图服务解决方案, 用于搭建精美的地图服务, 可以免费创建并定制个性化地图的网站. 他最大的优点就是可以使用类似于 CSS 的样式来描述地图, 并提供类似于 photoshop 的图像界面来设计和生成精美的样式. 我们本篇主要讲一下 Mapbox 在 Web 地图中的应用.
2.Mapbox 入门
1. 打开向导页: https://www.mapbox.com/install/ , 选择开发平台 SDK,
2. 选择 Mapbox GL js 方式, 第一种为 CDN 在线模式, 类似于引用 jquery 一样, 我们也可以下载下来. 第二种为模块化 js 搭建, 可使用 https://webpack.github.io/ 等模块化工具搭建.
3. 搭建第一个页面.
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <meta charset="utf-8" />
- <style>
- html, body {
- padding: 0;
- margin: 0;
- height: 100%;
- overflow: hidden;
- }
- #map {
- height: 100%;
- z-index: 0;
- }
- </style>
- <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
- <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
- </head>
- <body>
- <div id='map'></div>
- <script>
- mapboxgl.accessToken = 'pk.eyJ1IjoiYXR0dWluZyIsImEiOiJjamNham4ycTgwZzVkMndzM2lzYTJtN2VjIn0.kB9yWdGNuo7_oi3brXX4-A';
- var map = new mapboxgl.Map({
- container: 'map',
- style: 'mapbox://styles/mapbox/streets-v10'
- });
- </script>
- </body>
- </html>
配色非常舒服的地图界面, 通过 js 代码分析可以看出最核心的代码就是 style: 'mapbox://styles/mapbox/streets-v10', 他包含了所有的地图样式.
3.Mapbox 进阶
入门例子中 style 样式都封装到了一起, 下面这个例子展示如何将 style 分解, 为后面离线部署提供解决方案, 具体可以查看一下 style api https://www.mapbox.com/mapbox-gl-js/style-spec .
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <meta charset="utf-8" />
- <style>
- html, body {
- padding: 0;
- margin: 0;
- height: 100%;
- overflow: hidden;
- }
- #map {
- height: 100%;
- z-index: 0;
- }
- </style>
- <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
- <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
- </head>
- <body>
- <div id='map'></div>
- <script>
- mapboxgl.accessToken = 'pk.eyJ1IjoiYXR0dWluZyIsImEiOiJjamNham4ycTgwZzVkMndzM2lzYTJtN2VjIn0.kB9yWdGNuo7_oi3brXX4-A';
- var map = new mapboxgl.Map({
- container: 'map',
- style: {
- "version": 8,
- "name": "Mapbox Streets",
- "sprite": "mapbox://sprites/mapbox/streets-v8",
- "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
- "sources": {
- "mapbox-streets": {
- "type": "vector",
- "url": "mapbox://mapbox.mapbox-streets-v6"
- }
- },
- "layers": [
- {
- "id": "water",
- "source": "mapbox-streets",
- "source-layer": "water",
- "type": "fill",
- "paint": {
- "fill-color": "#00ffff"
- }
- }
- ]
- }
- });
- </script>
- </body>
- </html>
api 解析:
1.version: 这个 JS SDK 对应版本必须为 8.
2.name: 样式的命名.
3.sprite: 将一个地图涉及到的所有零星图标图片都包含到一张大图中去, 我们看一下 streets-v8 的 sprite 图片.
4.glyphs:.pbf 格式的字体样式, 例如微软雅黑等字体库.
5.sources: 图层的资源文件, 可以支持矢量切片, 栅格, dem 栅格, 图片, geojson, 视频等格式.
6.layers: 是对每个图层样式的描述, 这里就是对地图样式渲染的关键, 可以做很多精美的设计.
写到这里我们还有一个疑问 mapboxgl.accessToken 这个 accessToken 是干什么的? 其实 Mapbox 提供了在线样式的编辑, 以及矢量数据上传, 图标的整合等, 这个 accessToken 其实是为了与你上传到他们服务器的数据做关联, 如果我们不依赖他的在线资源, 我们完全可以不使用这个 accessToken .
4.Mapbox 离线部署
通过上面的分析, mapbox-gl.js,mapbox-gl.css 下载到本地就行. 离线部署现在主要的问题是首先有自己的矢量切片文件, 上一节我们讲过如何发布矢量切片服务, 其次有个 glyphs 字体文件, 后面文章我会提供一个微软雅黑的. pbf 格式的字体库, 以及我获取. pbf 字体库的方式. 剩下的就是编写自己的地图样式了.
5. 总结
这一篇主要讲了一下 Mapbox 的基础, 以及对离线部署的分析, 下一篇讲一下我们之前提到的项目实现.
待续.....................
作者: ATtuing
来源: https://www.cnblogs.com/ATtuing/p/9098612.html