zoukankan      html  css  js  c++  java
  • 开源方案搭建可离线的精美矢量切片地图服务-4.Mapbox样式设计

     

    系列文章目录

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

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

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

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

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

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

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

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

    项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵)。

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

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

    1.Mapbox设计思想

    下面我们以一条路的设计为基础进行分析。本身这只是线的矢量数据,我们要对它进行丰富的渲染,大体上分为四个部分:

    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级的地图级别进行显示,这是提供了minzoommaxzoom的属性来设定缩放级别,它支持小数,例如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

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

  • 相关阅读:
    USB HID Report Descriptor 报告描述符详解
    USB 管道 && 端点
    USB描述符解析-->枚举.
    USB HID介绍
    USB2.0速度识别
    spring core
    好妈妈【第三章】一生受用的品格教育,不止孩子需要,父母也需要。
    好妈妈【第二章】把学习做成轻松的事,父母如何提升孩子的学习成绩
    好妈妈【第一章】提高爱的质量,小学前的儿童教育
    Java日志系统
  • 原文地址:https://www.cnblogs.com/ATtuing/p/9102455.html
Copyright © 2011-2022 走看看