5.4. 点¶

MBStyle样式巡更的下一站是点的表示。

点符号学回顾：

点仅用于表示位置，不形成形状。线条的视觉宽度不会随比例而变化。
SLD使用 PointSymbolizer 记录如何绘制线条形状。
点的标签定位到点位置。

由于点本身没有固有的形状，因此重点放在用适当的符号标记位置上。

参考文献：

这个练习利用了 ne:populated_places 层。

导航到风格页。
点击 Add a new style 并选择以下选项：

姓名：

point_example

工作区：

No workspace

格式：

MBStyle

将初始MBStyle定义替换为以下内容，然后单击 apply ：

{
  "version": 8,
  "name": "point_example",
  "sprite": "http://localhost:8080/geoserver/styles/sprites"
  "layers": [
    {
      "id": "point_example",
      "type": "symbol",
      "source-layer": "ne:populated_places",
      "layout": {
        "icon-image": "grey_circle",
      }
    }
  ]
}

并使用 Layer Preview 选项卡以预览结果。

5.4.1. 雪碧¶

这个符号图层控制点数据的显示。点通常用 icon-image .

MBStyle使用在样式顶层定义的精灵工作表来定义一组图标。您可以查看Sprite-Sheet中所有图标的名称，方法是查看其json定义，网址为 http://localhost:8080/geoserver/styles/sprites.json 。

将样式使用的符号更改为正方形：

{
  "version": 8,
  "name": "point_example",
  "sprite": "http://localhost:8080/geoserver/styles/sprites"
  "layers": [
    {
      "id": "point_example",
      "type": "symbol",
      "source-layer": "ne:populated_places",
      "layout": {
        "icon-image": "grey_square16",
      }
    }
  ]
}

地图预览：

在继续之前，我们将使用选择器将显示的数据量减少到合理的水平。

{
  "version": 8,
  "name": "point_example",
  "sprite": "http://localhost:8080/geoserver/styles/sprites"
  "layers": [
    {
      "id": "point_example",
      "type": "symbol",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 1],
      "layout": {
        "icon-image": "grey_square16",
      }
    }
  ]
}

使图像更加清晰：

其他属性可用于控制图标的演示文稿：

这个 icon-size 属性用于控制符号大小。

这个 icon-rotate 属性控制方向，接受以度为单位的输入。

同时尝试这两种设置：

{
  "version": 8,
  "name": "point_example",
  "sprite": "http://localhost:8080/geoserver/styles/sprites"
  "layers": [
    {
      "id": "point_example",
      "type": "symbol",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 1],
      "layout": {
        "icon-image": "grey_square16",
        "icon-size": 0.75,
        "icon-rotate": 45
      }
    }
  ]
}

结果在每个位置用菱形标记：

5.4.2. 圆圈¶

另一种显示点数据的方法是使用圆圈层。圆形层让我们为一个简单的圆形选择大小和颜色，而不是从预设的sprite工作表中渲染一个图标。

修改样式以使用圆圈层：

{
  "version": 8,
  "name": "point_example",
  "layers": [
    {
      "id": "point_example",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    }
  ]
}

并使用 Layer Preview 选项卡以预览结果。

5.4.3. 标签¶

标签现在已经熟悉我们的经验线串和多边形。

这个 symbol 使用 label 特性用于标记点位置。

替换 point_example 包括以下内容：

{
  "version": 8,
  "name": "point_example",
  "layers": [
     {
      "id": "point_circle",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    },
    {
      "id": "point_label",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 1],
      "type": "symbol",
      "layout": {
        "text-field": "{NAME}"
      },
      "paint": {
        "text-color": "gray"
      }
    }
  ]
}

确认结果 Map 预览。
每个标签都是从提供的点开始绘制的——这是不幸的，因为它确保每个标签将与使用的符号重叠。为了解决这个限制，我们将使用mbstyle控件来放置标签：

text-anchor 提供一个值，该值表示标签相对于起始标签位置的对齐方式。

text-translate 用于提供使用和X和Y偏移的初始位移。对于点，建议使用此偏移调整符号所用区域的标签位置。

