从0开始的Cesium
第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境
第二章 Cesium学习入门之搭建Cesium界面预览和小控件隐藏
第三章 Cesium学习入门之地形数据（DEM）的加载
第四章 Cesium学习入门之加载离线影像图（tif）
第五章 Cesium学习入门之加载影像WMTS切片服务（ArcGIS/Geowebcache）
第六章 Cesium学习入门之添加Geojson数据（dataSource）
前言
在Cesium场景中添加三维图元的方式有很多种，包括entity，dataSource，primitive，本文将着重讲解cesium中GeoJson（dataSource）数据的处理
一、添加GeoJSON数据并自定义修改
1.添加GeoJson数据
viewer.dataSources.add(
Cesium.GeoJsonDataSource.load(url, //要加载的 url、GeoJSON 对象或 TopoJSON 对象。
{
stroke: Cesium.Color.HOTPINK, //折线和多边形轮廓的默认颜色。
fill: Cesium.Color.PINK.withAlpha(0.5), //多边形内部的默认颜色。
strokeWidth: 3, //折线和多边形轮廓的默认宽度。
}
)
);
其中options参数在下图
文章来源：https://www.toymoban.com/news/detail-601274.html
2.添加GeoJson数据并自定义修改
在开发过程中，经常会遇到根据GeoJson数据添加图片和文字注记类似的需求，一般来说，直接添加GeoJson数据cesium只会定义一种entity类型，所以我们需要按照需求自定义添加文章来源地址https://www.toymoban.com/news/detail-601274.html
const promise = Cesium.GeoJsonDataSource.load(url) //读取geojson数据
promise.then((dataSource) => {
const entities = dataSource.entities.values //获取dataSource中的entitis集合
for (const key in entities) {
const entity = entities[key] //遍历集合中每一个实体entity，按照不同的类型去自定义修改
if (entity.polyline) { //如果是线数据类型
const entitiyColor = Cesium.Color.fromBytes(red,green,blue) //根据rbg颜色转换成cesium支持的颜色
entity.polyline.material = entitiyColor //复制到线材质
entity.polyline.outline = false; //取消外轮廓
entity.polyline.clampToGround = true //贴地线
viewer.zoomTo(entity) //定位到实体
} else if (entity.billboard) {
entity.billboard = {
image: "img/gis.png", //修改图片样式
scale: 0.5, //图片缩放大小
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地设置
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // //相对于对象的原点（注意是原点的位置）的水平位置
verticalOrigin: Cesium.VerticalOrigin.BOTTOM //相对于对象的原点的垂直位置，BOTTOM时锚点在下，对象在上
}
entity.label = {
text: entity.name, //文字描述
font: '10pt Source Han Sans CN', //字体样式
fillColor: Cesium.Color.BLACK, //字体颜色
backgroundColor: Cesium.Color.AQUA, //背景颜色
showBackground: true, //是否显示背景颜色
style: Cesium.LabelStyle.FILL, //label样式
outlineWidth: 2, //外轮廓宽度
verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
pixelOffset: new Cesium.Cartesian2(20, 0),//偏移
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 20000000.0),
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 20000000, 1.5),
// eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
disableDepthTestDistance: Number.POSITIVE_INFINITY,//一个属性，指定从相机到该距离时禁用深度测试的距离
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地设置
}
}
二、移除GeoJson（datasource）数据
1.从集合中移除一个datasource
viewer.dataSources.remove(datasource) //要删除的数据源。
2.移除所有datasource
viewer.dataSources.removeAll()
到了这里，关于第六章 Cesium学习入门之添加Geojson数据（dataSource）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
