Ammap.js 4 - 将地图设置为半静态视图地球 + 将 mapObject 设置为中心

Question

我正在使用 Ammap js 版本 4 来构建静态网站。

我想把地图做成半个地球像：
当用户点击特定的 div 我想根据特定的 lat/long 旋转动画使地球居中，有什么想法吗？我试过 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;
      };

Answer 1

map/globe位置由deltaLongitude控制。你甚至在你的代码中有它。 (related docs about map rotation)

因此，如果您需要将地球旋转到特定位置，您可以设置 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);" />

Ammap.js 4 - 将地图设置为半静态视图地球 + 将 mapObject 设置为中心

Ammap.js 4 - set map to be half static view globe + set mapObject to be center

javascript

html

amcharts

ammap