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）如果有多個數據集，則可以為每個數據集創建一個矢量層，並在該層上定義一個唯一的樣式對象，這將使要素完全相同。