2016-01-12 46 views
2

我正在使用三層功能的單層,並且想要指定z順序,但無法正常工作。無論如何要指定單層上的特徵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]]; 
} 
+0

我想你必須拿出相關的代碼。 –

+0

「z-order」的含義並不清楚。它是'z-index'嗎? –

+0

是的,我的意思是z-索引。如果座標相同,我想通過z-index顯示特徵。 –

回答

2

最後我得到了解決辦法,下面是最終樣式的功能,將重新排列功能的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]]; 
}` 

你可以檢查這裏的例子http://bl.ocks.org/wboykinm/cc509eb2763ca1ba9293

+0

然後你可以標記它是正確的。 –

相關問題