备注

财产 text-anchor 定义相对于由结果标签形成的边界框的定位点位置。定位点位置将捕捉到由点位置和位移偏移生成的标签位置。

同时使用这两个工具，我们可以将标签置于符号下方的中心，注意所用的位移提供了符号尺寸所需区域之外的偏移量。

{
  "version": 8,
  "name": "point_example",
  "layers": [
    {
      "id": "point_circle",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    },
    {
      "id": "point_label",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 1],
      "type": "symbol",
      "layout": {
        "text-field": "{NAME}",
        "text-anchor": "top"
      },
      "paint": {
        "text-color": "black",
        "text-translate": [0, 12]
      }
    }
  ]
}

每个标签现在都放在标记下面。

剩下的一个问题是标签和符号之间的重叠。

mbstyle提供各种参数来控制标签呈现和冲突解决，防止标签重叠任何符号。

icon-allow-overlap 和 text-allow-overlap 允许呈现引擎在以前的标签和图标上绘制指示符号。

icon-ignore-placement 和 text-ignore-placement 允许呈现引擎在指示符号的顶部绘制标签和图标。

icon-padding 和 text-padding 告诉渲染引擎在图标和地图上的文本之间提供最小距离，确保它们不会与其他标签或图标重叠。

这个 -allow-overlap 和 -ignore-placement 默认情况下，参数为假，这是我们想要的行为。更新我们的示例以使用 text-padding ：

{
  "version": 8,
  "name": "point_example",
  "layers": [
    {
      "id": "point_circle",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    },
    {
      "id": "point_label",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 1],
      "type": "symbol",
      "layout": {
        "text-field": "{NAME}",
        "text-anchor": "top",
        "text-padding": 2
      },
      "paint": {
        "text-color": "black",
        "text-translate": [0, 12]
      }
    }
  ]
}

使图像更加清晰：

5.4.4. 动感造型¶

我们会很快使用 微型变焦镜头 和 最大缩放 基于scaler和k选择器选择内容。

{
  "version": 8,
  "name": "point_example",
  "layers": [
    {
      "id": "point_7",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 7],
      "minzoom": 6,
      "maxzoom": 7,
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    },
    {
      "id": "point_5",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 5],
      "minzoom": 5,
      "maxzoom": 6,
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    },
    {
      "id": "point_4",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 4],
      "minzoom": 4,
      "maxzoom": 5,
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    },
    {
      "id": "point_3",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 3],
      "minzoom": 3,
      "maxzoom": 4,
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    },
    {
      "id": "point_2",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 2],
      "minzoom": 2,
      "maxzoom": 3,
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    },
    {
      "id": "point_1",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "filter": ["<", "SCALERANK", 1],
      "maxzoom": 2,
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    },
    {
      "id": "point_0",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "minzoom": 7,
      "paint": {
        "circle-color": "gray",
        "circle-radius": 8
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    }
  ]
}

点击 Submit 更新 Map 在每一步之后。

要添加标签，我们可以为每个现有的圆图层添加一个符号图层。

