繪製點在OpenLayers線後

我試圖創建一個使用OpenLayers 4地圖。繪製點在OpenLayers線後

我有一些包含線條和點的矢量圖。線條代表道路，點代表環島。我試圖做的是用腸衣繪製道路，並用腸衣繪製環島，但道路後面出現環島的腸衣。這有任何意義嗎？ :)

這裏就是我得到的時刻：

通知在環島如何他們大約行程相交道路？這正是我想要避免的。

的道路樣式相似到這一點：

const road = [ 
    new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: '#505050', 
     width: 2 
    }), 
    zIndex: 2 
    }), 
    new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: '#ffffff', 
     width: 20 
    }), 
    zIndex: 3 
    }) 
];

我已經簡化它有點去除根據其類型等道路的顏色作爲我的例子不復雜。

迴旋處的樣式相似到這一點：

const roundabout = [ 
    new ol.style.Style({ 
    image: new ol.style.Circle({ 
     radius: 20, 
     fill: new ol.style.Fill({ 
     color: '#ffffff' 
     }), 
    }), 
    zIndex: 1 
    }), 
    new ol.style.Style({ 
    image: new ol.style.Circle({ 
     radius: 18, 
     fill: new ol.style.Fill({ 
     color: '#ffffff' 
     }), 
    }), 
    zIndex: 4 
    }) 
];

再次，簡化爲不包括在環島，這僅僅是一次小，但得出的相同點中間的額外圈。

應該發生什麼事情是先迂迴套管，然後是路面套管，然後是路面填充，最後是迂迴填充。這應該使道路填充和迂迴填充看起來是一條連續的線，並且環繞在環形道周圍的外殼不與道路相交。

我遇到的問題是我爲環島設置的zIndex值似乎沒有任何效果。無論我怎樣改變它們，我都無法將任何部分（套管或填充物）繪製在道路後面。例如，我可以改變道路的zIndex，以便在填充物前面繪製套管，但是無論我選擇多大的數字，我都無法在環島的前方畫出道路！

任何想法，我可以解決這個問題，並得到點繪圖，因爲我希望他們？

謝謝，

迪倫

來源

2017-07-28 Dylan Parry

默認情況下，呈現的OpenLayers點（即你的環形路）作爲載體，但預渲染系（即你的道路）爲圖像。這可以使用ol.layer.VectorTile的renderMode選項進行控制，該選項默認爲'hybrid'。

要在相同的過程中渲染點和線（爲了使zIndex受到尊重），請配置ol.layer.VectorTile，使用renderMode: 'image'或renderMode: 'vector'。

來源

2017-07-29 20:34:56 ahocevar

謝謝，這個工程。我決定用一種不同的方式做到這一點，回到地理信息系統並創建環形交叉口的多邊形數據，所以我仍然可以使用混合模式用於其他點，如標籤和POI。儘管沒有使用GIS，這絕對是最好的解決方案。 –

繪製點在OpenLayers線後

回答

相關問題