[英]OpenLayers Feature Style zIndex inside geometry function
This (silly) picture summarizes the issue I'm having: 此(愚蠢的)图片总结了我遇到的问题:
These are rendered in a vector layer. 它们在矢量层中渲染。
Below these shields is a line string that I render once as-is (ie as a line), and on top of it I also render it using a style that has a geometry
function defined. 在这些盾牌下面是一个线形字符串,我按原样(即,作为一条线)渲染一次,并且在其上方,我还使用定义了geometry
函数的样式来渲染它。 In that function, I return a ol.geom.MultiPoint
containing the coordinates where I want shields to be added alongside the line. 在该函数中,我返回一个ol.geom.MultiPoint
其中包含要在该行旁边添加屏蔽的坐标。
My above demonstration is silly, I know (ie in my real use case, the gap between the shields is way bigger, so I know I won't have any collision). 我知道我的上述演示很愚蠢(即,在我的实际用例中,屏蔽之间的间隙要大得多,所以我知道不会有任何碰撞)。
The thing is, I'm aware that there's normally a way to avoid this kind of behaviour with the zIndex
property of the ol.style.Style
, ie if each feature has its own style defining a different zIndex, then each shield+text would be correctly rendered with text below overlapping shields. 问题是,我知道通常可以通过ol.style.Style
的zIndex
属性来避免这种行为,即,如果每个功能都有定义不同zIndex的自己的样式,则每个shield + text都会用重叠的盾牌下方的文字正确呈现。 But, this can't work with a geometry
method, as the same style is used multiple times for the same feature to render it multiple times. 但是,这不适用于geometry
方法,因为同一特征多次使用同一样式多次渲染。
Like I said, since I'll define a big enough gap to avoid collisions anyway I don't really need to figure a way to fix this issue, but I'm curious if there is one, for my future self and other people that would like to know. 就像我说的那样,因为我将定义一个足够大的间隙来避免冲突,所以我真的不需要想办法解决这个问题,但是我很好奇是否存在一个,对于我的未来自我和其他人想知道。
Each point on a multipoint can be given its own style. 多点上的每个点都可以指定自己的样式。 Take this OpenLayers example http://openlayers.org/en/v4.6.5/examples/polygon-styles.html If you replace the styles array with this function each point on the multipoints can be given a different radius and different shade of yellow. 以这个OpenLayers为例http://openlayers.org/en/v4.6.5/examples/polygon-styles.html如果用此函数替换样式数组,则可以为多点上的每个点赋予不同的半径和不同的黄色阴影。 It also works for zIndex, as can be seen where the first and last coordinates of the polygons coincide. 它也适用于zIndex,可以看到多边形的第一个和最后一个坐标重合。
function styles(feature) {
var multipoint = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0]);
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
];
multipoint.getCoordinates().forEach(function(coordinates, index) {
var shade = (index+1)*50;
var radius = (index+1)*5;
var zIndex = 10-index;
styles.push(new ol.style.Style({
zIndex: zIndex,
image: new ol.style.Circle({
radius: radius,
fill: new ol.style.Fill({
color: 'rgba(' + shade + ',' + shade + ', 0, 1)'
})
}),
geometry: new ol.geom.Point(coordinates)
}));
});
return styles;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.