问题描述
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;
我正在尝试获取美国(美国)地图,以从原点到目的地伪造航班信息...但没有重新调整..或
是否有其他可以显示方向并且可以在角度图中使用的图形
任何人都可以建议如何做....
谢谢!!!!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)