铯js。如何绘制线条将标签绑定到位置

Question

我想画一条线将实体绑定到带有偏移量的标签。 CesiumJS允许偏移标签，但不能从一个位置绘制一条线（或多段线）到像这个图像中的红线那样的偏移。

我该怎么办？任何消化？

我正在使用像素偏移。但使用眼睛偏移没有问题

 labels.add({
        position: Cesium.Cartesian3.fromDegrees(-75.1641667, 29.9522222),
        text: 'Another label',
        pixelOffset: new Cesium.Cartesian2(100,-100)

    });

Answer 1

这样做的最好方法可能是一个广告牌，上面有一行图像。如果它是pixelOffset，则长度永远不会改变。您可以放置​​一条白线图像，并使用color属性设置任何其他颜色。

var viewer = new Cesium.Viewer('cesiumContainer',
                               {timeline: false, animation: false});
var scene = viewer.scene;
var offsetX = 50, offsetY = -80;
var pos = Cesium.Cartesian3.fromDegrees(-75.1641667, 29.9522222);

var labels = scene.primitives.add(new Cesium.LabelCollection());
labels.add({
    position: pos,
    text: 'Another label',
    pixelOffset: new Cesium.Cartesian2(offsetX, offsetY)
});

var canvas = document.createElement('canvas');
canvas.width = Math.abs(offsetX);
canvas.height = Math.abs(offsetY);
var context2D = canvas.getContext('2d');
context2D.beginPath();
context2D.lineWidth = 3;
context2D.strokeStyle = '#ffffff';
context2D.moveTo((offsetX < 0) ? -offsetX : 0, (offsetY < 0) ? -offsetY : 0);
context2D.lineTo((offsetX < 0) ? 0 : offsetX, (offsetY < 0) ? 0 : offsetY);
context2D.stroke();

var billboards = scene.primitives.add(new Cesium.BillboardCollection());

var billboard = billboards.add({
    color : Cesium.Color.RED,
    image : canvas,
    pixelOffset: new Cesium.Cartesian2(offsetX * 0.5, offsetY * 0.5),
    position : pos
});

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}

<link href="http://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script>
<div id="cesiumContainer"></div>