cesium 多边形加边框宽度 Polygon outlineWidth

 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博客

相关推荐

  1. Cesium 实战 - 自定义标绘多边形实现水面效果

    2024-06-13 04:50:01       37 阅读
  2. layui-tab载echarts宽度丢失

    2024-06-13 04:50:01       29 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-13 04:50:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-13 04:50:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-13 04:50:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-13 04:50:01       18 阅读

热门阅读

  1. Mac 使用 Homebrew 安装 Python3

    2024-06-13 04:50:01       8 阅读
  2. 如何手动实现批量添加和解除限时锁

    2024-06-13 04:50:01       8 阅读
  3. 通过CMake的option启用或禁用特定功能

    2024-06-13 04:50:01       11 阅读
  4. 中介子方程十三

    2024-06-13 04:50:01       6 阅读
  5. AI大汇总

    2024-06-13 04:50:01       11 阅读
  6. HLS入门

    HLS入门

    2024-06-13 04:50:01      9 阅读
  7. C++Primer Plus6编程题(第四章)

    2024-06-13 04:50:01       9 阅读
  8. Web前端如何华丽转身成为网页制作高手

    2024-06-13 04:50:01       12 阅读