第六章 Cesium学习入门之添加Geojson数据（dataSource）

从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参数在下图

2.添加GeoJson数据并自定义修改

在开发过程中，经常会遇到根据GeoJson数据添加图片和文字注记类似的需求，一般来说，直接添加GeoJson数据cesium只会定义一种entity类型，所以我们需要按照需求自定义添加

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()