{
   "version": 8,
   "name": "point_example",
   "layers": [
     {
       "id": "point_7",
       "type": "circle",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 7],
       "minzoom": 6,
       "maxzoom": 7,
       "paint": {
         "circle-color": "gray",
         "circle-radius": 8
         "circle-stroke-color": "black",
         "circle-stroke-width": 1
       }
     },
     {
       "id": "point_7_text",
       "type": "symbol",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 7],
       "minzoom": 6,
       "maxzoom": 7,
       "layout": {
         "text-field": "{NAME}",
         "text-font": ["Arial"],
         "text-size": 10
       },
       "paint": {
         "text-color": "black"
       }
     },
     {
       "id": "point_5",
       "type": "circle",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 5],
       "minzoom": 5,
       "maxzoom": 6,
       "paint": {
         "circle-color": "gray",
         "circle-radius": 8
         "circle-stroke-color": "black",
         "circle-stroke-width": 1
       }
     },
     {
       "id": "point_5_text",
       "type": "symbol",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 5],
       "minzoom": 5,
       "maxzoom": 6,
       "layout": {
         "text-field": "{NAME}",
         "text-font": ["Arial"],
         "text-size": 10
       },
       "paint": {
         "text-color": "black"
       }
     },
     {
       "id": "point_4",
       "type": "circle",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 4],
       "minzoom": 4,
       "maxzoom": 5,
       "paint": {
         "circle-color": "gray",
         "circle-radius": 8
         "circle-stroke-color": "black",
         "circle-stroke-width": 1
       }
     },
     {
       "id": "point_4_text",
       "type": "symbol",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 4],
       "minzoom": 4,
       "maxzoom": 5,
       "layout": {
         "text-field": "{NAME}",
         "text-font": ["Arial"],
         "text-size": 10
       },
       "paint": {
         "text-color": "black"
       }
     },
     {
       "id": "point_3",
       "type": "circle",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 3],
       "minzoom": 3,
       "maxzoom": 4,
       "paint": {
         "circle-color": "gray",
         "circle-radius": 8
         "circle-stroke-color": "black",
         "circle-stroke-width": 1
       }
     },
     {
       "id": "point_3_text",
       "type": "symbol",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 3],
       "minzoom": 3,
       "maxzoom": 4,
       "layout": {
         "text-field": "{NAME}",
         "text-font": ["Arial"],
         "text-size": 10
       },
       "paint": {
         "text-color": "black"
       }
     },
     {
       "id": "point_2",
       "type": "circle",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 2],
       "minzoom": 2,
       "maxzoom": 3,
       "paint": {
         "circle-color": "gray",
         "circle-radius": 8
         "circle-stroke-color": "black",
         "circle-stroke-width": 1
       }
     },
     {
       "id": "point_2_text",
       "type": "symbol",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 2],
       "minzoom": 2,
       "maxzoom": 3,
       "layout": {
         "text-field": "{NAME}",
         "text-font": ["Arial"],
         "text-size": 10
       },
       "paint": {
         "text-color": "black"
       }
     },
     {
       "id": "point_1",
       "type": "circle",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 1],
       "maxzoom": 2,
       "paint": {
         "circle-color": "gray",
         "circle-radius": 8
         "circle-stroke-color": "black",
         "circle-stroke-width": 1
       }
     },
     {
       "id": "point_1_text",
       "type": "symbol",
       "source-layer": "ne:populated_places",
       "filter": ["<", "SCALERANK", 1],
       "maxzoom": 2,
       "layout": {
         "text-field": "{NAME}",
         "text-font": ["Arial"],
         "text-size": 10
       },
       "paint": {
         "text-color": "black"
       }
     },
     {
       "id": "point_0",
       "type": "circle",
       "source-layer": "ne:populated_places",
       "minzoom": 7,
       "paint": {
         "circle-color": "gray",
         "circle-radius": 8
         "circle-stroke-color": "black",
         "circle-stroke-width": 1
       }
     },
     {
       "id": "point_0_text",
       "type": "symbol",
       "source-layer": "ne:populated_places",
       "minzoom": 7,
       "layout": {
         "text-field": "{NAME}",
         "text-font": ["Arial"],
         "text-size": 10
       },
       "paint": {
         "text-color": "black"
       }
     }
   ]
 }

我们将使用 text-offset 将标签放置在每个符号上方，以及 text-padding 在我们的标签周围留出一些额外的空间。

将以下行添加到每个层：

{
  "id": "point_example",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "minzoom": 7,
  "layout": {
    "text-field": "{NAME}",
    "text-font": ["Arial"],
    "text-size": 10,
    "text-padding": 2
  },
  "paint": {
    "text-color": "black",
    "text-translate": [0, -12]
  }
}

现在我们已经清楚地标记了我们的城市，放大到您熟悉的区域，我们可以逐个查看符号的变化。

我们使用前面的表达式来生成适当的标签。表达式也可用于许多其他属性设置。

这个 ne:populated_places 图层提供了几个特定的属性，以使样式更简单：

