最近的一个项目种使用到了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,
然后将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;

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