Question

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

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

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

我尝试将zIndex样式放在hightlight样式上，但这不会改变任何内容......

    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-index

1 个答案: