无论如何要在单层上指定特征的 z 顺序?
Is there anyway to specify z-order of feature on single layer?
我正在使用具有三个特征的单层并且想指定 z 顺序但无论如何都不起作用。
根据我的理解,功能是按照我添加的相同顺序绘制,所以我尝试以相反的顺序添加,但它对我不起作用。
添加功能的代码
var features=[];
jQuery.each(data.route, function (key, val)
{
var localfeature = new ol.Feature({ geometry: objGeoJSON.readGeometry(JSON.parse(val.simpleRoute)).transform('EPSG:4326', 'EPSG:3857') });
localfeature.set("rtype", "R" + (key + 1));
features.push(localfeature);
});
currentRoute.routingSource.addFeatures(features);
层的样式函数
//function to apply color based on rtype attribute.
function styleFunction(feature, resolution) {
var level = feature.get('rtype');
if (!level || !RouteType[level]) {
return [defaultStyle];
}
if (!styleCache[level]) {
styleCache[level] = new ol.style.Style({
stroke: new ol.style.Stroke({
color: RouteType[level],
width: 4
})
});
}
// at this point, the style for the current level is in the cache
// so return it (as an array!)
return [styleCache[level]];
}
我终于找到了解决方案,这是将重新排列特征的最终样式函数 z-index。
`
//function to apply color based on rtype attribute.
function styleFunction(feature, resolution) {
var level = feature.get('rtype');
if (!level || !RouteType[level]) {
return [defaultStyle];
}
if (!styleCache[level]) {
styleCache[level] = new ol.style.Style({
stroke: new ol.style.Stroke({
color: RouteType[level],
width: 4
}),
zIndex: zIndexValue
});
}
// at this point, the style for the current level is in the cache
// so return it (as an array!)
return [styleCache[level]];
}`
我正在使用具有三个特征的单层并且想指定 z 顺序但无论如何都不起作用。
根据我的理解,功能是按照我添加的相同顺序绘制,所以我尝试以相反的顺序添加,但它对我不起作用。
添加功能的代码
var features=[];
jQuery.each(data.route, function (key, val)
{
var localfeature = new ol.Feature({ geometry: objGeoJSON.readGeometry(JSON.parse(val.simpleRoute)).transform('EPSG:4326', 'EPSG:3857') });
localfeature.set("rtype", "R" + (key + 1));
features.push(localfeature);
});
currentRoute.routingSource.addFeatures(features);
层的样式函数
//function to apply color based on rtype attribute.
function styleFunction(feature, resolution) {
var level = feature.get('rtype');
if (!level || !RouteType[level]) {
return [defaultStyle];
}
if (!styleCache[level]) {
styleCache[level] = new ol.style.Style({
stroke: new ol.style.Stroke({
color: RouteType[level],
width: 4
})
});
}
// at this point, the style for the current level is in the cache
// so return it (as an array!)
return [styleCache[level]];
}
我终于找到了解决方案,这是将重新排列特征的最终样式函数 z-index。
`
//function to apply color based on rtype attribute.
function styleFunction(feature, resolution) {
var level = feature.get('rtype');
if (!level || !RouteType[level]) {
return [defaultStyle];
}
if (!styleCache[level]) {
styleCache[level] = new ol.style.Style({
stroke: new ol.style.Stroke({
color: RouteType[level],
width: 4
}),
zIndex: zIndexValue
});
}
// at this point, the style for the current level is in the cache
// so return it (as an array!)
return [styleCache[level]];
}`