SCALERANK ：我们已使用此属性控制显示的详细程度
FEATURECLA ：用于表示不同类型的城市。我们查一下 Admin-0 capital 城市。

我们要做的第一件事就是计算点 size 使用快速表达式：

{
  "property": "SCALERANK",
  "type": "exponential",
  "stops": [
    [0, 4.5],
    [10, 2.5]
  ]
},

此表达式的大小应介于5和9之间，并且需要同时应用于这两个点 size 和标签取代 .

{
  "id": "point_0",
  "type": "circle",
  "source-layer": "ne:populated_places",
  "minzoom": 7,
  "paint": {
    "circle-color": "gray",
    "circle-radius": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, 4.5],
        [10, 2.5]
      ]
    },
    "circle-stroke-color": "black",
    "circle-stroke-width": 1
  }
}

{
  "id": "point_0_text",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "minzoom": 7,
  "layout": {
    "text-field": "{NAME}",
    "text-font": ["Arial"],
    "text-size": 10,
    "text-padding": 2
  },
  "paint": {
    "text-color": "black",
    "text-translate": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, [0, -8]],
        [10, [0, -6]]
      ]
    },
  }
}

../../../_images/point_07_expression.png

接下来我们可以使用 FEATURECLA 检查首都。

在规则名单：

{
  "id": "point_capital",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "filter": ["all",["<", "SCALERANK", 2], ["==", "FEATURECLA", "Admin-0 capital"]]
  "minzoom": 2,
  "layout": {
    "icon-image": "star",
    "text-field": "{NAME}",
    "text-font": ["Arial"],
    "text-size": 10,
    "text-padding": 2
  },
  "paint": {
    "text-color": "black",
    "text-translate": [0, -12]
  }
}

如果样式不存在，还要将精灵表单URL添加到样式的顶部：

{
  "version": 8,
  "name": "point_example",
  "sprite": "http://localhost:8080/geoserver/styles/sprites",
}

更新人口稠密地区选择器以忽略首都：

{
  "id": "point_7",
  "type": "circle",
  "source-layer": "ne:populated_places",
  "filter": ["all", ["<", "SCALERANK", 7], ["!=", "FEATURECLA", "Admin-0 capital"]],
  "minzoom": 6,
  "maxzoom": 7,
  "paint": {
    "circle-color": "gray",
    "circle-radius": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, 4.5],
        [10, 2.5]
      ]
    },
    "circle-stroke-color": "black",
    "circle-stroke-width": 1
  }
}

{
  "id": "point_7_text",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "filter": ["all", ["<", "SCALERANK", 7], ["!=", "FEATURECLA", "Admin-0 capital"]],
  "minzoom": 6,
  "maxzoom": 7,
  "layout": {
    "text-field": "{NAME}",
    "text-font": ["Arial"],
    "text-size": 10,
    "text-padding": 2
  },
  "paint": {
    "text-color": "black",
    "text-translate": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, [0, -8]],
        [10, [0, -6]]
      ]
    }
  }
}

{
  "id": "point_5",
  "type": "circle",
  "source-layer": "ne:populated_places",
  "filter": ["all", ["<", "SCALERANK", 5], ["!=", "FEATURECLA", "Admin-0 capital"]],
  "minzoom": 5,
  "maxzoom": 6,
  "paint": {
    "circle-color": "gray",
    "circle-radius": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, 4.5],
        [10, 2.5]
      ]
    },
    "circle-stroke-color": "black",
    "circle-stroke-width": 1
  }
}

{
  "id": "point_5_text",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "filter": ["all", ["<", "SCALERANK", 5], ["!=", "FEATURECLA", "Admin-0 capital"]],
  "minzoom": 5,
  "maxzoom": 6,
  "layout": {
    "text-field": "{NAME}",
    "text-font": ["Arial"],
    "text-size": 10,
    "text-padding": 2
  },
  "paint": {
    "text-color": "black",
    "text-translate": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, [0, -8]],
        [10, [0, -6]]
      ]
    }
  }
}

