Question

我正在使用OpenLayers3将地图集成到网站中。我根据位置添加了一些表示对象的功能。我点击了该对象时添加了一个包含该对象数据的叠加层，并且它工作正常。但是，有一些我不知道该怎么做的事情，我已经尝试但是它没有用：

地图上的Foreach对象，我希望旁边有一种标签显示其名称 - 因为除非显示叠加层，否则无法区分它们。但点击每个物体都不方便，特别是在智能手机上......（有时，物体彼此非常接近）。

我尝试为其显示叠加层。但似乎一次只能显示一个叠加。你知道如何规避/避免显示多个叠加层吗？或者，如果无法完成，您是否有后备解决方案？我查看了OpenLayers3网站上的API和示例......但我还没找到。我的想法已经不多了。

非常感谢。

Post scriptum：在我被要求提供一些代码之前，我无法发布代码的任何部分，因为它适用于我正在工作的项目，所以很明显，我的代码是机密即可。对不起，谢谢你的理解。但我可以处理任何示例或想法，使其适合我的代码，看看它是否正常工作。

Answer 1

看看这个fiddle。我正在使用这个小小的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

根据The Book of OpenLayers3，＆＃34;叠加层允许[你]在某个位置将任何类型的HTML元素放置在地图中。＆＃34;

我认为你正在寻找一个矢量图层。您可以为标签创建新的矢量图层，其源将使用从要素图层上的数据生成的标签进行填充。标签图层可以通过样式函数设置样式。向要素图层源添加要素会触发向标注图层源添加标注。样式函数从要素属性中抓取文本并显示它。以下是我为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);
  }
}

OpenLayers3：一次覆盖多个叠加层？

2 个答案: