为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);
});
}