OpenLayers 3中的自定义叠加层

Question

目前，我正在研究Openlayers 3。

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

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

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

Answer 1

您有多个可能的选择。

A）如果只有一个数据集，则可以使用StyleFunction 。 请参见下面的ol3矢量示例 ，更具体地讲这部分代码：

  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或样式函数。 该函数接收地图视图的要素和当前分辨率作为参数，并在每次渲染（或重新渲染）要素时调用该函数。 返回ol.style.Style或样式对象数组将使用这些样式渲染要素。

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

这是一个更复杂的ol3示例，其中包含样式函数 ，您可以查看这些样式函数 ，并根据分辨率获得一个动态样式示例。 这样可以使您更好地了解如何使用要素属性。

B）如果有多个数据集，则可以为每个数据集创建一个矢量层，并在该层上定义一个唯一的样式对象，这将使要素完全相同。