Coordinates of display points on Cesium

demand one

need

Draw a point in Cesium and add the coordinates of the point to the point

analyze

• In Cesium, the following code can be used to display the coordinates of a specified point:

//定义点的坐标
var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
//在场景中添加文字标签
var label = viewer.entities.add({
     position: position ,
    point: {
          color: Cesium.Color.RED,    //点位颜色
          pixelSize: 10                //像素点大小
      },
    label : {
        text : "坐标：(" + longitude + ", " + latitude + ", " + height + ")",
        font : '14pt Source Han Sans CN',    //字体样式
        fillColor:Cesium.Color.BLACK,        //字体颜色
        backgroundColor:Cesium.Color.AQUA,    //背景颜色
        showBackground:true,                //是否显示背景颜色
        style: Cesium.LabelStyle.FILL,        //label样式
        outlineWidth : 2,                    
        verticalOrigin : Cesium.VerticalOrigin.CENTER,//垂直位置
        horizontalOrigin :Cesium.HorizontalOrigin.LEFT,//水平位置
        pixelOffset:new Cesium.Cartesian2(10,0)            //偏移
    }
});
 

Among them, longitude, latitude and height represent longitude, latitude and height respectively. This code will add a red point at the specified latitude and longitude and display a text label with coordinate information above the point.

Requirement two

need

Display coordinates of points on line

analyze

1. First, define the latitude and longitude coordinates of the lines and points to be displayed. You can store these coordinates in an array.
   For example:

let lineCoords = [
  Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414),
  Cesium.Cartesian3.fromDegrees(-75.62442398071289, 40.02804946899414),
  Cesium.Cartesian3.fromDegrees(-75.62301635742188, 40.02932357788086),
  Cesium.Cartesian3.fromDegrees(-75.61843872070312, 40.02932357788086)
];
 

let lineCoords = [
  Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414),
  Cesium.Cartesian3.fromDegrees(-75.62442398071289, 40.02804946899414),
  Cesium.Cartesian3.fromDegrees(-75.62301635742188, 40.02932357788086),
  Cesium.Cartesian3.fromDegrees(-75.61843872070312, 40.02932357788086)
];
 

2. Create a collection of points and add the points to the collection.

let points = new Cesium.PointPrimitiveCollection();
for (let i = 0; i < lineCoords.length; i++) {
    
    
  let point = points.add({
    
    
    position : lineCoords[i],
    pixelSize : 10,
    color : Cesium.Color.YELLOW
  });
}
 

let points = new Cesium.PointPrimitiveCollection();
for (let i = 0; i < lineCoords.length; i++) {
    
    
  let point = points.add({
    
    
    position : lineCoords[i],
    pixelSize : 10,
    color : Cesium.Color.YELLOW
  });
}
 

In this example, we use Cesium.PointPrimitiveCollection to create a collection of points. We need to iterate over all the coordinates and add them to the collection. During addition, we can also set the size and color of each point.
3. Finally, add the point collection to the scene.

viewer.scene.primitives.add(points);
 

viewer.scene.primitives.add(points);
 

The full code is as follows:

let lineCoords = [
  Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414),
  Cesium.Cartesian3.fromDegrees(-75.62442398071289, 40.02804946899414),
  Cesium.Cartesian3.fromDegrees(-75.62301635742188, 40.02932357788086),
  Cesium.Cartesian3.fromDegrees(-75.61843872070312, 40.02932357788086)
];

let points = new Cesium.PointPrimitiveCollection();
for (let i = 0; i < lineCoords.length; i++) {
    
    
  let point = points.add({
    
    
    position : lineCoords[i],
    pixelSize : 10,
    color : Cesium.Color.YELLOW
  });
}

viewer.scene.primitives.add(points);
 

let lineCoords = [
  Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414),
  Cesium.Cartesian3.fromDegrees(-75.62442398071289, 40.02804946899414),
  Cesium.Cartesian3.fromDegrees(-75.62301635742188, 40.02932357788086),
  Cesium.Cartesian3.fromDegrees(-75.61843872070312, 40.02932357788086)
];

let points = new Cesium.PointPrimitiveCollection();
for (let i = 0; i < lineCoords.length; i++) {
    
    
  let point = points.add({
    
    
    position : lineCoords[i],
    pixelSize : 10,
    color : Cesium.Color.YELLOW
  });
}

viewer.scene.primitives.add(points);