绘制点在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线后

回答

相关问题