cesium加载geojson绘制边界线,设置边界线粗细不生效的问题

1,105 阅读1分钟

最近的一个项目种使用到了cesium,也是第一次结束cesiun。做可视化cesium是绕不过去的,目前看来是绕不过去的。第一次接触,遇到很多问题。 加载geojson绘制区域边界,先看代码:

     Cesium.GeoJsonDataSource.load(zhoushan, {
      stroke: Cesium.Color.fromCssColorString('#00203f'), // 边界线颜色
      strokeWidth: 2, // 边界线宽度
      fill: Cesium.Color.fromAlpha(Cesium.Color.BLUE, 0), // 填充颜色和透明度
    })
      .then((dataSource) => {
     	 viewer.dataSources.add(dataSource);
 	}

边界线也是能正常加载的,结果领导说线太细了,那我就调整strokeWidth的数值,发现设置到1000都边界线都还是没有变粗。在网上搜了一下这个问题大概就是意思就是加载geojson后遍历里面的entities...,具体的大家可以搜一下,还有说是webgl只能绘制1px的线条什么的。 通过不断的尝试,我发现我的geojson文件的中geometry的type是MultiPolygon,

微信截图_20241127153929.png 然后将geojson文件转换了一下将MultiPolygon转换成MultiLineString转换脚本 转换后再去加载这个geojson设置strokeWidth就生效了 有兴趣的小伙伴可以分别加载MultiLineString和MultiPolygon再打印一下dataSource中entities中的每一项中polygon和polyline属性 不想转换的实现代码:

 function loadBoundary() {
    // 加载GeoJSON数据并设置边界样式
    Cesium.GeoJsonDataSource.load(zhoushan, {
      stroke: Cesium.Color.fromCssColorString('#00203f'), // 边界线颜色
      strokeWidth: 2, // 边界线宽度
      fill: Cesium.Color.fromAlpha(Cesium.Color.BLUE, 0), // 填充颜色和透明度
    })
      .then((dataSource) => {
        // 将GeoJSON数据添加到地图中
        dataSource.entities.values.forEach(function (entity) {
          if (entity.polygon) {
            entity.polygon.outline = false;

![微信截图_20241127153929.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3f458ede9ad045bd8e37f29141821620~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5aSn5p2O5a2QTA==:q75.awebp?rk3s=f64ab15b&x-expires=1771318953&x-signature=TusLUlFikcjOxrvKB6JMoo03jLc%3D)
           var positions = entity.polygon.hierarchy._value.positions;
            entity.polyline = {
              positions: positions,
              width: 2,
              material: Cesium.Color.fromCssColorString('#00203f'),
            };
          } 
         });
        viewer.dataSources.add(dataSource);
      })
      .catch((error) => {
        console.error('加载GeoJSON失败:', error);
      });
  }

这个就是上面我所说的遍历entities然后给创建entity.polyline。因为MultiPolygon的geojsoncesium加载后创建的是ploygon所以导致无法设置strokeWidth