javascript - Openlayers 3 アイコンとテキストで可動マーカーを追加

Question

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
});

しかし、それは許可されていないようです。もう 1 つの自然なオプションは、html 要素をスタイルにアタッチして、必要なものを何でもレンダリングできるようにすることかもしれませんが、それを行う方法はないようです。

では、テキスト ラベルを持つマーカーを作成するにはどうすればよいでしょうか。