cesium 加载本地json、GeoJson数据

GeoJSON是一种用于编码地理数据结构的格式

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "某地点"
  }
}

一、直接加载GeoJSON文件

// 方式1:通过GeoJsonDataSource加载
viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load('/path/to/data.geojson', {
        stroke: Cesium.Color.RED,
        fill: Cesium.Color.RED.withAlpha(0.5),
        strokeWidth: 3
    })
);

// 方式2:使用Promise处理
Cesium.GeoJsonDataSource.load('/path/to/data.geojson')
    .then(dataSource => {
        viewer.dataSources.add(dataSource);
        viewer.zoomTo(dataSource);
    })
    .catch(error => {
        console.log('Error loading GeoJSON:', error);
    });

本地直接定义json/GeoJson数据小牛试刀:



四、加载本地文件

// 3.1 相对路径加载
Cesium.GeoJsonDataSource.load('./data/local.geojson')
    .then(dataSource => {
        viewer.dataSources.add(dataSource);
        viewer.zoomTo(dataSource);
    });

// 3.2 绝对路径加载
Cesium.GeoJsonDataSource.load('http://localhost:8080/data/local.geojson')
    .then(dataSource => {
        viewer.dataSources.add(dataSource);
    });

试试:

test.json文件内容
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "测试点"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          116.391,
          39.917
        ]
      }
    }
  ]
}


你可能感兴趣的:(Cesium,json,前端)