cesium給線段添加標注


要求:給空間線段添加描述,(百度搜索全是通過圖標的方法)。

先貼上圖片:

 

 

 

 

思路:在生成線段的實體內取得該線段所有定位(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,
    }
});

有用的給個贊吧!  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM