Cesium 带锚点的Label

Darren~52HZ

已于 2022-04-06 11:24:43 修改

阅读量1.4k

点赞数

分类专栏： Cesium 文章标签： js canvas html

于 2022-03-31 16:27:32 首次发布

本文链接：https://blog.csdn.net/qq_35984445/article/details/123874532

版权

Cesium 专栏收录该内容

14 篇文章 14 订阅

订阅专栏

该博客介绍了如何在Cesium三维地球中创建带有锚点的Label，通过创建锚点、Label的canvas标签、获取屏幕坐标、设置canvas坐标以及管理显示隐藏，实现动态定位和更新。此外，还提供了原型调用示例，展示了具体参数配置。

摘要由CSDN通过智能技术生成

展示图

在这里插入图片描述

功能思路

1、首先创建锚点

this.point = viewer.entities.add({
	position: n,//笛卡尔坐标
	point: {
		color: Cesium.Color.fromCssColorString(this._data.anchorstyle.color || "#67ADDF").withAlpha(this._data.anchorstyle.coloralpha || 0.5),
		pixelSize: this._data.anchorstyle.pixelSize || 5,
		outlineColor: Cesium.Color.fromCssColorString(this._data.anchorstyle.outlineColor || '#FF0000').withAlpha(this._data.anchorstyle.outlineColoralpha || 0.5),
		outlineWidth: this._data.anchorstyle.outlineWidth || 3,
		show: this._data.anchorstyle.show || true,
		disableDepthTestDistance: this._data.maxDistance
	}
});

2、接着创建Label的canvas标签，并设置canvas标签中的样式

this.canvas = document.createElement("canvas");
this.canvas.style.display = "block";
this.canvas.style.zIndex = "99";//置顶

//设置样式
var 2dcanvas = this.canvas.getContext("2d");
2dcanvas .fillStyle = "rgba(100, 100, 100, 0.4)";
...

3、获取屏幕坐标

//当前锚点的笛卡尔坐标
var nowposition = this.point.position.getValue(Cesium.JulianDate.now());
//笛卡尔坐标转屏幕坐标
var screen = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, nowposition);
if (!Cesium.defined(screen)) return undefined;

4、最后设置canvas标签的坐标，并以锚点定位，每帧都要监听进行实时刷新

//获取父容器中的TextRectangle x/y
var tx = this.viewer.container.getClientRects()[0].x;
var ry = this.viewer.container.getClientRects()[0].y;
this.canvas.style.left = tx + (screen.x + 0) + "px";
this.canvas.style.top = ry + (screen.y - 50) + "px";//50为偏移设置
if (this.data.maxDistance) {
	var nowi = this.point.position.getValue(Cesium.JulianDate.now());
	var position1 = Cesium.Cartesian3.distance(nowi, this.viewer.scene.camera.position);
	最大可视距离
	if (position1 > this.data.maxDistance || !this.show) {
		this.setVisible(false)
	} else {
		this.setVisible(true)
	}
}

5、设置隐藏或显示

//bol为布尔值
function setVisible(bol){
if (this.point) {
	this.point.show = bol
}
if (this.canvas) {
	this.canvas.style.display = bol ? "block" : "none"
}
this.viewer.scene.requestRender()
}

原型调用

var obj ={
	viewer:viewer,
	position: [longitude, latitude, 10],
	width: 192, //Label的宽度
	height: 32, //Label的高度
	text: '带锚点的Label', //文字内容
	lineWidth: 1, //线宽
	textColor: '#FF0000', //文字颜色
	textbackground:"#D1D1D1",
	fontSize: 16, //字号
	maxDistance: 1000000 ,//最大可视距离
	anchorstyle:{
		color:"#000000",
		coloralpha:0.5,
		pixelSize:5,
		outlineColor:"#FF0000",
		outlineColoralpha:0.5,
		outlineWidth:2,
		show:true
	}
}
var Label = new Labelcanvas(obj);