Функция Openlayers 3 Highlight

44
4

Я смотрю документацию для ol.FeatureOverlay здесь

и используя приведенный здесь пример для ol.FeatureOverlay

как это...

        var featureOverlay = new ol.FeatureOverlay({
map: map,
style: function (feature, resolution) {
var style;
var geom = feature.getGeometry();
if (geom.getType() == 'Point') {
var text = feature.get('text');
baseTextStyle.text = text;
// this is inefficient as it could create new style objects for the
// same text.
// A good exercise to see if you understand would be to add caching
// of this text style
var isoCode = feature.get('isoCode').toLowerCase();
style = new ol.style.Style({
text: new ol.style.Text(baseTextStyle),
image: new ol.style.Icon({
src: '../assets/img/flags/' + isoCode + '.png'
}),
zIndex: 2
});
} else {
style = highlightStyle;
}

return [style];
}
});

но я получаю ошибку " TypeError: ol.FeatureOverlay не является конструктором "

Я на OL3 3.16. Любая помощь в этом вопросе очень ценится !!

спросил(а) 2016-06-20T22:12:00+03:00 3 года, 5 месяцев назад
1
Решение
45

Похоже, это изменилось, и теперь нужен ol.layer.Vector

Таким образом, код теперь выглядит так, чтобы наложить наложение...

 var highlightStyleCache = {};
var featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector(),
map: map,
style: function (feature, resolution) {
var text = resolution * 100000 < 10 ? feature.get('text') : '';
if (!highlightStyleCache[text]) {
highlightStyleCache[text] = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#000066',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(192,192,192,0.7)'
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
text: text,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#f00',
width: 3
})
})
});
}
return highlightStyleCache[text];
}
});

и добавление и удаление выглядит так...

 var highlight;
var displayFeatureInfo = function (pixel) {

var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});

var info = document.getElementById('info');
if (feature) {
info.innerHTML = feature.getId() + ': ' + feature.get('name');
} else {
info.innerHTML = ' ';
}

if (feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}

};

и для того, чтобы принять ответ немного дальше, вам нужно добавить действие к карте, в моем случае я использую onClick, чтобы он выглядел как это...

 map.on('click', function (evt) {
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(evt.pixel);

})

но если вы хотите выделить на hover, это будет выглядеть так...

map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});

ответил(а) 2016-06-20T23:53:00+03:00 3 года, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема