Openlayers 3 OpenLayers 3选择样式

在OL2中，我能够在样式定义中指定“选择”样式。在OL3中，这似乎不存在。如果我理解正确，我可以为选择交互设置样式。但是，在我的情况下，这可能不起作用，因为每个层都有一个独特的“选定”样式。我对能力的评估是否有误？在OL3中是否有另一种/最佳的方法来实现这一点？

假设您在每个

ol.Feature

中都存储了一个样式参数，您可以向中添加一个，并基于此参数返回一个样式。像这样：

var样式={
“路线”：新的ol.style.style({
笔划：新的ol风格笔划({
宽度：6，
颜色：[237212,0,0.8]
})
}),
“图标”：新的ol.style.style({
图片：新ol.style.Icon({
锚定：[0.5,1]，
src:'pin.png'
})
}),
“geoMarker”：新的ol.style.style({
图片：新ol.style.Circle({
半径：7，
snapToPixel：错，
填充：新的ol.style.fill（{color:'black'}），
笔划：新的ol风格笔划({
颜色：'白色'，
宽度：2
})
})
})
};
var select=新建ol.interaction.select({
样式：功能（特征、分辨率）{
返回[style[feature.get（'style_参数'）]；
}
});

您的功能如下：

var geoMarker=新ol.功能({
样式_参数：“geoMarker”，
几何体：新的ol.geom.Point（[0,0]）
});

假设每个

ol.Feature

中都存储了一个样式参数，您可以向中添加一个，并基于此参数返回一个样式。像这样：

var样式={
“路线”：新的ol.style.style({
笔划：新的ol风格笔划({
宽度：6，
颜色：[237212,0,0.8]
})
}),
“图标”：新的ol.style.style({
图片：新ol.style.Icon({
锚定：[0.5,1]，
src:'pin.png'
})
}),
“geoMarker”：新的ol.style.style({
图片：新ol.style.Circle({
半径：7，
snapToPixel：错，
填充：新的ol.style.fill（{color:'black'}），
笔划：新的ol风格笔划({
颜色：'白色'，
宽度：2
})
})
})
};
var select=新建ol.interaction.select({
样式：功能（特征、分辨率）{
返回[style[feature.get（'style_参数'）]；
}
});

您的功能如下：

var geoMarker=新ol.功能({
样式_参数：“geoMarker”，
几何体：新的ol.geom.Point（[0,0]）
});

我知道这是一个非常古老的思路，但由于我还没有找到一个明确的解决方案来解决这个特殊问题，我仍然认为这适合我的帖子。我不确定它如何支持大量的层和功能，但这是我能想到的最优雅、最简洁的解决方案。 顺便说一句：我使用的是OpenLayers的最新版本，目前是6.3.1

var map = new ol.Map({
    ...
    layers: [
        new ol.layer.Vector({
            ...
            // Default style for layer1
            style: default1,
            // Hover style for layer1 (custom property)
            hoverStyle: hover1,
            // Selected style for layer1 (custom property)
            selectedStyle: selected1
        }),
        new ol.layer.Vector({
            ...
            // Default style for layer2
            style: default2,
            // Hover style for layer2 (custom property)
            hoverStyle: hover2,
            // Selected style for layer2 (custom property)
            selectedStyle: selected2
        })
    ],
    ...
});

var hoverInteraction = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove,
    style: function(feature) {
        var layer = hoverInteraction.getLayer(feature);
        return layer.values_.hoverStyle;
    }
});
map.addInteraction(hoverInteraction);

var selectInteraction = new ol.interaction.Select({
    condition: ol.events.condition.click,
    style: function(feature) {
        var layer = selectInteraction.getLayer(feature);
        return layer.values_.selectedStyle;
    }
});

---

我知道这是一个非常古老的思路，但由于我还没有找到一个明确的解决这个问题的办法，我仍然认为它适合张贴我的。我不确定它如何支持大量的层和功能，但这是我能想到的最优雅、最简洁的解决方案。 顺便说一句：我使用的是OpenLayers的最新版本，目前是6.3.1

var map = new ol.Map({
    ...
    layers: [
        new ol.layer.Vector({
            ...
            // Default style for layer1
            style: default1,
            // Hover style for layer1 (custom property)
            hoverStyle: hover1,
            // Selected style for layer1 (custom property)
            selectedStyle: selected1
        }),
        new ol.layer.Vector({
            ...
            // Default style for layer2
            style: default2,
            // Hover style for layer2 (custom property)
            hoverStyle: hover2,
            // Selected style for layer2 (custom property)
            selectedStyle: selected2
        })
    ],
    ...
});

var hoverInteraction = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove,
    style: function(feature) {
        var layer = hoverInteraction.getLayer(feature);
        return layer.values_.hoverStyle;
    }
});
map.addInteraction(hoverInteraction);

var selectInteraction = new ol.interaction.Select({
    condition: ol.events.condition.click,
    style: function(feature) {
        var layer = selectInteraction.getLayer(feature);
        return layer.values_.selectedStyle;
    }
});

---

您是否能够在每个功能中存储一些参数？您是否能够在每个功能中存储一些参数？在许多（50+）层中的数千个功能具有数百种样式的场景中，是否有更实用的方法？理想情况下，我需要在现有的select交互上设置样式。如果我在on select事件中设置样式，则不会应用样式。在许多（50+）层中的数千个功能具有数百种样式的场景中，是否有更实用的方法？理想情况下，我需要在现有的select交互上设置样式。如果我在on select事件中设置了样式，则不会应用该样式。请更具体地说明您试图通过这段代码实现什么，以便人们能够更好地帮助您。我试图实现的，是我实际实现的。对于“我的解决方案”，我的意思是：一种解决OP问题的方法，似乎有效。在OpenLayers 6.3.1中，即。我只是觉得我必须分享这一点，因为很难找到悬停和选定功能的样式示例。很抱歉，我的评论造成了混乱。这发生在评论队列中，我认为这是一个问题而不是答案，因此评论。谢谢你的贡献！请更具体地说明你想用这段代码实现什么，这样人们可以更好地帮助你。我想实现的，我实际上实现了。对于“我的解决方案”，我的意思是：一种解决OP问题的方法，似乎有效。在OpenLayers 6.3.1中，即。我只是觉得我必须分享这一点，因为很难找到悬停和选定功能的样式示例。很抱歉，我的评论造成了混乱。这发生在评论队列中，我认为这是一个问题而不是答案，因此评论。谢谢你的贡献！