cesium中用polygon添加多边形时,设置outlineWidth无效,常见做法是在添加polygon的同时加一个polyline,但是当多边形相邻两条边的角度比较小的情况下,这两个点的连接处有明显的交叉。
解决方案:
第一步:通过turf的buffer方法计算出一个小一点的多边形,注意此时buffer第二个参数为复数才能得到小一点的多边形
第二步:画挖洞多边形,外圈坐标为原始坐标,内圈坐标为第一步计算出来的坐标
第三步:画小多边形,坐标为第一步计算出来的坐标
let poly = turf.polygon([coordinates]);
let buffered = turf.buffer(poly, -0.00005, { units: 'kilometers' });
let innerPositions = buffered.geometry.coordinates[0].reduce(function (acc, curr) {
return acc.concat(curr);
}, []);
// 画外圈多边形-多边形边框
viewer.entities.add({
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray(positions),
holes: [{
positions: Cesium.Cartesian3.fromDegreesArray(innerPositions),
}]
},
material: Cesium.Color.fromCssColorString('#f00').withAlpha(0.8),
}
});
// 画内圈多边形
viewer.entities.add({
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray(innerPositions),
},
material: Cesium.Color.fromCssColorString('#f00').withAlpha(0.4),
}
});
其他尝试:
尝试一:第一步用turf的transformScale,当多边形的坐标比较相近的情况下,transformScale不是等比缩放的,导致多边形边框宽度不一致。
尝试二:采用primitive方式加多边形,并调整矩阵缩放,得到的效果和尝试一中一致。
相关参考:cesium primitive 移动 缩放 旋转 矩阵_cesium primite旋转-CSDN博客