Openlayers Установить свойство для маркеров векторного слоя KML? - PullRequest
Новая
       57

Openlayers Установить свойство для маркеров векторного слоя KML?

1 голос
/ 07 мая 2020

Я новичок во всем этом и прошу прощения, если это до боли очевидно, но я искал решение, как мог, и тем не менее:

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

Однако оба использовать только один стиль, а мне нужны разные стили для разных слоев KML. Я попытался определить, а затем вызвать различные стили, которые я хотел бы использовать в соответствии с этим вопросом .

Но мне не вернули стиль, определенный моими параметрами. n00b, что я, мне потребовалось время, чтобы методом проб и ошибок в том, что происходило, но при входе в консоль в моей функции 'hoverStyler' (где выбирались стили) мой параметр стиля возвращался 'undefined', независимо от того, где я пытался определяя это. Зная это, я вошел в сам KML и добавил расширенные данные своего параметра ('hoverstyle'), и функция затем работала для любого маркера (или маршрута), к которому я добавил это.

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

Я понятия не имею, что это такое. Мы очень ценим любые советы!

Код:

(в стилях есть определенная преднамеренная избыточность, чтобы лучше дать мне обратную связь о том, что было, а что не работало) 

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })
    ],
    target: 'map',
    view: new ol.View({
    center: ol.proj.fromLonLat([132.4903, 34.0024]),
    zoom: 4
    })
});

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/summer3.kml',
        format: new ol.format.KML({
            extractStyles: false
        })
    }),
    style: function(feature) {
        return routeStyle;
    },
});
map.addLayer(vectorLayer);

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/testmoo3.kml',
        format: new ol.format.KML({
            extractStyles: false,
        }),
    }),
    style: function(feature) {
        return iconStyle;
    },
});
map.addLayer(vectorLayer);

var hoverStyles = {
    'moo': new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/mooinb.png',
    }),
    'moo2': new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/moo2.png'
    }),
    'route1': new ol.style.Stroke({
        color: 'rgba(236, 26, 201, 0.5)',
        width: 5
    })
};

var routeStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(209,14,14,.6)',
        width: 4
    })
});

var defaultRouteStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(130,188,35,.6)',
        width: 4
    })
});

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/moo7.png',                
    }),
});

var defaultIconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/moo.png'
    }),
});

var hoverStyleCache = {}
function hoverStyler(feature, resolution) {
    var hover = feature.get('hoverstyle');
    var geometry = feature.getGeometry().getType();
    console.log(hover);
    while (geometry === 'Point') {
        if (!hover || !hoverStyles[hover]) {
            return [defaultIconStyle];
        }
        if (!hoverStyleCache[hover]) {
            hoverStyleCache[hover] = new ol.style.Style({
                image:hoverStyles[hover],
            })
        }
        return [hoverStyleCache[hover]];
    }
    while (geometry === 'LineString') {
        if (!hover || !hoverStyles[hover]) {
            return [defaultRouteStyle];
        }
        if (!hoverStyleCache[hover]) {
            hoverStyleCache[hover] = new ol.style.Style({
                stroke: hoverStyles[hover]
            })
        }
        return [hoverStyleCache[hover]];
    }
}


var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: map,
    style: hoverStyler
});

var highlight;
var hover = function(pixel) {

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

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

};

1 Ответ

1 голос
/ 07 мая 2020

Вы можете установить свойства по мере загрузки функций 

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/summer3.kml',
        format: new ol.format.KML({
            extractStyles: false
        })
    }),
    style: function(feature) {
        return routeStyle;
    },
});
vectorLayer.getSource().on('addfeature', function(event) {
  event.feature.set(('hoverstyle', 'moo');
});
map.addLayer(vectorLayer);
...