美国地图，用于以角度显示安培飞机上的航班详细信息

如何解决美国地图，用于以角度显示安培飞机上的航班详细信息

HTML：

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/usaLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS：

#chartdiv {
  width: 100%;
  height: 500px
}

TS：

am4core.useTheme(am4themes_animated);
// Themes end

// Create map instance
var chart = am4core.create("chartdiv",am4maps.MapChart);

var interfaceColors = new am4core.InterfaceColorSet();

// Set map deFinition
chart.geodata = am4geodata_usaLow;

// Set projection
chart.projection = new am4maps.projections.AlbersUsa();



// Data for general and map use
var originCities = [
    {
        "id": "livingston","title": "Livingston","destinations": ["shawnee"],"latitude": 55.9007,"longitude": 3.5181,}
];

var destinationCities = [{
    "id": "shawnee","title": "Shawnee","latitude": 35.3273,"longitude": 96.9253
}];

// Default to London view
//chart.homeGeoPoint = { "longitude": originCities[0].zoomLongitude,"latitude": originCities[0].zoomLatitude };
//chart.homeZoomLevel = originCities[0].zoomLevel;

var targetSVG = "M9,0C4.029,4.029,9s4.029,9,9s9-4.029,9-9S13.971,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,2.07s6.93,3.1,6.93,6.93S12.83,15.93,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5 S12.5,7.067,12.5,9z";
var planesVG = "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47";

// Texts
var labelsContainer = chart.createChild(am4core.Container);
labelsContainer.isMeasured = false;
labelsContainer.x = 80;
labelsContainer.y = 27;
labelsContainer.layout = "horizontal";
labelsContainer.zIndex = 10;

var plane = labelsContainer.createChild(am4core.Sprite);
plane.scale = 0.15;
plane.path = planesVG;
plane.fill = am4core.color("#cc0000");

var title = labelsContainer.createChild(am4core.Label);
title.text = "DEMO";
title.fill = am4core.color("#cc0000");
title.fontSize = 20;
title.valign = "middle";
title.dy = 2;
title.marginLeft = 15;



// The world
var worldpolygonSeries = chart.series.push(new am4maps.MappolygonSeries());
worldpolygonSeries.useGeodata = true;
worldpolygonSeries.fillOpacity = 0.6;
worldpolygonSeries.exclude = ["AQ"];

// Origin series (big targets,London and Vilnius)
var originImageSeries = chart.series.push(new am4maps.MapImageSeries());

var originImageTemplate = originImageSeries.mapImages.template;

originImageTemplate.propertyFields.latitude = "latitude";
originImageTemplate.propertyFields.longitude = "longitude";
originImageTemplate.propertyFields.id = "id";

originImageTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer;
originImageTemplate.nonScaling = true;
originImageTemplate.tooltipText = "{title}";

originImageTemplate.setStateOnChildren = true;
originImageTemplate.states.create("hover");

originImageTemplate.horizontalCenter = "middle";
originImageTemplate.verticalCenter = "middle";

var originHitCircle = originImageTemplate.createChild(am4core.Circle);
originHitCircle.radius = 11;
originHitCircle.fill = interfaceColors.getFor("background");

var originTargetIcon = originImageTemplate.createChild(am4core.Sprite);
originTargetIcon.fill = interfaceColors.getFor("alternativeBackground");
originTargetIcon.strokeWidth = 0;
originTargetIcon.scale = 1.3;
originTargetIcon.horizontalCenter = "middle";
originTargetIcon.verticalCenter = "middle";
originTargetIcon.path = targetSVG;


// when hit on city,change lines
originImageTemplate.events.on("hit",function(event) {
    showLines(event.target.dataItem);
})

// destination series (small targets)
var destinationImageSeries = chart.series.push(new am4maps.MapImageSeries());
var destinationImageTemplate = destinationImageSeries.mapImages.template;

destinationImageTemplate.nonScaling = true;
destinationImageTemplate.tooltipText = "{title}";
destinationImageTemplate.fill = interfaceColors.getFor("alternativeBackground");
destinationImageTemplate.setStateOnChildren = true;
destinationImageTemplate.states.create("hover");

destinationImageTemplate.propertyFields.latitude = "latitude";
destinationImageTemplate.propertyFields.longitude = "longitude";
destinationImageTemplate.propertyFields.id = "id";

var destinationHitCircle = destinationImageTemplate.createChild(am4core.Circle);
destinationHitCircle.radius = 7;
destinationHitCircle.fillOpacity = 1;
destinationHitCircle.fill = interfaceColors.getFor("background");

var destinationTargetIcon = destinationImageTemplate.createChild(am4core.Sprite);
destinationTargetIcon.scale = 0.7;
destinationTargetIcon.path = targetSVG;
destinationTargetIcon.horizontalCenter = "middle";
destinationTargetIcon.verticalCenter = "middle";

originImageSeries.data = originCities;
destinationImageSeries.data = destinationCities;

// Line series
var lineseries = chart.series.push(new am4maps.MapLineseries());
lineseries.mapLines.template.line.strokeOpacity = 0.5;

chart.events.on("ready",function() {
    showLines(originImageSeries.dataItems.getIndex(0));
})


var currentOrigin;

function showLines(origin) {

    var dataContext = origin.dataContext;
    var destinations = dataContext.destinations;
    // clear old
    lineseries.mapLines.clear();
    lineseries.toBack();
    worldpolygonSeries.toBack();

    currentOrigin = origin;

    if (destinations) {
        for (var i = 0; i < destinations.length; i++) {
            var line = lineseries.mapLines.create();
            line.imagesToConnect = [origin.mapImage.id,destinations[i]];
        }
    }


var graticuleSeries = chart.series.push(new am4maps.GraticuleSeries());
graticuleSeries.mapLines.template.line.strokeOpacity = 0.05;

有什么方法可以渲染美国地图以显示航班详细信息...

我正在尝试获取美国（美国）地图，以从原点到目的地伪造航班信息...但没有重新调整..或

是否有其他可以显示方向并且可以在角度图中使用的图形

任何人都可以建议如何做....

谢谢！!!!