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

时间  2019-11-21
标签 开源 方案 搭建 离线 精美 矢量 切片 地图 服务 4.mapbox mapbox 样式 设计 繁體版
原文   原文链接

 

系列文章目录

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

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

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

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

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

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

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

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

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

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

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

1.Mapbox设计思想

下面咱们以一条路的设计为基础进行分析。自己这只是线的矢量数据，咱们要对它进行丰富的渲染，大致上分为四个部分：code

image

1.橙色的为是路的主体。对应type=line，是对线的渲染。代码以下
{
                          //高速千米
                          "id": "bridge-motorway",
                          "type": "line",
                          "source": "germany",
                          "source-layer": "gis_osm_roads_07_1",
                          "filter": [
                              "==",
                              "fclass",
                              "motorway"
                          ],
                          "layout": {
                              "line-cap": "round",
                              "line-join": "round"
                          },
                          "paint": {
                              "line-width": {
                                  "base": 1.5,
                                  "stops": [
                                      [
                                          5,
                                          0.75
                                      ],
                                      [
                                          18,
                                          32
                                      ]
                                  ]
                              },
                              "line-color": "hsl(26, 100%, 68%)"
                          },
                          "interactive": true
                      },
2.为了美观路两边加白色渲染线：对应type=line，是线渲染
{
                         "id": "bridge-motorway-case",
                         "type": "line",
                         "source": "germany",
                         "source-layer": "gis_osm_roads_07_1",
                         "filter": [
                             "==",
                             "fclass",
                             "motorway"
                         ],
                         "layout": {
                             "line-join": "round"
                         },
                         "paint": {
                             "line-width": {
                                 "base": 1.5,
                                 "stops": [
                                     [
                                         10,
                                         1
                                     ],
                                     [
                                         16,
                                         2
                                     ]
                                 ]
                             },
                             "line-color": "hsl(0, 0%, 100%)",
                             "line-gap-width": {
                                 "base": 1.5,
                                 "stops": [
                                     [
                                         5,
                                         0.75
                                     ],
                                     [
                                         18,
                                         32
                                     ]
                                 ]
                             }
                         },
                         "interactive": true
                     },