{
  "id": "point_4",
  "type": "circle",
  "source-layer": "ne:populated_places",
  "filter": ["all", ["<", "SCALERANK", 4], ["!=", "FEATURECLA", "Admin-0 capital"]],
  "minzoom": 4,
  "maxzoom": 5,
  "paint": {
    "circle-color": "gray",
    "circle-radius": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, 4.5],
        [10, 2.5]
      ]
    },
    "circle-stroke-color": "black",
    "circle-stroke-width": 1
  }
}

{
  "id": "point_4_text",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "filter": ["all", ["<", "SCALERANK", 4], ["!=", "FEATURECLA", "Admin-0 capital"]],
  "minzoom": 4,
  "maxzoom": 5,
  "layout": {
    "text-field": "{NAME}",
    "text-font": ["Arial"],
    "text-size": 10,
    "text-padding": 2
  },
  "paint": {
    "text-color": "black",
    "text-translate": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, [0, -8]],
        [10, [0, -6]]
      ]
    }
  }
}

{
  "id": "point_3",
  "type": "circle",
  "source-layer": "ne:populated_places",
  "filter": ["all", ["<", "SCALERANK", 3], ["!=", "FEATURECLA", "Admin-0 capital"]],
  "minzoom": 3,
  "maxzoom": 4,
  "paint": {
    "circle-color": "gray",
    "circle-radius": 8
    "circle-stroke-color": "black",
    "circle-stroke-width": 1
  }
}

{
  "id": "point_3_text",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "filter": ["all", ["<", "SCALERANK", 3], ["!=", "FEATURECLA", "Admin-0 capital"]],
  "minzoom": 3,
  "maxzoom": 4,
  "layout": {
    "text-field": "{NAME}",
    "text-font": ["Arial"],
    "text-size": 10,
    "text-padding": 2
  },
  "paint": {
    "text-color": "black",
    "text-translate": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, [0, -8]],
        [10, [0, -6]]
      ]
    }
  }
}

{
  "id": "point_2",
  "type": "circle",
  "source-layer": "ne:populated_places",
  "filter": ["all", ["<", "SCALERANK", 2], ["!=", "FEATURECLA", "Admin-0 capital"]],
  "minzoom": 2,
  "maxzoom": 3,
  "paint": {
    "circle-color": "gray",
    "circle-radius": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, 4.5],
        [10, 2.5]
      ]
    },
    "circle-stroke-color": "black",
    "circle-stroke-width": 1
  }
}

{
  "id": "point_2_text",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "filter": ["all", ["<", "SCALERANK", 2], ["!=", "FEATURECLA", "Admin-0 capital"]],
  "minzoom": 2,
  "maxzoom": 3,
  "layout": {
    "text-field": "{NAME}",
    "text-font": ["Arial"],
    "text-size": 10,
    "text-padding": 2
  },
  "paint": {
    "text-color": "black",
    "text-translate": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, [0, -8]],
        [10, [0, -6]]
      ]
    }
  }
}

{
  "id": "point_1",
  "type": "circle",
  "source-layer": "ne:populated_places",
  "filter": ["<", "SCALERANK", 1],
  "maxzoom": 2,
  "paint": {
    "circle-color": "gray",
    "circle-radius": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, 4.5],
        [10, 2.5]
      ]
    },
    "circle-stroke-color": "black",
    "circle-stroke-width": 1
  }
}

{
  "id": "point_1_text",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "filter": ["<", "SCALERANK", 1],
  "maxzoom": 2,
  "layout": {
    "text-field": "{NAME}",
    "text-font": ["Arial"],
    "text-size": 10,
    "text-padding": 2
  },
  "paint": {
    "text-color": "black",
    "text-translate": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, [0, -8]],
        [10, [0, -6]]
      ]
    }
  }
}

{
  "id": "point_0",
  "type": "circle",
  "source-layer": "ne:populated_places",
  "filter": ["!=", "FEATURECLA", "Admin-0 capital"],
  "minzoom": 7,
  "paint": {
    "circle-color": "gray",
    "circle-radius": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, 4.5],
        [10, 2.5]
      ]
    },
    "circle-stroke-color": "black",
    "circle-stroke-width": 1
  }
}

