开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门

时间 2019-11-21

标签开源方案搭建离线精美矢量切片地图服务 3.mapbox mapbox 个性化定制入门繁體版

原文原文链接

系列文章目录

开源方案搭建可离线的精美矢量切片地图服务-1.开篇（附成果演示地址）css

开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片 html

开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门jquery

开源方案搭建可离线的精美矢量切片地图服务-4.Mapbox样式设计android

开源方案搭建可离线的精美矢量切片地图服务-5.Mapbox离线项目实现webpack

开源方案搭建可离线的精美矢量切片地图服务-6.Mapbox之.pbf字体库git

开源方案搭建可离线的精美矢量切片地图服务-7.Arcgis Pro企业级应用github

开源方案搭建可离线的精美矢量切片地图服务-8.mapbox 之sprite大图图标文件生成（附源码）web

项目成果展现（全部项目文件都在阿里云的共享云虚拟主机上，访问地图能够会有点慢，请多多包涵）。

01：中国地图：http://test.sharegis.cn/mapbox/html/3china.html

02：德国-德累斯顿市：http://test.sharegis.cn/mapbox/html/6germany.htmljson

1.简介

mapbox是一家很是牛的公司，好比像特斯拉、DJI大疆创新、孤独星球、Airbnb、GitHub、Cisco、Snap、飞猪、Keep、Bosch这些在国内外各自领域中响当当的企业都是它的客户。专一于帮助企业打造定制化地图应用的Mapbox就是这样一家“你看不见我，但我无处不在”的企业。能够开发和定制web、android、IOS、VR、无人驾驶、甚至是游戏地图场景等。 api

mapbox-gl是Mapbox一款开源Web地图服务解决方案，用于搭建精美的地图服务，能够免费建立并定制个性化地图的网站。他最大的优势就是可使用相似于css的样式来描述地图，并提供相似于photoshop的图像界面来设计和生成精美的样式。咱们本篇主要讲一下Mapbox在Web地图中的应用。

2.Mapbox入门

1.打开向导页：https://www.mapbox.com/install/，选择开发平台SDK,

2.选择Mapbox GL js 方式，第一种为CDN在线模式，相似于引用jquery同样，咱们也能够下载下来。第二种为模块化js搭建，可以使用webpack等模块化工具搭建。

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.

<!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

出处：http://www.cnblogs.com/ATtuing

本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文连接。