Cesium加载geojson并更改其材质

今天碰到这个需求,在网上找了一大圈,发现就是使用了GeoJsonDataSource方法后遍历其的entities,然后修改材质即可。

但是遇到一个坑,网上给出的代码是这样的(只是说我找到的):

Cesium.GeoJsonDataSource.load("xxx").then(dataSource=> {
     viewer.dataSources.add(dataSource);
     var entities = dataSource.entities.values;
     for (var i = 0; i < entities.length; i++) {
          var entity = entities[i];
          entity.polyline = new Cesium.PolylineGraphics({
               clampToGround: true,
               width: 5,
               material: new Cesium.PolylineOutlineMaterialProperty({
                            color: Cesium.Color.ORANGE,
                            outlineWidth: 2,
                            outlineColor: Cesium.Color.BLACK})
          });    
     }
});

看上去似乎没什么问题,运行之后代码并不会报错,也没有警告信息,但是就是出不来。而且是直接完全消失的那种。不论如何设置show:true都没有用。甚至重新调用viewer.entities.add都无法展示。

后来发现正确的写法应该是这样:

    Cesium.GeoJsonDataSource.load("xxx.json").then(dataSource => {
      viewer.dataSources.add(dataSource);
      var entities = dataSource.entities.values;
      // 这个定时器是用来观察效果的,没有特殊的含义
      setTimeout(() => {
        for (var i = 0; i < entities.length; i++) {
          var entity = entities[i];
          entity.polyline.width = 5;
          entity.polyline.clampToGround = true;
          entity.polyline.material = new Cesium.PolylineOutlineMaterialProperty({
            color: Cesium.Color.ORANGE,
            outlineWidth: 2,
            outlineColor: Cesium.Color.BLACK,
          })
        }
      }, 5000)
    });

最大的区别就在于那个new Cesium.PolylineGraphics({xxx}),官网的解释链接放这里了:

PolylineGraphics - Cesium Documentation有兴趣的可以看一下。

直接设置material就可以了,不用再new一个PolylineGraphics出来。

猜你喜欢

转载自blog.csdn.net/XFIRR/article/details/130111643