Цезий - точка силы над большой круговой линией - PullRequest
0 голосов
/ 20 сентября 2019

Ниже приведен мой код для приложения для составления больших кругов, над которым я работаю, которое рисует большие круги WGS 1984 между точками на поверхности Земли, используя Cesium.js.Объект airportData, показанный ниже, показывает два аэропорта и является усеченной версией полного списка (полный список содержит 300 000 строк JS +, поэтому для ясности не показан).

var viewer = new Cesium.Viewer("map");

var airportData = {
    "EDDM": {
        "icao": "EDDM",
        "iata": "MUC",
        "name": "Munich International Airport",
        "city": "Munich",
        "state": "Bavaria",
        "country": "DE",
        "elevation": 1487,
        "lat": 48.3538017273,
        "lon": 11.7861003876,
        "tz": "Europe\/Berlin"
    },
    "KSFO": {
        "icao": "KSFO",
        "iata": "SFO",
        "name": "San Francisco International Airport",
        "city": "San Francisco",
        "state": "California",
        "country": "US",
        "elevation": 13,
        "lat": 37.6189994812,
        "lon": -122.375,
        "tz": "America\/Los_Angeles"
    }
};

function plotLineAndPoints(start, end, name)
{
    var origin_lat = start.lat;
    var origin_lon = start.lon;
    var dest_lat = end.lat;
    var dest_lon = end.lon;

    var line = viewer.entities.add({
        name : name,
        polyline : {
            positions : Cesium.Cartesian3.fromDegreesArray([origin_lon, origin_lat,
                                                            dest_lon, dest_lat]),
            width : 6,
            material : new Cesium.PolylineOutlineMaterialProperty({
                color : Cesium.Color.DEEPSKYBLUE,
                outlineWidth : 4,
                outlineColor : Cesium.Color.DARKBLUE
            })
        }
    });

    var start = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(start.lon, start.lat, 500),
        point: {
            pixelSize: 8,
            color: Cesium.Color.WHITE,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 3
        },
        label: {
            text: start.name,
            font: "14pt monospace",
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, -9)
        }
    });

    var end = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(end.lon, end.lat, 500),
        point: {
            pixelSize: 8,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 3
        },
        label: {
            text: end.name,
            font: "14pt monospace",
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, -9)
        }
    });
}

plotLineAndPoints(airportData.EDDM, airportData.KSFO, "Path from EDDM to KSFO");

viewer.zoomTo(viewer.entities);

Однако под определенными углами линия большого круга проходит над точками в начале и в конце.У меня есть несколько вопросов:

  1. Как я могу заставить обе точки всегда находиться выше линии большого круга?
  2. Как добавить маркер Google Maps (красный стиль), чтобы он указывал вниз и чтобы его заостренный конец находился непосредственно над начальной и конечной точкой?И мне также хотелось бы, чтобы маркер не занимал прямоугольник пространства, только сам маркер отображается на карте.
...