Cesium加载GeoJson数据添加文字标签

为GeoJson数据中的点、线、面添加文字标注,以新建实体的方式添加。

为Point/MultiPoint属性数据添加文字

/*
    * 添加标注到面数据
    * @param {Cesium.Viewer} viewer  视图对象
    * @param {String} url   GeoJSON数据的URL
    * @returns {Promise<void>} 
    * @description 从GeoJSON数据中加载面数据,并添加标注
    * @example addLabel2PolygonData(new Cesium.viewer('C'), 'http://localhost:8080/data/geojson/polygon.geojson');
*/
export async function addLabel2PointData(viewer, url) {
    const promise = Cesium.GeoJsonDataSource.load(url);
    promise.then(async function (dataSource) { 
        await viewer.dataSources.add(dataSource);//加载GeoJson数据并添加至数据源
        //遍历当前数据源所有实体
        dataSource.entities.values.forEach((value, index, array) => {
            value.billboard = undefined;
            value.point = undefined; //清除原有内容
            value.label = { //构建文字标签
                text: value.properties.NAME, // 假设属性名为NAME
                font: '16px Arial',
                fillColor: Cesium.Color.BLACK,
                verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直对齐方式
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式
                pixelOffset: new Cesium.Cartesian2(0, -10), //偏移量
                show: true,
                scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.1), //根据相机距离调整大小
                disableDepthTestDistance: Number.POSITIVE_INFINITY, //防止被地形遮挡
            };
        });
    }).catch(function (error) {
        console.log('加载GeoJSON数据时出错:', error);
    });
}

为LineString/MultiLineString属性数据添加文字

export async function addLabel2LineStringData(viewer, url){
    const promise = Cesium.GeoJsonDataSource.load(url);
    promise.then(async function (dataSource) {
        await viewer.dataSources.add(dataSource);//加载GeoJson数据并添加至数据源
        //遍历所有实体
        const entities = dataSource.entities.values;
        for (const entity of entities) {
            if (entity.polyline){ //GeoJson中的LineString属性在Cesium中加载后为polyline实体
                //获取点的坐标
                const positions = entity.polyline.positions.getValue();
                //计算线段中点,获取中点的笛卡尔坐标
                const startPoint = positions[0];
                const endPoint = positions[positions.length - 1];
                const midPointCartesian = Cesium.Cartesian3.midpoint(startPoint, endPoint, new Cesium.Cartesian3());
                //笛卡尔坐标中点转换为地理坐标
                const midPointCartographic = Cesium.Cartographic.fromCartesian(midPointCartesian);
                //添加文字标注
                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(midPointCartographic.longitude),
                        Cesium.Math.toDegrees(midPointCartographic.latitude),
                        midPointCartographic.height), //文字位置,对应Cesium三维地球的经纬度、高度,高度默认为0
                    label: {
                        text: entity.properties.DJ, // 文字内容
                        font: '16px Arial', // 字体样式
                        fillColor: Cesium.Color.RED, // 文字颜色
                        outlineColor: Cesium.Color.BLACK, // 轮廓颜色
                        outlineWidth: 2, // 轮廓宽度
                        style: Cesium.LabelStyle.FILL, // 文字样式
                        verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直对齐方式
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式
                        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
                        scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.1),//根据相机距离调整大小
                    }
                })
                entity.show = false; //隐藏原始线段
            }
        }
    }).catch(function (error) {
        console.log('加载GeoJSON数据时出错:', error);
    });
}

为Polygon/MultiPolygon属性数据添加文字

export async function addLabel2MultiPolygonData(viewer, url) {
    const promise = Cesium.GeoJsonDataSource.load(url);
    promise.then(async function (dataSource) {
        await viewer.dataSources.add(dataSource);//加载GeoJson数据并添加至数据源
        const entities = dataSource.entities.values;
        // 遍历所有实体
        for (const entity of entities) {
            // 判断是否为面数据
            if (entity.polygon) {
                // 获取面的坐标点数组
                const positions = entity.polygon.hierarchy.getValue().positions;
                // 计算面的中心点
                const center = Cesium.BoundingSphere.fromPoints(positions).center;
                // 添加文字标注
                viewer.entities.add({
                    position: center,
                    label: {
                        text: '你的文字内容', // 文字内容
                        font: '16px Arial', // 字体样式
                        fillColor: Cesium.Color.BLUE, // 文字颜色
                        outlineColor: Cesium.Color.BLACK, // 轮廓颜色
                        outlineWidth: 2, // 轮廓宽度
                        style: Cesium.LabelStyle.FILL, // 文字样式
                        verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直对齐方式
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式
                        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
                        scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.1),
                    }
                });
                entity.show = false; // 隐藏原始面数据
            }
        }
    }).catch(function (error) {
        console.log('加载GeoJSON数据时出错:', error);
    });
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值