要求:給空間線段添加描述,(百度搜索全是通過圖標的方法)。
先貼上圖片:
思路:在生成線段的實體內取得該線段所有定位(postion)取其中心點,在該點添加一個 point實體對其添加文字描述。
代碼:
var startPt = Cesium.Cartesian3.fromDegrees(coordData[0], coordData[1], coordData[2]);//線的開始 x y z 經度 緯度 高度
var endPt = Cesium.Cartesian3.fromDegrees(coordData[3], coordData[4], coordData[5]);//線的結束
var curLinePointsArr = generateCurve(startPt, endPt);
function generateCurve(startPoint, endPoint) {
var addPointCartesian = new Cesium.Cartesian3();
Cesium.Cartesian3.add(startPoint, endPoint, addPointCartesian);
var midPointCartesian = new Cesium.Cartesian3();
Cesium.Cartesian3.divideByScalar(addPointCartesian, 2, midPointCartesian);
var midPointCartographic = Cesium.Cartographic.fromCartesian(midPointCartesian);
midPointCartographic.height = Cesium.Cartesian3.distance(startPoint, endPoint) / 10;
var midPoint = new Cesium.Cartesian3();
Cesium.Ellipsoid.WGS84.cartographicToCartesian(midPointCartographic, midPoint);
var spline = new Cesium.LinearSpline({
times: [0.0, 1.0],
points: [startPoint, endPoint]
});
var curvePointsArr = [];
for (var i = 0, len = 300; i < len; i++) {
curvePointsArr.push(spline.evaluate(i / len));
}
return curvePointsArr;
}
link = viewer.entities.add({ // 線
description: 'background-line',
polyline: {
width: 6,
positions: curLinePointsArr, //線定位
material: Cesium.Color.fromCssColorString(colorData[0])
}
});
//取線postions集合,取其1/2處的postion
var position = link._polyline._positions._value[link._polyline._positions._value.length/2];
//生成點
let point = viewer.entities.add({ //點
position:position,
point: {
pixelSize: 1, //設置小點 基本看不見
color: new Cesium.Color(0.0, 0.0, 0.0, 0.0) //顏色設置透明
},
label: {
text:'aaa', //描述內容
font: '30px Sans-Serif', //字體大小 類型
fillColor: Cesium.Color.RED, //顏色
outlineColor: Cesium.Color.GOLD,
style: Cesium.LabelStyle.CENTER_LABEL,
// 垂直位置
verticalOrigin: Cesium.VerticalOrigin.BUTTON,
// 中心位置
pixelOffset: new Cesium.Cartesian2(0, -10),
//設置背景顏色透明
backgroundColor: new Cesium.Color(0.0, 0.0, 0.0, 0.0),
//打開背景 打開背景 (不會被線段覆蓋)
showBackground: true,
}
});
有用的給個贊吧!