OpenLayers 3 Добавить Movable Marker с иконой и текст

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

Но это, похоже, не допускается. Другим естественным вариантом может быть присоединение элемента html к стилю, чтобы мы могли отображать все, что мы хотим, но, похоже, не существует способа сделать это.

Итак, как мне создать маркер с текстовой меткой?

Answer 1

Как видно из примера this, решение состоит в том, чтобы использовать список стилей вместо одного стиля.

В данном случае это очень просто:

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