OpenLayers 3 中的自定义叠加层

Question

目前我正在开发 Openlayers 3。

我在 Google maps Javascript api v3 中使用自定义叠加层将自定义标记添加为地图上的 html div。这些标记被分组并绘制在不同的自定义叠加层中。

现在我尝试在 OpenLayers 3 中实现相同的功能，但我找不到任何解决方案，因为 OpenLayers 3 中的叠加层在一个叠加层中采用一个标记。

我可以在 OpenLayers 3 中对叠加层进行分组以便对标记进行分组吗？或者还有其他选择吗？

Answer 1

您有多种可能的选择。

A)如果您只有一个数据集，那么您可以使用StyleFunction。看这个ol3 vector example，更具体地说是这段代码：

  var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: 'https://openlayers.org/en/v3.20.1/examples/data/geojson/countries.geojson',
      format: new ol.format.GeoJSON()
    }),
    style: function(feature, resolution) {
      style.getText().setText(resolution < 5000 ? feature.get('name') : '');
      return style;
    }
  });

看到style 属性了吗？它可以是ol.style.Style 或样式函数，如上所示。该函数接收地图视图的特征和当前分辨率作为参数，并在每次渲染（或重新渲染）特征时调用。返回ol.style.Style 或样式对象数组将使用/这些样式呈现特征。

该功能可以具有独特的属性，即feature.getProperties()。在功能中使用尽可能多的属性，您可以返回一个独特的样式对象数组。

这里有一个更多complex ol3 example featuring style functions，您可以查看并拥有一个取决于分辨率的动态样式示例。这可以让您更好地了解可以使用特征属性做什么。

B)如果您有多个数据集，那么您可以为每个数据集创建一个矢量图层，并在该层上定义一个独特的样式对象，这将呈现所有特征一样的。