Привязка к объектам на нескольких слоях - PullRequest
Новая
       11

Привязка к объектам на нескольких слоях

0 голосов
/ 20 сентября 2019

У меня проблемы с использованием функции привязки OpenLayers.Мне нужно иметь несколько слоев на карте и использовать привязку ко всем.Я попытался создать коллекцию, но она не сработала.Другой вариант работает, но я не знаю, является ли он наиболее оптимальным, и мне нужно было бы подтвердить, есть ли еще какие-либо варианты.

Я создал коллекцию, касающуюся документации API OpenLayers, у меня есть несколько слоев

//Map layers added

var raster = new TileLayer({
    source: new OSM()
});

var vectorLayer = new VectorLayer({
    source: new VectorSource({
        url: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
        format: new GeoJSON()
    })
});


var vectorLayer2 = new VectorLayer({
    source: new VectorSource({
        url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson',
        format: new GeoJSON()
    })
});

var vector = new VectorLayer({
    source: new VectorSource(),
    style: new Style({
        fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new Stroke({
            color: '#ffcc33',
            width: 2
        }),
        image: new CircleStyle({
            radius: 7,
            fill: new Fill({
                color: '#ffcc33'
            })
        })
    })
});

Если я создаю объект привязки для каждого из слоев, если он работает, но я не вижу, чтобы этот случай был очень практичным, и я ищу, есть ли какая-либо другая опция.Этот код работает. 

var snapCollection = new Collection({
    unique: true
});

[vector, vectorLayer, vectorLayer2].forEach(function(layer) {
    layer.getSource().on('addfeature', function(evt) {
        snapCollection.push(evt.feature);
    });
    layer.getSource().on('removefeature', function(evt) {
        snapCollection.remove(evt.feature);
    });
});

var map = new Map({
    layers: [raster, vector, vectorLayer],
    target: 'map-container',
    view: new View({
        projection: 'EPSG:4326',
        center: [-100.937, 38.725],
        zoom: 15
    })
});

var snapPrueba = new Snap({
    features: snapCollection
});

snapPrueba.on('change', function(event) {
    console.log(this.target);
});

map.addInteraction(snapPrueba);

Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 20 сентября 2019

Коллекция принимает массив объектов (не источников) в качестве параметра (не вариант): 

features: new Collection(
    vectorLayer2.getSource().getFeatures().concat(vector.getSource().getFeatures()).concat(vectorLayer.getSource().getFeatures()),
    { unique: true }
)

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

var snapCollection = new Collection([], {
    unique: true
});

[vector, vectorLayer, vectorLayer2].forEach(function(layer) {
    layer.getSource().on('addfeature', function(evt) {
        snapCollection.push(evt.feature);
    });
    layer.getSource().on('removefeature', function(evt) {
        snapCollection.remove(evt.feature);
    });
});

var map = new Map({
    layers: [raster, vector, vectorLayer],
    target: 'map-container',
    view: new View({
        projection: 'EPSG:4326',
        center: [-100.937, 38.725],
        zoom: 15
    })
});

var snapPrueba = new Snap({
    features: snapCollection
});

snapPrueba.on('change', function(event) {
    console.log(this.target);
});

map.addInteraction(snapPrueba);
...