MapProjection

MapProjection类是CesiumJS中的一个基类，其作用是将地球表面的弧度坐标转换为屏幕上的像素坐标，并进行反向转换。

示例

// 创建一个MapProjection实例
var projection = new Cesium.WebMercatorProjection();

// 将经纬度坐标转换为像素坐标
var cartesian3 = Cesium.Cartesian3.fromDegrees(-120.0, 40.0);
var pixelPosition = projection.project(cartesian3);

// 将像素坐标转换为经纬度坐标
var cartesian3 = projection.unproject(pixelPosition);
var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
console.log(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude));

方法

构造函数

new Cesium.MapProjection(projection);

• projection： Ellipsoid类型，表示当前投影所使用的椭球体。

project()

MapProjection.prototype.project(cartesian, result);

• cartesian： Cartesian3类型，表示需要转换为像素坐标的三维笛卡尔坐标。
• result： Cartesian2类型，用于存储转换后的像素坐标。

该方法将地球表面的三维笛卡尔坐标转换为屏幕上的像素坐标。

unproject()

MapProjection.prototype.unproject(pixel, result);

• pixel： Cartesian2类型，表示需要转换为三维笛卡尔坐标的像素坐标。
• result： Cartesian3类型，用于存储转换后的三维笛卡尔坐标。

该方法将屏幕上的像素坐标转换为地球表面的三维笛卡尔坐标。

示例

在CesiumJS Sandcastle中运行以下代码，查看MapProjection类的使用示例。

var viewer = new Cesium.Viewer("cesiumContainer");
viewer.imageryLayers.addImageryProvider(
  new Cesium.ArcGisMapServerImageryProvider({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
  })
);

var projection = new Cesium.WebMercatorProjection();
var cartesian3 = Cesium.Cartesian3.fromDegrees(-120.0, 40.0);
var pixelPosition = projection.project(cartesian3);

var entities = viewer.entities;
entities.add({
  position: cartesian3,
  point: {
    pixelSize: 10,
    color: Cesium.Color.RED,
  },
});

var drawingCollection = new Cesium.PrimitiveCollection();
viewer.scene.primitives.add(drawingCollection);
var linePrimitive = new Cesium.Primitive({
  geometryInstances: new Cesium.GeometryInstance({
    geometry: new Cesium.PolylineGeometry({
      positions: [
        cartesian3,
        projection.unproject(new Cesium.Cartesian2(pixelPosition.x, pixelPosition.y + 50)),
      ],
      width: 2,
    }),
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOW),
    },
  }),
});

drawingCollection.add(linePrimitive);

参考资料

• Cesium官方文档
• CesiumJS Sandcastle