在OpenLayers中绘制线条后面的点

Question

我正在尝试使用OpenLayers 4创建一个地图。

我有一些包含线和点的向量块。线代表道路，点代表环形交叉路口。我想做的是用弹壳画道路，用弹壳画环形交叉路口，但在道路后面画环形交叉路口的外壳。这说得通吗？)

我现在得到的是：

​

​

注意在环形交叉路口，他们周围的划水是如何与道路相交的？这就是我想要避免的。

这些道路的样式与此类似：

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，以便在填土前绘制套管，但无论我选择多大的数字，我都无法在环形交叉路口前画出这条路！

有什么想法，我可以如何解决这个问题，并得到点画，我想他们吗？

谢谢,

迪伦

Answer 1

默认情况下，OpenLayers将点(即环形交叉路口)呈现为矢量，而预渲染直线(即道路)到图像。这可以使用ol.layer.VectorTile的renderMode选项来控制，该选项默认为'hybrid'。

若要在相同的传递中呈现点和行(为了使zIndex得到尊重)，请使用renderMode: 'image'或renderMode: 'vector'配置ol.layer.VectorTile。