铯.如何画线将标签绑定到一个位置

Question

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

我该怎么做？有什么建议吗？

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

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

    });

Answer 1

最好的方法可能是在广告牌上贴上线条的图像。如果它是 pixelOffset，则长度永远不会改变。你可以放一张白线的图片，然后用颜色属性设置任何其他颜色。

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationInstructionsInitiallyVisible: false, animation: false, timeline: false,
    // These next 6 lines are just to avoid Stack Snippet error messages.
    imageryProvider : new Cesium.TileMapServiceImageryProvider({
        url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
    }),
    baseLayerPicker : false,
    geocoder : false,
    infoBox : 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="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Cesium.js"></script>
<div id="cesiumContainer"></div>

铯.如何画线将标签绑定到一个位置

Cesium js. How Draw line binding a label to a position

label

pixel

line

offset

cesium