cesium 加载渲染GEOJSON数据
加载GEOJSON
Cesium.GeoJsonDataSource.load是CesiumJS库中用于加载GeoJSON数据的一个方法。这个方法返回一个Promise对象，这意味着你可以使用.then()和.catch()来处理成功或失败的情况。
基本用法通常如下：
import geoJsonData from './data/mapData2.json'
// 初始化Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer');
// 加载GeoJSON数据
Cesium.GeoJsonDataSource.load(geoJsonData).then(function(dataSource) {
// 将数据源添加到Cesium Viewer
viewer.dataSources.add(dataSource);
// 获取所有实体以设置视图范围
const entities = dataSource.entities.values;
let i = 0;
for (; i < entities.length; i++) {
const entity = entities[i];
entity.name = entity.properties.name;
// 其他属性和样式设置...
}
}).catch(function(error){
// 错误处理
console.error(error);
});
参数
url：GeoJSON文件的URL或者一个表示GeoJSON对象的JavaScript对象。options：可选的参数对象，用于配置如何解析和样式化GeoJSON数据。
返回值
返回一个Promise，该Promise解析后会得到一个DataSource对象，该对象包含解析后的GeoJSON数据。
注意事项
- 确保GeoJSON数据是有效的。可以使用在线GeoJSON校验工具进行检查。
- 注意跨域问题，尤其是当GeoJSON数据存储在不同的域名下时。
- 如果GeoJSON数据很大，可能会影响性能。
- 要检查是否有任何错误，最好使用
.catch()来捕获它们。
这样，你就可以在CesiumJS中加载和显示GeoJSON数据了。希望这个解释有助于你更好地理解Cesium.GeoJsonDataSource.load方法。
配置项
Cesium.GeoJsonDataSource.load 方法的配置选项可以用来自定义GeoJSON数据的加载和展示。这些配置项通常通过一个JavaScript对象传递给 load 方法。以下是一些常见的配置选项：
clampToGround
- 类型：
Boolean - 默认值：
false - 描述：确定地理实体（如多边形和折线）是否应贴合到地面。
sourceUri
- 类型：
String - 默认值：
undefined - 描述：用于解析相对路径的基础URI。
describe
- 类型：
Function - 默认值：
undefined - 描述：一个函数，用于创建一个给定实体的描述。
markerSize
- 类型：
Number - 默认值：
20 - 描述：点标记的像素大小。
markerSymbol
- 类型：
String - 默认值：
undefined - 描述：用于点标记的一个单一字符。
markerColor
- 类型：
Color - 默认值：
Color.WHITE - 描述：点标记的颜色。
stroke
- 类型：
Color - 默认值：
Color.WHITE - 描述：多边形和折线的描边颜色。
strokeWidth
- 类型：
Number - 默认值：
2 - 描述：多边形和折线的描边宽度。
fill
- 类型：
Color - 默认值：
Color.WHITE - 描述：多边形填充的颜色。
这些是最常见的选项，但并不是全部。以下是一个使用了多个选项的例子：
const options = {
clampToGround : true,
markerSize : 10,
markerSymbol : 'x',
markerColor : Cesium.Color.RED,
stroke : Cesium.Color.GREEN,
strokeWidth : 3,
fill : Cesium.Color.YELLOW.withAlpha(0.5),
};
Cesium.GeoJsonDataSource.load('path/to/your/file.geojson', options).then(function(dataSource) {
viewer.dataSources.add(dataSource);
}).catch(function(error) {
console.error(error);
});
通过这些选项，你可以灵活地控制GeoJSON数据在CesiumJS中的展示方式。注意，这些选项仅作为Cesium.GeoJsonDataSource.load的第二个参数传入。希望这能帮助你更好地理解这个方法的配置选项。
配置实例效果
const options = {
stroke: Cesium.Color.GREEN,
strokeWidth: 3,
fill: Cesium.Color.YELLOW.withAlpha(1),
};
let dateGeo = Cesium.GeoJsonDataSource.load(geoJsonData, options)
dateGeo.then(dataSource => {
console.log(dataSource)
viewer.dataSources.add(dataSource);
}).catch(error => {
console.error("发生错误: ", error);
});
实例演示地址
当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课 课程-加载渲染GEOJSON数据-实践的学习笔记
实例代码下载
代码运行环境：vue3 + vite + js nodejs 14
