5.6. mbstyle工作簿结论

我们希望您喜欢这个造型车间。

其他资源:

5.6.1. mbstyle提示和技巧

5.6.2. mbstyle研讨会答案键

在整个讲习班中列出了以下问题,以此作为更深入探讨材料的机会。在查看这里的答案之前,请尽量仔细考虑这些问题。提供问题以教授有价值的技能,例如有机会了解如何使用要素类型样式来控制z顺序,或在用户手册中的何处查找信息。

备注

马上就来

5.6.2.1. 分类

回答 Challenge Classification

  1. 挑战: 创建新样式根据 type .

    ../../../_images/line_type.png

    提示:可用值为“主要公路”、“次要公路”、“道路”和“未知”。

  2. 下面是一个例子:

     {
      "version": 8,
      "name": "line_example",
      "layers": [
        {
          "id": "line_hwy1",
          "source-layer": "ne:roads",
          "type": "line",
          "filter": ["==", "type", "Major Highway"],
          "paint": {
            "line-color": "#000088",
            "line-width": 1.25,
            "line-opacity": 0.25
          }
        },
        {
          "id": "line_hwy2",
          "source-layer": "ne:roads",
          "type": "line",
          "filter": ["==", "type", "Secondary Highway"],
          "paint": {
            "line-color": "#8888AA",
            "line-width": 0.75,
            "line-opacity": 0.25
          }
        },
        {
          "id": "line_road",
          "source-layer": "ne:roads",
          "type": "line",
          "filter": ["==", "type", "Road"],
          "paint": {
            "line-color": "#888888",
            "line-width": 0.75,
            "line-opacity": 0.25
          }
        },
        {
          "id": "line_unk",
          "source-layer": "ne:roads",
          "type": "line",
          "filter": ["==", "type", "Unknown"],
          "paint": {
            "line-color": "#888888",
            "line-width": 0.5,
            "line-opacity": 0.25
          }
        }
      ]
    }
    

5.6.2.2. 一条规则分类

回答 Challenge One Rule Classification

  1. 挑战: 创建一个新样式,并根据道路的比例等级,在单个规则中使用表达式对道路进行分类,而不是使用过滤器对多个规则进行分类。

  2. 本练习需要在MBStyle用户指南中查找信息。

    • 地图盒样式规范 functions 提供详细信息。

5.6.2.3. 标签屏蔽

