5.1. mbstyle快速启动

在最后一节中，我们看到了OGC如何使用XML文档（称为SLD文件）定义样式。

现在，我们将使用一个工具来生成SLD文件，更详细地探讨geoserver样式。这个 MBStyle geoserver扩展用于使用 Mabbox样式 造型语言。用这种语言编写的样式也可以用于样式 vector tiles 在客户端应用程序中。

使用mbstyle扩展来定义样式会导致较短的示例更容易理解。在任何时候，我们都可以查看生成的SLD文件。

参考文献：

5.1.1. mbstyle语法

本节为不熟悉JSON的映射专业人员提供了MBStyle语法的快速介绍。

5.1.1.1. JSON语法

所有MBStyles都包含一个JSON文档。JSON文档中有三种类型的结构：

  1. 对象，键值对的集合。所有JSON文档都是JSON对象。

  2. 数组，值的集合。

  3. 值、键值对中的值或数组中的条目。值可以是对象、数组、字符串、数字， true ， false 或 null .

对象

用大括号括起来并用逗号分隔的键-值对的集合。键用引号括起来，与值之间用冒号隔开。

数组

由方括号括起来并用逗号分隔的集合值。

弦

文本值。必须用引号括起来。

数

数值。不能用引号括起来。

布尔

true 或 false .

无效的

null .表示未定义或未设置的值。

5.1.1.2. MBStyle规范

这个 Mapbox Style specification 定义MBStyles必须遵循的一些附加规则。

5.1.1.2.1. 根级别属性

地图框样式的根级别属性指定地图的图层、瓦片源和其他资源，以及在其他地方未指定时初始相机位置的默认值。

所有mbstyle都需要以下根级别属性。可以在规范中找到支持但不需要的其他根级别属性。

version

要使用的MapBox样式规范的版本。必须设置为 8 .

name

样式的名称。

sources

定义源数据的对象。不由geoserver使用。

layers

层样式对象的数组

例如：：：

{
    "version": 8,
    "name": "Streets",
    "sources": {...},
    "layers": [...]
}

5.1.1.2.2. 来源

sources参数由一组命名的源组成，这些源定义要应用样式的向量图块数据。这仅用于客户端应用程序中使用的mbstyle，并且被geoserver忽略。如果只使用mbstyles在geoserver中设置图层样式，则不需要sources参数。但是，如果您还想将MBStyles用于客户端样式，则需要sources参数。

地理服务器矢量图块源的定义如下：

{
  "cookbook": {
    "type": "vector",
    "tiles": [
      "http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=cookbook&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}"
    ],
    "minZoom": 0,
    "maxZoom": 14
  }
}

5.1.1.2.3. 层

layers参数包含mbstyle中的主要布局和样式信息。图层列表中的每个图层都是一个独立的样式信息块。图层按顺序应用，因此图层列表中的最后一个图层将在图像的顶部呈现。

备注

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

<示例>

参考文献：

5.1.2. 将mbstyle与sld进行比较

MBStyle扩展基于相同的geoserver渲染引擎构建，提供对SLD大部分功能的访问。这两种方法使用的术语稍有不同：SLD使用的术语对绘图专业人员来说很熟悉，而MBStyle使用的是Web开发人员更熟悉的想法。

5.1.2.1. SLD风格

下面是一个例子 SLD file 供参考：

 1<?xml version="1.0" encoding="ISO-8859-1"?>
 2<StyledLayerDescriptor version="1.0.0"
 3 xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
 4 xmlns="http://www.opengis.net/sld"
 5 xmlns:ogc="http://www.opengis.net/ogc"
 6 xmlns:xlink="http://www.w3.org/1999/xlink"
 7 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 8  <NamedLayer>
 9    <Name>airports</Name>
10    <UserStyle>
11      <Title>Airports</Title>
12      <FeatureTypeStyle>
13        <Rule>
14          <Name>airports</Name>
15          <Title>Airports</Title>
16          <PointSymbolizer>
17            <Graphic>
18              <ExternalGraphic>
19                <OnlineResource xlink:type="simple"
20                xlink:href="airport.svg" />
21                <Format>image/svg</Format>
22              </ExternalGraphic>
23              <Size>16</Size>
24            </Graphic>
25          </PointSymbolizer>
26        </Rule>
27      </FeatureTypeStyle>
28    </UserStyle>
29  </NamedLayer>
30</StyledLayerDescriptor>

5.1.2.2. mbstyle样式

下面是与 MBStyle ：

 1{
 2  "version": 8,
 3  "name": "airports",
 4  "sprite": "http://localhost:8080/geoserver/styles/sprites",
 5  "layers": [
 6      {
 7          "id": "airports",
 8          "type": "symbol",
 9          "layout": {
10              "icon-image": "airport"
11          }
12      }
13  ]
14}

我们使用点符号来表示我们希望将此内容绘制为 Point （SLD中的第16行，MBStyle中的第8行）。点符号声明一个包含URL的外部图形 airports.svg 指示应绘制的图像（SLD中的第20行，MBStyle中的第10行）。

备注

MBStyles不是单独引用许多不同的图标，而是使用一个包含该样式所有必要图标的精灵工作表。这是由 sprite 属性设置在样式的顶级。

5.1.3. 旅游

为了确认一切正常，让我们重现上面的机场风格。

  1. 导航到 风格 页。

  2. 每次编辑样式时，都会替换关联的SLD文件的内容。我们将创造一种新的风格，而不是破坏我们现有的任何风格。单击 Add a new style 并选择以下选项：

    姓名：

    airports0

    工作区：

    （留空）

    格式：

    MBStyle

  3. 用我们的AirPort MBStyle示例替换初始的MBStyle定义，然后单击 Apply ：

    {
  "version": 8,
  "name": "airports",
  "sprite": "http://localhost:8080/geoserver/styles/sprites",
  "layers": [
      {
          "id": "airports",
          "type": "symbol",
          "layout": {
              "icon-image": "airport"
          }
      }
  ]
}

  4. 单击 Layer Preview 选项卡以预览样式。我们想要预览机场图层，因此单击当前图层的名称并选择 ne:airports 从出现的列表中删除。您可以使用鼠标键平移和滚动滚轮来更改比例。

    ../../../_images/css_02_choose_data.png

    选择机场层

    ../../../_images/css_06_preview.png

    层预览

  5. 点击 Layer Data 用于所选数据的摘要。

    ../../../_images/css_07_data.png

    层属性

5.1.4. 奖金

早点完成？现在请帮助你的邻居，这样我们就可以继续工作了。

如果你真的陷入困境，请考虑以下挑战，而不是跳过前面。

5.1.4.1. 浏览数据

  1. 返回到 Data 选项卡并使用 Compute 链接以确定 标尺 属性。

5.1.4.2. 挑战比较SLD生成

  1. 其余的API可用于直接查看yaml文件。

浏览器：

命令行：

curl -v -u admin:geoserver -XGET http://localhost:8080/geoserver/rest/styles/airports0.json

  1. REST API也可用于生成SLD文件：

    浏览器：

命令行：

curl -v -u admin:geoserver -XGET http://localhost:8080/geoserver/rest/styles/airports0.sld?pretty=true

  1. 将生成的SLD与上面手写的SLD进行比较 SLD file 以此为例？

    挑战： 你能发现什么区别？

Previous: 5. mbstyle样式工作簿
Next: 5.2. 线