cesium polygon添加邊界線不起作用

關(guān)于cesium添加polygon，有時(shí)需要添加邊界線。但是設(shè)置outline不起作用。下面說(shuō)明不起作用的原因及解決辦法。

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,
  }
});

首先說(shuō)明一下繪制多個(gè)polygon中，zIndex和height的區(qū)別：

繪制多個(gè)polygon，相當(dāng)于將多個(gè)polygon貼在地球表面。如果不設(shè)置zIndex和height。多個(gè)polygon會(huì)繪制在同一層面上，如圖：

后繪制的polygon會(huì)貼在之前繪制的polygon的上面。

zIndex的作用就是設(shè)置繪制的等級(jí)。zindex越高，繪制的polygon會(huì)貼在最上面。設(shè)置zindex的效果如圖：（根據(jù)自己定義的zIndex賦值的）

但是，zIndex僅僅是在同一層面上繪制。相當(dāng)于zindex高的polygon嵌入到zindex低的里面，但所有polygon均在同一層面。故而如果設(shè)置outline的話，同一圖層的邊界設(shè)置是不起作用的。

height的作用則是在不同層次上繪制polygon。每個(gè)polygon的height不一樣，則邊界就會(huì)顯現(xiàn)出來(lái)。如圖：

正面看不出來(lái)原理。cesium鼠標(biāo)右鍵拖動(dòng)，就會(huì)發(fā)現(xiàn)polygon不在同一層面上。

近一點(diǎn)會(huì)更清楚：

這里要注意的是：height取值要夠大，polygon彼此間隔要夠大，不然因?yàn)閏esium底層原因，多層polygon之前區(qū)分度不夠，繪制不出預(yù)想的效果。

所以outline不起作用的原因在于：多個(gè)polygon在同一height，沒有設(shè)置height區(qū)分圖層。所有polygon在同一圖層上，outline不起作用

解決方案

明白繪制不出原因后，就可以有兩個(gè)解決思路：

1、設(shè)置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后，再循環(huán)一遍，同樣的數(shù)據(jù)，繪制polyline。

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