{
  "id": "point_0_text",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "filter": ["!=", "FEATURECLA", "Admin-0 capital"],
  "minzoom": 7,
  "layout": {
    "text-field": "{NAME}",
    "text-font": ["Arial"],
    "text-size": 10,
    "text-padding": 2
  },
  "paint": {
    "text-color": "black",
    "text-translate": {
      "property": "SCALERANK",
      "type": "exponential",
      "stops": [
        [0, [0, -8]],
        [10, [0, -6]]
      ]
    }
  }
}

如果您想检查您的工作，最终文件在这里： point_example.mbstyle

5.4.5. 奖金¶

5.4.5.1. 挑战几何位置¶

这个 mark 属性可用于呈现任何几何内容。
挑战： 通过使用 mark 财产。

备注

回答 discussed 在工作簿的末尾。

5.4.5.2. 探索动态符号化¶

我们做了很多工作来设置选择器，以便在首都的星和圆之间进行选择。

这种方法在单独应用时非常简单：

{
  "version": 8,
  "name": "point_example",
  "sprite": "http://localhost:8080/geoserver/styles/sprites",
  "layers": [
    {
      "id": "point_capital",
      "type": "symbol",
      "source-layer": "ne:populated_places",
      "filter": ["==", "FEATURECLA", "Admin-0 capital"]
      "minzoom": 2,
      "layout": {
        "icon-image": "star",
      }
    },
    {
      "id": "point_0",
      "type": "circle",
      "source-layer": "ne:populated_places",
      "filter": ["!=", "FEATURECLA", "Admin-0 capital"],
      "minzoom": 7,
      "paint": {
        "circle-color": "gray",
        "circle-radius": 4,
        "circle-stroke-color": "black",
        "circle-stroke-width": 1
      }
    }
  ]
}

当与检查另一个属性或检查@scale（如我们的示例中所示）结合使用时，这种方法可能很快导致许多规则难以保持直线。

仔细看看， icon-image 使用字符串表示：

{
  "id": "point_capital",
  "type": "symbol",
  "source-layer": "ne:populated_places",
  "filter": ["==", "FEATURECLA", "Admin-0 capital"]
  "minzoom": 2,
  "layout": {
    "icon-image": "star",
  }
}

在SLD中表示为：

<sld:PointSymbolizer uom="http://www.opengeospatial.org/se/units/pixel">
  <sld:Graphic>
    <sld:ExternalGraphic>
      <sld:OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="http://localhost:8080/geoserver/styles/sprites#icon=${strURLEncode('star')}&size=${strURLEncode(1.0)}"/>
      <sld:Format>mbsprite</sld:Format>
    </sld:ExternalGraphic>
  </sld:Graphic>
</sld:PointSymbolizer>

MBStyle提供了一个动态符号化的机会。

这是通过使用函数 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"]
          ]
        }
      }
    }
  ]
}

在SLD中表示为：

<sld:PointSymbolizer uom="http://www.opengeospatial.org/se/units/pixel">
  <sld:Graphic>
    <sld:ExternalGraphic>
      <sld:OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="http://localhost:8080/geoserver/styles/sprites#icon=${strURLEncode(DefaultIfNull(Recode(FEATURECLA,'Admin-0 capital','star'),'grey_circle'))}&size=${strURLEncode(1.0)}"/>
      <sld:Format>mbsprite</sld:Format>
    </sld:ExternalGraphic>
  </sld:Graphic>
</sld:PointSymbolizer>

挑战： 使用此方法重写 动感造型 例子。

备注

回答 provided 在工作簿的末尾。

Previous: 5.3. 多边形

Next: 5.5. 栅格

5.4. 点¶

5.4.1. 雪碧¶

5.4.2. 圆圈¶

5.4.3. 标签¶

5.4.4. 动感造型¶

5.4.5. 奖金¶

5.4.5.1. 挑战几何位置¶

5.4.5.2. 探索动态符号化¶

Table Of Contents

Continue Reading

This Page

Known GeoServer issues

姓名：	`point_example`
工作区：	`No workspace`
格式：	`MBStyle`