捕捉到多个图层上的要素

Question

我在使用 OpenLayers 捕捉功能时遇到问题。我需要在我的地图上有多个图层并在所有图层上使用快照。我尝试了一个创建集合的选项，但它没有用。另一个选项确实有效，但我不知道它是否是最佳选择，我需要确认是否还有更多选项。

我创建了一个关于 OpenLayers API 文档的集合，我有几个图层

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

有人能帮帮我吗？

Answer 1

该集合将一组特征（不是来源）作为参数（不是选项）：

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

捕捉到多个图层上的要素

Snapping to features on multiple layers

javascript

openlayers-5