[英]Ammap.js 4 - set map to be half static view globe + set mapObject to be center
我正在使用 Ammap js 版本 4 来构建静态网站。
当用户单击特定 div 时,我想根据特定的经纬度坐标和旋转动画将地球居中,有什么想法吗? 我已经尝试了函数 zoomToMapObject,但它不能正常工作,而且我不需要缩放功能。
我的代码:
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4maps.MapChart);
var interfaceColors = new am4core.InterfaceColorSet();
chart.seriesContainer.draggable = false;
chart.seriesContainer.resizable = false;
chart.homeGeoPoint = {
latitude: 0,
longitude: 0
};
chart.deltaLongitude = 100;
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.calculateVisualCenter = true;
polygonSeries.tooltip.background.fillOpacity = 0.2;
polygonSeries.tooltip.background.cornerRadius = 20;
var template = polygonSeries.mapPolygons.template;
template.nonScalingStroke = true;
template.fill = am4core.color("#D3DDE7");
template.stroke = am4core.color("#c5cfd8");
polygonSeries.calculateVisualCenter = true;
template.propertyFields.id = "id";
template.tooltipPosition = "fixed";
template.fillOpacity = 1;
try {
chart.geodata = am4geodata_worldLow;
} catch (e) {
chart.raiseCriticalError(
new Error(
'Map geodata could not be loaded. Please download the latest <a href="https://www.amcharts.com/download/download-v4/">amcharts geodata</a> and extract its contents into the same directory as your amCharts files.'
)
);
}
let cities = chart.series.push(new am4maps.MapImageSeries());
cities.mapImages.template.nonScaling = true;
let city = cities.mapImages.template.createChild(am4core.Circle);
city.radius = 10;
// city.fill = am4core.color("#666EE8");
function addCity(coords, title, color) {
let city = cities.mapImages.create();
city.fill = am4core.color(color);
city.latitude = coords.latitude;
city.longitude = coords.longitude;
city.tooltipText = title;
return city;
}
// Set projection
chart.projection = new am4maps.projections.Orthographic();
chart.panBehavior = "rotateLong";
let paris = addCity(
{ latitude: 48.8567, longitude: 2.351 },
"Paris",
"#ff0000"
);
let toronto = addCity(
{ latitude: 43.8163, longitude: -79.4287 },
"Toronto",
"#ff9d00"
);
let la = addCity(
{ latitude: 34.3, longitude: -118.15 },
"Los Angeles",
"#b600ff"
);
//let havana = addCity({ latitude: 23, longitude: -82 }, "Havana");
let polygonTemplate = polygonSeries.mapPolygons.template;
var lineSeries = chart.series.push(new am4maps.MapLineSeries());
lineSeries.mapLines.template.stroke = am4core.color("#666EE8");
lineSeries.mapLines.template.strokeWidth = 2;
lineSeries.data = [
{
multiGeoLine: [
[
{ latitude: paris.latitude, longitude: paris.longitude },
{ latitude: toronto.latitude, longitude: toronto.longitude },
{ latitude: la.latitude, longitude: la.longitude }
]
]
}
];
document.getElementsByClassName("option-1")[0].onmouseover = function() {
chart.zoomLongitude = paris.longitude;
chart.zoomLatitude = paris.latitude;
};
document.getElementsByClassName("option-2")[0].onmouseover = function() {
chart.zoomLongitude = toronto.longitude;
chart.zoomLatitude = toronto.latitude;
};
document.getElementsByClassName("option-3")[0].onmouseover = function() {
chart.zoomLongitude = la.longitude;
chart.zoomLatitude = la.latitude;
};
地图/地球位置由deltaLongitude
控制。 你甚至在你的代码中都有。 ( 关于地图旋转的相关文档)
因此,如果您需要将地球旋转到特定位置,您可以设置deltaLongitude
甚至deltaLongitude
设置动画。 例如:
// rotate to Asia instantly
chart.deltaLongitude = -90;
// or animate rotation
animation = chart.animate({
property: "deltaLongitude",
to: -90
}, 2000);
这是一个工作示例:
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */ // Themes begin am4core.useTheme(am4themes_animated); // Themes end var chart = am4core.create("chartdiv", am4maps.MapChart); // Set map definition chart.geodata = am4geodata_worldLow; // Set projection chart.projection = new am4maps.projections.Orthographic(); chart.panBehavior = "rotateLongLat"; chart.deltaLatitude = -20; chart.padding(20,20,20,20); // Create map polygon series var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries()); // Make map load polygon (like country names) data from GeoJSON polygonSeries.useGeodata = true; // Configure series var polygonTemplate = polygonSeries.mapPolygons.template; polygonTemplate.tooltipText = "{name}"; polygonTemplate.fill = am4core.color("#47c78a"); polygonTemplate.stroke = am4core.color("#454a58"); polygonTemplate.strokeWidth = 0.5; var graticuleSeries = chart.series.push(new am4maps.GraticuleSeries()); graticuleSeries.mapLines.template.line.stroke = am4core.color("#ffffff"); graticuleSeries.mapLines.template.line.strokeOpacity = 0.08; graticuleSeries.fitExtent = false; // Water chart.backgroundSeries.mapPolygons.template.polygon.fill = am4core.color("#454a58"); chart.backgroundSeries.mapPolygons.template.polygon.fillOpacity = 1; // Create hover state and set alternative fill color var hs = polygonTemplate.states.create("hover"); hs.properties.fill = chart.colors.getIndex(0).brighten(-0.5); // Rotation function var animation; function rotateTo(delta) { if(animation){ animation.stop(); } animation = chart.animate({ property: "deltaLongitude", to: delta }, 2000); }
#chartdiv { width: 100%; height: 500px; }
<script src="https://www.amcharts.com/lib/4/core.js"></script> <script src="https://www.amcharts.com/lib/4/maps.js"></script> <script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script> <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv"></div> <input type="button" value="Europe" onclick="rotateTo(0);" /> <input type="button" value="Americas" onclick="rotateTo(90);" /> <input type="button" value="Asia" onclick="rotateTo(-90);" /> <input type="button" value="Australia" onclick="rotateTo(-130);" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.