已被阅读 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);
})
数据渲染默认是黄色
加载一份杭州市滨江区部分道路数据
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);
})
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号