Openlayers 3添加带有图标和文本的可移动标记

Openlayers 3 Add Movable Marker with Icon and Text

本文关键字：文本 可移动 图标 添加 Openlayers      更新时间：2023-09-26

在OL3中，我成功地制作了一张上面有可移动标记的地图：

var mapVectorSource = new ol.source.Vector({
    features: []
});
var mapVectorLayer = new ol.layer.Vector({
    source: mapVectorSource
});
map.addLayer(mapVectorLayer);
function makeMovable(feature) {
    var modify = new ol.interaction.Modify({
        features: new ol.Collection([feature])
    });
    feature.on('change',function() {
        console.log('Feature Moved To:' + this.getGeometry().getCoordinates());
    }, feature);
    return modify;
}
function createMarker(location, style){
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(location)
    });
    iconFeature.setStyle(style);
    return iconFeature
}
iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 1],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        src: '/static/img/marker-icon.png',
    }))
});
var marker = createMarker(ol.proj.transform([38, 50], 'EPSG:4326', 'EPSG:3857'), iconStyle);
mapVectorSource.addFeature(marker);
var modifyInteraction = makeMovable(marker);
map.addInteraction(modifyInteraction);

但我想添加>10个标记，所以我需要用数字或文本标记它们。有什么方法可以将文本添加到覆盖中吗？如果我检查iconStyle，我会发现它有一个getText()函数，但该函数总是只返回undefined，并且没有附带的setText()函数。这样定义它似乎也很自然：

iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 1],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        src: '/static/img/marker-icon.png',
    })),
    text: "Hello, Marker"    // <- operative line
});

但这似乎是不允许的。另一个自然的选择可能是在样式中附加一个html元素，这样我们就可以呈现任何我们想要的东西，但似乎没有办法做到这一点。

那么，我该如何创建一个带有文本标签的标记呢？

如本例所示，解决方案是使用样式列表，而不是仅使用单个样式。

在这种情况下，它非常简单：

iconStyle = [
    new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 1],
            anchorXUnits: 'fraction',
            anchorYUnits: 'fraction',
            src: '/static/img/marker-icon.png',
        }))
    }),
    new ol.style.Style({
        text: new ol.style.Text({
            text: "Wow such label",
            offsetY: -25,
            fill: new ol.style.Fill({
                color: '#fff'
            })
        })
    })
];
相关文章：