我使用AmChart v5在globe/map视图中创建地图。
我的期望是-当我从实际的平面地图视图切换到全球视图时，然后是
- 或者它应该显示整个地球，并将主页位置集中在中心
- 或者地球仪应该以主位置区域为焦点(放大(显示，如果我手动缩小，它应该在中心显示整个地球仪
但是看看我得到的这个屏幕截图中的结果。切换后，全局视图看起来已损坏，没有按预期显示。https://i.postimg.cc/GmQSVCDb/Map-Globe-Toggle-Not-Working-1.png
这是我使用的代码
`
var chart = root.container.children.push(am5map.MapChart.new(root, {
panX: "translateX",
panY: "translateY",
wheelSensitivity: 0.7,
projection: am5map.geoMercator(),
homeZoomLevel: 3,
homeGeoPoint: { longitude: -0.1262, latitude: 51.5002 },
minZoomLevel: 1,
maxZoomLevel: 16
}));
var switchButton = cont.children.push(am5.Button.new(root, {
themeTags: ["switch"],
centerY: am5.p50,
icon: am5.Circle.new(root, {
themeTags: ["icon"]
})
}));
switchButton.on("active", function () {
if (!switchButton.get("active")) {
chart.set("projection", am5map.geoMercator());
chart.set("panX", "translateX");
chart.set("panY", "translateY");
}
else {
chart.set("projection", am5map.geoOrthographic());
chart.set("panX", "rotateX");
chart.set("panY", "rotateY");
}
});
`
看看"；动画地图"；部分。我试图实现类似的地图地球仪功能(尽管不完全相同(
https://preview.keenthemes.com/html/metronic/docs/charts/amcharts/maps
<html>
<head></head>
<style></style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<body>
<div id="chartdiv" style="width: 600px;height: 500px;background:#171717;margin: 0 auto;padding: 30px;"></div>
<script>
am5.ready(function () {
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(am5map.MapChart.new(root, {
panX: "translateX",
panY: "translateY",
wheelSensitivity: 0.7,
projection: am5map.geoMercator(),
homeZoomLevel: 3,
homeGeoPoint: { longitude: -0.1262, latitude: 51.5002 },
minZoomLevel: 1,
maxZoomLevel: 16
}));
var cont = chart.children.push(am5.Container.new(root, {
layout: root.horizontalLayout,
x: 20,
y: 40
}));
cont.children.push(am5.Label.new(root, {
centerY: am5.p50,
text: "Map"
}));
var switchButton = cont.children.push(am5.Button.new(root, {
themeTags: ["switch"],
centerY: am5.p50,
icon: am5.Circle.new(root, {
themeTags: ["icon"]
})
}));
switchButton.on("active", function () {
if (!switchButton.get("active")) {
chart.set("projection", am5map.geoMercator());
chart.set("panX", "translateX");
chart.set("panY", "translateY");
}
else {
chart.set("projection", am5map.geoOrthographic());
chart.set("panX", "rotateX");
chart.set("panY", "rotateY");
}
});
cont.children.push(
am5.Label.new(root, {
centerY: am5.p50,
text: "Globe"
})
);
var backgroundSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
backgroundSeries.mapPolygons.template.setAll({
fill: root.interfaceColors.get("alternativeBackground"),
fillOpacity: 0,
strokeOpacity: 0
});
backgroundSeries.data.push({
geometry: am5map.getGeoRectangle(90, 180, -90, -180)
});
var polygonSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow,
exclude : ["AQ"]
})
);
polygonSeries.set('fill', am5.color(0x2f2f2f));
var lineSeries = chart.series.push(am5map.MapLineSeries.new(root, {}));
lineSeries.mapLines.template.setAll({
stroke: root.interfaceColors.get("alternativeBackground"),
strokeOpacity: 0.3
});
var pointSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
var colorset = am5.ColorSet.new(root, {});
pointSeries.bullets.push(function () {
var container = am5.Container.new(root, {});
var circle = container.children.push(
am5.Circle.new(root, {
radius: 4,
tooltipY: 0,
fill: "#01a982",
strokeOpacity: 0,
tooltipText: "{title}"
})
);
return am5.Bullet.new(root, {
sprite: container
});
});
var cities = [
{
title: "Brussels",
latitude: 50.8371,
longitude: 4.3676
},
{
title: "Copenhagen",
latitude: 55.6763,
longitude: 12.5681
},
{
title: "Paris",
latitude: 48.8567,
longitude: 2.351
},
{
title: "Reykjavik",
latitude: 64.1353,
longitude: -21.8952
},
{
title: "Moscow",
latitude: 55.7558,
longitude: 37.6176
},
{
title: "Madrid",
latitude: 40.4167,
longitude: -3.7033
},
{
title: "London",
latitude: 51.5002,
longitude: -0.1262,
url: "http://www.google.co.uk"
},
{
title: "Peking",
latitude: 39.9056,
longitude: 116.3958
},
{
title: "New Delhi",
latitude: 28.6353,
longitude: 77.225
},
{
title: "Tokyo",
latitude: 35.6785,
longitude: 139.6823,
url: "http://www.google.co.jp"
},
{
title: "Ankara",
latitude: 39.9439,
longitude: 32.856
},
{
title: "Buenos Aires",
latitude: -34.6118,
longitude: -58.4173
},
{
title: "Brasilia",
latitude: -15.7801,
longitude: -47.9292
},
{
title: "Ottawa",
latitude: 45.4235,
longitude: -75.6979
},
{
title: "Washington",
latitude: 38.8921,
longitude: -77.0241
},
{
title: "Kinshasa",
latitude: -4.3369,
longitude: 15.3271
},
{
title: "Cairo",
latitude: 30.0571,
longitude: 31.2272
},
{
title: "Pretoria",
latitude: -25.7463,
longitude: 28.1876
}
];
for (var i = 0; i < cities.length; i++) {
var city = cities[i];
addCity(city.longitude, city.latitude, city.title);
}
function addCity(longitude, latitude, title) {
pointSeries.data.push({
geometry: { type: "Point", coordinates: [longitude, latitude] },
title: title
});
}
// Make stuff animate on load
chart.appear(1000, 100);
}); // end am5.ready()
</script>
</body>
</html>