Ниже приведен мой код для приложения для составления больших кругов, над которым я работаю, которое рисует большие круги 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);
Однако под определенными углами линия большого круга проходит над точками в начале и в конце.У меня есть несколько вопросов:
- Как я могу заставить обе точки всегда находиться выше линии большого круга?
- Как добавить маркер Google Maps (красный стиль), чтобы он указывал вниз и чтобы его заостренный конец находился непосредственно над начальной и конечной точкой?И мне также хотелось бы, чтобы маркер не занимал прямоугольник пространства, только сам маркер отображается на карте.