Cesium 自带的标注碰撞检测实现标注避让
- 随机生成10000个点
let labels: any = []
function addLabel(){labels = viewer.scene.primitives.add(new Cesium.LabelCollection())for (let index = 0; index < 10000; index++) {const angle = 2 * Math.PI * Math.random() // 随机角度labels.add({id: index,show: false,font: "14px sans-serif",position: Cesium.Cartesian3.fromDegrees(113.381345 + Math.cos(angle) * 10 * Math.random(), 30.287564 + Math.sin(angle) * 10 * Math.random(), 0),text: "标注" + index, // props.CJGZQYMC,disableDepthTestDistance: 10000.0,pixelOffset: new Cesium.Cartesian2(10, 0),// 这里设置了就不会被遮盖了，设为负值则在更上层eyeOffset: new Cesium.Cartesian3(0, 0, -500)})}
}- 避让计算
const rectangleCollisionCheck: any = new Cesium.RectangleCollisionChecker()function calculateLabel() {const padding = 20rectangleCollisionCheck._tree.clear()for (const oneLabel of labels._labels) {if (oneLabel) {try {const ssPos = oneLabel.computeScreenSpacePosition(CIM.viewer.scene)let boundingRectangle = nulltry {boundingRectangle = Cesium.Label.getScreenSpaceBoundingBox(oneLabel, ssPos)} catch (e) {console.log(e)}if (boundingRectangle) {const { x, y, width, height } = boundingRectangleif (-Infinity === x || -Infinity === y || -Infinity === width || -Infinity === height) {oneLabel.show = false} else {const west = x - paddingconst south = y - paddingconst east = x + width + paddingconst north = y + height + paddingconst rectangle = new Cesium.Rectangle(west, south, east, north)const isCollide = rectangleCollisionCheck.collides(rectangle)if (isCollide) {oneLabel.show = false} else {oneLabel.show = truerectangleCollisionCheck.insert(oneLabel.id, rectangle)}}} else {oneLabel.show = false}} catch (e) {oneLabel.show = falseconsole.log("🚀 ~ updateLabelVisibility ~ e:", e)}} else {oneLabel.show = false}}
}
- 相机监听事件
viewer.camera.moveEnd.addEventListener(() => {calculateLabel()console.log("🚀 ~ CIM.viewer.camera.changed.addEventListener ~ calculateLabel:")})
如果是多个图层，可以通过优先占位的方式实现优先显示。
效果图：
