cesium polygon添加边界线不起作用

cesium polygon添加边界线不起作用

关于cesium添加polygon，有时需要添加边界线。但是设置outline不起作用。下面说明不起作用的原因及解决办法。

outline不起作用的原因

viewer.entities.add({
  name: '等值线',
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray(polyArr),
    },
    material: Cesium.Color.RED.withAlpha(1),
    zIndex: zIndex,
    height: zIndex * 10000,  //多层次
    outline: true,
    outlineColor: Cesium.Color.BLACK,
    outlineWidth:1,
  }
});

首先说明一下绘制多个polygon中，zIndex和height的区别：

绘制多个polygon，相当于将多个polygon贴在地球表面。如果不设置zIndex和height。多个polygon会绘制在同一层面上，如图：

后绘制的polygon会贴在之前绘制的polygon的上面。

zIndex的作用就是设置绘制的等级。zindex越高，绘制的polygon会贴在最上面。设置zindex的效果如图：（根据自己定义的zIndex赋值的）

但是，zIndex仅仅是在同一层面上绘制。相当于zindex高的polygon嵌入到zindex低的里面，但所有polygon均在同一层面。故而如果设置outline的话，同一图层的边界设置是不起作用的。

height的作用则是在不同层次上绘制polygon。每个polygon的height不一样，则边界就会显现出来。如图：

正面看不出来原理。cesium鼠标右键拖动，就会发现polygon不在同一层面上。

近一点会更清楚：

这里要注意的是：height取值要够大，polygon彼此间隔要够大，不然因为cesium底层原因，多层polygon之前区分度不够，绘制不出预想的效果。

所以outline不起作用的原因在于：多个polygon在同一height，没有设置height区分图层。所有polygon在同一图层上，outline不起作用

解决方案

明白绘制不出原因后，就可以有两个解决思路：

1、设置zindex和height。如下：可以展示多维效果

viewer.entities.add({
  name: '等值线',
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray(polyArr),
    },
    material: Cesium.Color.RED.withAlpha(1),
    zIndex: zIndex,
    height: zIndex * 10000,  //多层次
    outline: true,
    outlineColor: Cesium.Color.BLACK,
    outlineWidth:1,
  }
});

2、再绘制完polygon后，再循环一遍，同样的数据，绘制polyline。

polyline:{
 positions: Cesium.Cartesian3.fromDegreesArray(polyArr),
 material: Cesium.Color.fromCssColorString(contourColor).withAlpha(1),
 loop: true,
 width: 2
}