OpenLayers3：一次覆蓋多個？

Question

我正在使用OpenLayers3將地圖集成到網站中。 我添加了一些根據對象位置表示對象的特征。 我在該對象上添加了一個包含數據的覆蓋層，單擊該對象時，它運行良好。 但是，有些事情我不知道該怎么做，我已經嘗試過了，但是沒有用：

我要在地圖上的Foreach對象上，在 其旁邊顯示一種名稱 ，因為除非顯示疊加層，否則無法區分它們。 但是單擊每個對象並不方便，尤其是在智能手機上……（有時，對象彼此非常非常靠近）。

我試圖顯示一個覆蓋。 但似乎一次只能顯示一個疊加層 。 您知道如何規避/避免顯示多個覆蓋圖嗎？ 還是您有一個無法解決的后備解決方案？ 我已經在OpenLayers3網站上查看了API和示例...但是我還沒有找到任何東西。 我的想法不多了。

非常感謝。

發布腳本：在我被要求提供一些代碼之前， 我無法發布任何代碼部分，因為它是針對我正在工作的項目的，所以很明顯，我的代碼是機密的 。 抱歉，謝謝您的理解。 但是我可以處理任何示例或想法以使其適合我的代碼，並查看其是否有效。

Answer 1

看看這個小提琴 。 我正在使用這個小的CSS（ https://github.com/chinchang/hint.css ）幫助器。 疊加層是使用以下功能創建的：

function createOverlay(txt, coord) {
    var div = document.createElement('div');
    div.className = 'marker hint-address hint--always hint--left';
    div.setAttribute('data-hint', txt);

    var overlay = new ol.Overlay({
        element: div,
        offset: [-20, -40],
        position: coord,
        positioning: 'center-center'
    });
    map.addOverlay(overlay);
}

Answer 2

根據OpenLayers3的書 ，“覆蓋層允許[您]在地圖上的任何位置放置任何類型的HTML元素。”

我認為您正在尋找矢量層。 您可以為標簽創建一個新的矢量層，其源將填充根據要素圖層上的數據生成的標簽。 標簽層可以通過樣式功能設置樣式。 將要素添加到要素層源會觸發將標簽添加到標簽層源。 樣式功能從要素屬性獲取文本並顯示它。 這是我如何在LineStrings的末端制作一個帶有標記圓圈的標簽層：

var features = new ol.Collection();
var featureSource = new ol.source.Vector({features:features});
var labels = new ol.Collection();
var labelSource = new ol.source.Vector({features:labels});

function labelStyleFunction(feature, resolution) {
  labelStyle = new ol.style.Style({
    fill: fill,
    stroke: stroke,
    image: new ol.style.Circle({
      radius: 10,
      fill: new ol.style.Fill({
      color: 'rgba(255, 255, 150, 1)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(255, 204, 0, 0.2)',
      width: 1
    })
  }),
  text: new ol.style.Text({
    textAlign: "Start",
    textBaseline: "Middle",
    font: 'Normal 12px Arial',
    text: feature.get("number").toString(),
    fill: fill,
    stroke: lightStroke,
    offsetX: -3,
    offsetY: 5,
    rotation: 0
    })
  })
  return[labelStyle];  // the style function returns an array
}

var featureLayer = new ol.layer.Vector({
    title: "features",  
    source: featureSource,
    style: featureStyle
});

var labelLayer = new ol.layer.Vector({
    title: "feature labels",  
    source: labelSource,
    style:  labelStyleFunction
});       

featureSource.on('addfeature', function() {
     makeLabeledCircles();
});

// make labels from data in features
function makeLabeledCircles() {
  myFeatures = featureSource.getFeatures();
  labelSource.clear();
  for (var i = 0; i < myFeatures.length; i++) {
    var geometry = myFeatures[i].getGeometry();
    coords = geometry.flatCoordinates;
    len = coords.length;
    pointCoords = [coords[len-2], coords[len-1]];
    pointFeature = new ol.Feature({
      geometry: new ol.geom.Point(pointCoords)
    });
    pointFeature.set("number", features[i].get("number"));
    labelSource.addFeature(pointFeature);
  }
}