定制覆盖中的OpenLayers 3

目前我的工作的OpenLayers 3.定制覆盖中的OpenLayers 3

我用谷歌地图JavaScript API V3定义叠加添加自定义的标记在地图上HTML DIV。这些标记被分组并绘制在不同的自定义覆盖图中。

现在我试图在OpenLayers 3中实现它，但是我找不到任何解决方案，因为OpenLayers 3中的叠加层在一个叠加层中占用了一个标记。

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

来源

2017-01-02 SHK

我也面临同样的问题。您也可以尝试leaflet.js –

但我需要OpenLayers 3中的解决方案。 – SHK

您有多种可能的选择。

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）如果你有多个数据集，那么你就可以创建每个数据集一个向量层与层上定义一个风格独特的对象，这将使该功能都是一样的。

来源

2017-01-02 14:06:18

感谢您的回复，但我需要为每个标记使用html div来存储有关标记的信息。我不知道覆盖图的样式如何可以帮助解决这个问题。 – SHK

如果您查看ol3的向量示例（答案中的示例），您会看到当鼠标悬停在显示信息的国家/地区时。这些渲染使用ol.Feature，而不是ol.Overlay。我认为这对你来说可能是一个好方法。 –

定制覆盖中的OpenLayers 3

回答

相关问题