VUE中cesium 添加polygon 报错

最新推荐文章于 2025-04-18 22:19:51 发布

oxygen123

最新推荐文章于 2025-04-18 22:19:51 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： cesium

本文链接：https://blog.youkuaiyun.com/oxygen123/article/details/112621984

cesium 专栏收录该内容

2 篇文章

订阅专栏

这篇博客讲述了在Vue3.0应用中使用Cesium库创建Polygon时遇到的问题。作者发现当尝试用CallbackProperty设置Polygon的hierarchy属性时，由于传入的数据类型不正确导致错误。解决方案是将坐标数组转换为Cesium的PolygonHierarchy对象。此外，作者还注意到在原生JS环境中直接传递坐标数组可以正常工作，但在Vue中则需要转换。这个问题揭示了Vue与Cesium结合使用时可能存在的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3.0 添加entity polygon hierarchy属性使用回调函数CallbackProperty报错

var PolygonPrimitive = (function () {
    function _(hierarchy) {
        this.options = {
            polygon: {
                show: true,
                hierarchy: [],
                material: Cesium.Color.CORNFLOWERBLUE
            }
        };
        this.hierarchy = hierarchy;
        this._init();
    }
    _.prototype._init = function () {
        var _self = this;
        var _update = function () {
            return _self.hierarchy;
        };
        //实时更新polygon.hierarchy
        this.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false);
        const viewer = window.earth
        viewer.entities.add(this.options);
    };
    return _;
})();
export { PolygonPrimitive }

调试到源码是在cesium 添加Polygon的时候出错了 PolygonGeometry.js中 var outerPositions = polygonHierarchy.positions;这个出错了。排查了下原因是因为polygon = new PolygonPrimitive(points) 这样传入的类型有问题，不是一个PolygonHierarchy类型，没有positions属性，而是一个三维坐标的数组，所以在传入的时候需要进行格式强制转换 polygon = new PolygonPrimitive(new Cesium.PolygonHierarchy(points))，但是polyline的话是可以直接传入坐标

之后还发现个奇怪的事，在vue中需要强制转换，在原生js中直接传入是可以的polygon = new PolygonPrimitive(points) 没有深究了