3.公路编号图标，图标是一张图片外加属性数据。对应type=symbol，是符号渲染
{
                          "id": "road-shields-white",
                          "type": "symbol",
                          "source": "germany",
                          "source-layer": "gis_osm_roads_07_1",
                          "minzoom": 14,
                          "filter": [
                            "==",
                            "fclass",
                            "motorway"
                          ],
                          "layout": {
                              "text-size": 9,
                             "icon-image": "de-motorway-2",
                              "icon-rotation-alignment": "viewport",
                              "text-max-angle": 38,
                              "symbol-spacing": {
                                  "base": 1,
                                  "stops": [
                                      [
                                          11,
                                          150
                                      ],
                                      [
                                          14,
                                          200
                                      ]
                                  ]
                              },
                              "text-font": [
                                  "Microsoft YaHei",
                              ],
                              "symbol-placement": {
                                  "base": 1,
                                  "stops": [
                                      [
                                          10,
                                          "point"
                                      ],
                                      [
                                          11,
                                          "line"
                                      ]
                                  ]
                              },
                              "text-padding": 2,
                              "text-rotation-alignment": "viewport",
                              "text-field": "{ref}",
                              "text-letter-spacing": 0.05,
                              "icon-padding": 2
                          },
4.单行道路标，对应type=symbol，是符号渲染
{
     "id": "road-oneway-arrows-white",
     "type": "symbol",
     "source": "germany",
     "source-layer": "gis_osm_roads_07_1",
     "minzoom": 16,
     "filter": [
       "==",
       "fclass",
       "motorway"
     ],
     "layout": {
         "symbol-placement": "line",
         "icon-image": {
             "base": 1,
             "stops": [
                 [
                     16,
                     "oneway-white-small"
                 ],
                 [
                     17,
                     "oneway-white-large"
                 ]
             ]
         },
         "icon-padding": 2,
         "symbol-spacing": 200
     },
     "paint": {},
     "interactive": true
}


       从上面的分析能够看出mapbox的对单个图层渲染能够写各类样式，能够对每一个细节作不一样的渲染，对线就能够作屡次渲染，符号也能够屡次，极大提升了渲染的灵活性。可将每一个渲染细节划分出来，某些共用的渲染方式还能够复用。告别了传统一图层一渲染的模式，这就是个性化定制地图的基础，其余渲染内容请查看Api；

2.Mapbox样式在线编辑

这里咱们讲一下Mapbox官方提供的在线样式编辑器的使用。

首先注册一个Mapbox帐户；登录后转到样式编辑器，建立一个本身的样式，这里建议从官方的样式库中选取一个模板。我这里选择了一个基础模板，

image

image

进入编辑页面后，就能够看到他的基础样式地图了，点击你感兴趣的渲染区域，便会弹出点击范围内的全部渲染样式对象。

image

咱们打开路的渲染，修改路图层中的小路的颜色为红色，结果以下

image

编辑器相似于Photoshop的编辑面板，还有一些例如图层选择等功能，本身多摸索一下，这里就不展开了，下面讲一下样式文件的导出：

     返回主页面，点击刚才编辑的样式项目，选择导出功能，即可以将咱们修改好的样式文件导出，也能够导出一些mapbox的经常使用模板，对本身感兴趣的官方样式代码实现作分析，完善本身的样式实现。

image

 

3.Mapbox样式中几个特别关注的四个方法

1.缩放显示

对于某个图层咱们只想他在8-12级的地图级别进行显示，这是提供了minzoom，maxzoom的属性来设定缩放级别，它支持小数，例如minzoom:8.55;

2.属性过滤

咱们有时候图层展现的时候要进行属性的过滤，例如一个图层pio点图层有饭店、学校、咖啡厅等点数据咱们进行定制个性化展现，这时图层数据进行过滤来对不一样类别进行单独的渲染。咱们能够使用Filter 进行过滤，filter提供了好多种过滤条件具体可查看api。

3.分级

前面1中是控制不一样级别图层的显示与否，这边的分级是指不一样级别范围图层渲染方式，例如8-10级是路是细路，10-15级路变成粗的路，随着级别变化做调整，使得整地图缩放起来更加天然。对应的api为stops，下面会给出例子。

4.属性输出

咱们对一些要展现标注内容的属性要进行输出，咱们使用{}进行输出，例如要输出name属性的内容能够{name}即可以输出。

最后给出一个有这四个特性的一个样式例子。

 {
                            //村庄
                            "id": "place-village",
                            "type": "symbol",
                            "source": "germany",
                            "source-layer": "gis_osm_places_07_1",
                            //8级开始显现
                            "minzoom": 8,
                            //超过15级隐藏
                            "maxzoom": 17,
                            //过滤出全部fclass=village的点
                            "filter": [
                                "==",
                                "fclass",
                                "village"
                            ],
                            "layout": {
                             //使用{}输出属性数据
                                "text-field": "{name}",
                                "text-font": [
                                    "Microsoft YaHei",
                                ],
                                "text-max-width": 7,
                                "text-size": {
                                    "base": 1,
                                    //字体默认大小为1，10-16级字体为大小为 11.5
                                    //大于16级字体大小为18
                                    "stops": [
                                        [
                                            10,
                                            11.5
                                        ],
                                        [
                                            16,
                                            18
                                        ]
                                    ]
                                }
                            },
                            "paint": {
                                "text-halo-color": "hsl(0, 0%, 100%)",
                                "text-halo-width": 1.25,
                                "text-color": "hsl(0, 0%, 0%)"
                            },
                            "interactive": true
                        },

4.总结

这一篇主要讲了一下Mapbox的样式的设计原理，以及Mapbox在线样式编辑器的使用，最后分享了一下我在使用Mapbox中认为比较重要的方法，下篇主要讲一下个人离线部署项目的具体实现。

待续。。。。。。。。。。。。。。。。。。。。。

做者：ATtuing

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程