OpenLayers 3 - 亮点功能的 Z 索引

Question

当我想突出显示某个功能时，我在 OpenLayers 3 上使用 z-index 遇到了一些麻烦。

我创建了一个国家/地区的 GeoJSON 形状，在顶部添加了一些标记，当我悬停在上面时我希望形状颜色发生变化。

但是，当颜色改变时，形状会隐藏我的标记。

我尝试将 zIndex 样式放在高亮样式上，但这并没有改变任何东西...

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })],
        controls: ol.control.defaults({
            attributionOptions: ({
                collapsible: false
            })
        }),
        target: 'map',
        view: new ol.View({
            center: [631965.84, 4918890.2],
            zoom: 3
        })
    });

    var vector = new ol.layer.Vector({
        source: new ol.source.Vector({}),
        style: new ol.style.Style({
            zIndex: 1,
            stroke: new ol.style.Stroke({
                color: '#589CA9',
                width: 3
            }),
            fill: new ol.style.Fill({
                color: '#589CA9'
            })
        })
    });

    map.addLayer(vector);

    var selectPointerMove = new ol.interaction.Select({
        condition: ol.events.condition.pointerMove,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#EF7F01',
                width: 3

            }),
            zIndex: 1,
            fill: new ol.style.Fill({
                color: '#EF7F01'
            })
        })
    });

    map.addInteraction(selectPointerMove);

    var feature = new ol.format.GeoJSON().readFeature(Some_GeoJSON_Coordinate, {
        dataProjection: ol.proj.get('EPSG:4326'),
        featureProjection: ol.proj.get('EPSG:3857')
    });

    vector.getSource().addFeature(feature);

    iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([5, 44],"EPSG:4326", 'EPSG:3857')),
        type:"marker"
    });

    var iconStyle = new ol.style.Style({
        zIndex:2,
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor:[0.5,1],
            scale:0.1,
            src: 'https://lh4.ggpht.com/Tr5sntMif9qOPrKV_UVl7K8A_V3xQDgA7Sw_qweLUFlg76d_vGFA7q1xIKZ6IcmeGqg=w300'
        }))
    });

    iconFeature.setStyle(iconStyle);

    vector.getSource().addFeature(iconFeature)

我为我的问题创建了一个 JSFiddle：http://jsfiddle.net/a1zb5kzf/1/

提前感谢您的帮助

Answer 1

我找到了解决方案。

根据 Select Interaction documentation，它不只是应用其他样式，而是将您的功能移动到临时叠加层上。因此，zIndex 不起作用，因为特征不再位于同一层上。

因此，为了获得我的高光效果并将我的功能保持在同一层上，我观看了 pointermove 事件，并在必要时应用样式。就在之前，我记住了这个功能，并在上面重新应用了默认样式

 cartoCtrl.map.on("pointermove", function (evt) {
                    var feature = cartoCtrl.map.forEachFeatureAtPixel(evt.pixel,
                        function (feature) {
                            return feature;
                        });
                    if (feature && feature.getProperties().type != "marker") {
                        cartoCtrl.lastHighlitedFeature = feature;
                        feature.setStyle(highlightStyle)
                        }));
                    } else {
                        if(cartoCtrl.lastHighlitedFeature){
                            cartoCtrl.lastHighlitedFeature.setStyle(defautlStyle);
                            cartoCtrl.lastHighlitedFeature = false;
                        }
                    }
                });

OpenLayers 3 - 亮点功能的 Z 索引

OpenLayers 3 - Z-index of features on highlights

javascript

openlayers-3