cesium加载json矢量数据

已被阅读 208 次 | 文章分类:cesium | 2024-08-18 16:50

本文使用cesium加载json矢量数据。使用cesium提供的GeoJsonDataSource加载器方法。json数据必须是gaojson地理数据格式。

1 加载原理

GeoJsonDataSource可以直接对geojson数据解析,并渲染到地图;无需手动解析数据格式,可以满足一般性需求

2 代码

加载一份兰州市道路数据;👉数据下载

                                        
import {
  Viewer,
  GeoJsonDataSource,
  Color,
  Ion
} from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
// 如果底图的影像图不出来。在cesium官网复制,添加自己的token即可
// Ion.defaultAccessToken = ""
// 1 初始化viewer
var V = new Viewer('gisContainer');
// 2 隐藏底部logo
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display ='none';
// 3 使用GeoJsonDataSource加载器加载geojson文件
var promise=GeoJsonDataSource.load('./statics/geojson/兰州市道路数据.json');
promise.then(function(dataSource) {
  // 4 将结果添加到viewer中,即可显示内容
  V.dataSources.add(dataSource);
  V.flyTo(promise);
})
                                        
                                    

小白GIS

数据渲染默认是黄色

加载一份杭州市滨江区部分道路数据

小白GIS

3 自定义每个实体的样式

上面整个source使用统一的样式;我们也可以对source中每个实体设置不同的样式;根据geojson数据的属性字段,比如name、长度、区域等等

代码如下

                                        
import {
  Viewer,
  GeoJsonDataSource,
  Color,
  Ion
} from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
// Ion.defaultAccessToken = ""
// 1 初始化viewer
var V = new Viewer('gisContainer');
// 2 隐藏底部logo
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display ='none';
// 3 使用GeoJsonDataSource加载器加载geojson文件
var promise=GeoJsonDataSource.load('./statics/geojson/binjiang_road.json');
promise.then(function(dataSource) {
  // 4 将结果添加到viewer中,即可显示内容
  V.dataSources.add(dataSource);
  // 4.1 设置单个实体的样式
  var entities = dataSource.entities.values;
  for (var i = 0; i < entities.length; i++) {
    var entity = entities[i];
    if(i%2===1){
      entity.polyline.material=Color.RED
    }else{
      entity.polyline.material=Color.YELLOW
      entity.polyline.width=2
    }
  }
  V.flyTo(promise);
})
                                        
                                    

小白GIS

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号