回答 Challenge Label Shields

  1. 挑战: 请看一看在SLD中文本符号上放置图形的文档,并用mbstyle复制此技术。

    ../../../_images/line_shield.png
  2. 标签屏蔽的使用是geoserver呈现引擎的特定于供应商的功能。本练习的难点在于找出哪些符号布局参数提供了所需的行为,主要是 icon-text-fit 以及允许在标签上绘制文本的各种放置和重叠参数(请参见 symbol layer

    {
      "version": 8,
      "name": "line_example",
      "sprite": "http://localhost:8080/geoserver/styles/sprites",
      "layers": [
        {
          "id": "line_casing",
          "source-layer": "ne:roads",
          "type": "line",
          "paint": {
            "line-color": "#000000",
            "line-width": 3,
          }
        },
        {
          "id": "line_inner",
          "source-layer": "ne:roads",
          "type": "line",
          "paint": {
            "line-color": "#D3D3D3",
            "line-width": 2,
          }
        },
        {
          "id": "label",
          "source-layer": "ne:roads",
          "type": "symbol",
          "layout": {
            "icon-image": "white_square16",
            "icon-text-fit": "width",
            "icon-text-fit-padding": [2, 2, 2, 2],
            "text-field": "{name}",
            "text-font": ["Ariel"],
            "text-font-size": 10,
            "text-ignore-placement": true,
            "text-allow-overlap": true,
            "icon-ignore-placement": true,
            "icon-allow-overlap": true,
            "symbol-placement": "line",
            "symbol-spacing": 0
    
          }
          "paint": {
            "text-color": "black"
          }
        }
      ]
    }
    

5.6.2.4. 间隔

回答 Explore Interval

  1. geoserver的令人兴奋的使用 fill-pattern 符号通过改变所使用的模式来设置主题。

  2. 探索: 使用 间隔 功能到主题 数据等级 .

    ../../../_images/polygon_categorize.png

    例子:

     {
      "version": 8,
      "name": "polygon_example",
      "sprite": "http://localhost:8080/geoserver/styles/sprites",
      "layers": [
        {
          "id": "polygon",
          "source-layer": "ne:states_provinces_shp",
          "type": "fill",
          "paint": {
            "fill-pattern": {
              "property": "datarank",
              "type": "interval",
              "stops": [
                [4, "grey_diag8"],
                [6, "grey_diag16"]
              ]
            }
          }
        }
      ]
    }
    

5.6.2.5. 晕圈

回答 Challenge Halo

  1. Halo示例将填充颜色和不透明度用于静音Halo,而这提高了可读性,但并未引起标签的注意。

    强调的一个常见的设计选择是用对比色勾勒出文本的轮廓。

  2. 挑战: 生成一个在黑色文本周围使用白色光环的地图。

    下面是一个例子:

    {
      "version": 8,
      "name": "polygon_example",
      "layers": [
        {
          "id": "polygon_fill",
          "source-layer": "ne:states_provinces_shp",
          "type": "fill",
          "paint": {
            "fill-color": "#7EB5D3",
            "fill-outline-color": "gray"
          }
        },
        {
          "id": "polygon_label",
          "source-layer": "ne:states_provinces_shp",
          "type": "symbol",
          "layout": {
            "text-field": "{name}",
            "text-anchor": "center"
            "text-max-width": 14,
            "text-font": ["Arial"]
          },
          "paint": {
            "text-color": "white",
            "text-halo-color": "black",
            "text-halo-width": 1
    
          }
        }
      ]
    }
    

5.6.2.6. 使用多个属性创建主题

回答 Challenge Theming using Multiple Attributes

  1. 一个强大的工具正在使用多个属性创建主题。这是一个重要的概念,允许地图阅读器执行“眼球集成”(检测属性值信息之间的相关性)。

  2. 挑战: 结合 地图颜色9数据等级 复制以下地图的示例。

    ../../../_images/polygon_multitheme.png

    这应该是使用 categorical 示例,以及 interval 已提供示例。

    {
      "version": 8,
      "name": "polygon_example",
      "sprite": "http://localhost:8080/geoserver/styles/sprites",
      "layers": [
        {
          "id": "polygon",
          "source-layer": "ne:states_provinces_shp",
          "type": "fill",
          "paint": {
            "fill-color": {
              "property": "mapcolor9",
              "type": "categorical",
              "stops": [
                [1, "#8dd3c7"],
                [2, "#ffffb3"],
                [3, "#bebada"],
                [4, "#fb8072"],
                [5, "#80b1d3"],
                [6, "#fdb462"],
                [7, "#b3de69"],
                [8, "#fccde5"],
                [9, "#d9d9d9"]
              ]
            },
            "fill-outline-color": "gray"
          }
        },
        {
          "id": "polygon",
          "source-layer": "ne:states_provinces_shp",
          "type": "fill",
          "paint": {
            "fill-pattern": {
              "property": "datarank",
              "type": "interval",
              "stops": [
                [4, "grey_diag8"],
                [6, "grey_diag16"]
              ]
            }
          }
        }
      ]
    }
    

5.6.2.7. Z索引的使用

回答 Challenge Use of Z-Index

  1. 使用多个 模拟管柱套管。产生的效果类似于文本光环——在复杂的线条工作周围提供呼吸空间,使其脱颖而出。

  2. 挑战: 使用您所知道的LineString呈现顺序来复制以下映射:

    ../../../_images/polygon_zorder.png

    这在使用mbstyle时要容易得多,其中z顺序由层控制。

    {
       "version": 8,
       "name": "polygon_example",
       "sprite": "http://localhost:8080/geoserver/styles/sprites",
       "layers": [
         {
           "id": "polygon_fill",
           "source-layer": "ne:states_provinces_shp",
           "type": "fill",
           "paint": {
             "fill-color": "lightgrey",
           }
         },
         {
           "id": "polygon_pattern",
           "source-layer": "ne:states_provinces_shp",
           "type": "fill",
           "paint": {
             "fill-pattern": "grey_diag16"
           }
         }
         {
           "id": "polygon_casing",
           "source-layer": "ne:states_provinces_shp",
           "type": "line",
           "paint": {
             "line-color": "lightgrey",
             "line-width": 6
           }
         },
         {
           "id": "polygon_outline",
           "source-layer": "ne:states_provinces_shp",
           "type": "line",
           "paint": {
             "line-color": "black",
             "line-width": 1.5
           }
         }
       ]
     }
    

    图例图形的结构提供了有关正在进行的操作的指示。

5.6.2.8. 几何位置

回答 Challenge Geometry Location

  1. 这个 符号 层可用于渲染任何几何内容。

  2. 挑战: 通过使用 符号 层。

    这可以通过以下两种方式之一实现:

    • 更改多边形层的关联,例如 ne:states_provinces_shp 指向“示例”并使用“层预览”页。

    • 改变 Layer Preview 选项卡到多边形层,例如 ne:states_provinces_shp .

    需要注意的是,每个多边形的质心都被用作一个点位置。

备注

MBStyle中的层与GeoServer中的层不同。地理服务器层是表示地理特征集合的栅格或矢量数据集。MBStyle层是一个样式信息块,类似于SLD符号。

5.6.2.9. 动态符号化

回答 Explore Dynamic Symbolization

  1. icon-image 为动态符号化提供了机会。

    这是通过使用函数 icon-image

    {
      "version": 8,
      "name": "point_example",
      "sprite": "http://localhost:8080/geoserver/styles/sprites",
      "layers": [
        {
          "id": "point_capital",
          "type": "symbol",
          "source-layer": "ne:populated_places",
          "layout": {
            "icon-image": {
              "type": "categorical",
              "property": "FEATURECLA",
              "default": "grey_circle",
              "stops": [
                ["Admin-0 capital", "star"]
              ]
            }
          }
        }
      ]
    }
    
  2. 挑战: 使用此方法重写 动感造型 例子。

    此处提供示例 point_example.json

5.6.2.10. 栅格不透明度

讨论 Challenge Raster Opacity

  1. 有一种快速的方法可以使栅格数据透明,栅格 不透明性 属性的工作方式与向量数据相同。栅格作为一个整体将被绘制为部分透明的,允许来自其他层的内容提供上下文。

  2. 挑战: 你能举出一个例子来说明这一点吗?

    这是很困难的,因为栅格数据通常是作为一个基础地图提供的,图层绘制在顶部。

    这里最明显的例子是天气系统的显示,或者模型输出,比如火灾危险。通过绘制具有一定透明度的栅格,可以为上下文显示陆块。

Previous: 5.5. 栅格
Next: 服务