时间戳

首页 > 解决方案 > 如何动态放大amchart地图

javascript - 如何动态放大amchart地图

问题描述

我正在我的应用程序中实现自定义 amchart.js 地图。看下图：在此处输入图像描述 如上图所示，我希望当用户点击地图中的气泡圈时，地图会放大被点击的区域。所以我想知道放大 amchart 地图的事件。

下面的代码是气泡圈中点击的监听器。所以我认为在这个听众中我需要做一些事情来改变地图的缩放纬度和缩放经度。

/**
 * This function is responsible to filter the datatable 
 * and map chart by cities from country clicked on map
 */
 this.map.addListener('clickMapObject', function (event) {

   // get the devices list from country clicked on map
   const devicesCountryList = self.devicesCountryGrouped[event.mapObject.country_code];

   // group the devices from country by cities
   self.devicesCountryGrouped= self.groupDevicesByCity(devicesCountryList);

   // build bubble chart and map chart based on list of cities from country
   self.buildBubbleChart(self.devicesCityGrouped, 'bubble-city');
   self.buildMapChartByCountry();
 });
}

按照执行地图和气泡配置的代码

/*
 * This method is responsible to create bubble circle based in list of devices from country of city
 */
private buildBubbleChart(deviceList: {}, bubbleType: string) {

  this.images = [];
  // get min and max values for define bubble size frm map chart
  const minBulletSize = 10;
  const maxBulletSize = 40;
  let min = Infinity;
  let max = -Infinity;

  for (const key in deviceList) {
    if (deviceList.hasOwnProperty(key)) {
      const value = deviceList[key].length;
      if ( value < min ) {
        min = value;
      }
      if ( value > max ) {
        max = value;
      }
    }
  }

  // it's better to use circle square to show difference between values, not a radius
  const maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI;
  const minSquare = minBulletSize * minBulletSize * 2 * Math.PI;

  // create circle for each country or city
  for (const key in deviceList) {
    if (deviceList.hasOwnProperty(key)) {
     let map_location;
     const value = deviceList[key].length;
     if (bubbleType === 'bubble-country') {
       map_location = this.getLatLong(this.country_location, key);
     } else {
       map_location = this.getLatLong(this.city_location, key);
     }

      // calculate size of a bubble
      let square = ( value - min ) / ( max - min ) * ( maxSquare - minSquare ) + minSquare;
      if ( square < minSquare ) {
        square = minSquare;
      }
      const size = Math.sqrt( square / ( Math.PI * 2 ) );

      // set each bubble size, value and colors for each country or city
      this.images.push({
        'type': 'circle',
        'theme': 'light',
        'width': size,
        'height': size,
        'longitude': map_location.longitude,
        'latitude': map_location.latitude,
        'color': map_location.color,
        'title': map_location.name,
        'country_code': map_location.code,
        'selectable': true,
        'autoZoom': true,
        'value': value
      });
    }
  }

  this.buildMapChartByCountry();
}


private buildMapChartByCountry() {

   this.map = AmCharts.makeChart('allocation-map', {
     'type': 'map',
     'hideCredits': true,
     'theme': 'light',
     'getAreasFromMap': true,
     'colorSteps': 10,
     'dataProvider': {
       'map': 'worldLow',
       'images': this.images,
       'zoomLevel': 1.0,
       'zoomLongitude': 10,
       'zoomLatitude': 62
     },
     'zoomControl': {
       'zoomControlEnabled': true
     },
     'areasSettings': {
       'autoZoom': true,
       'selectable': true
     }
  });

   const self = this;

   // below has the listener that I that I already put above...

标签： javascriptangularjstypescriptamcharts

解决方案

我为此找到了一种解决方案。用户单击气泡后，我正在构建其他图表。因此，我需要更新此图表并从国家/地区放大区域。为此，在 clickMapObject 侦听器中，我从地图中调用方法 zoomToLongLat()。按照下面的例子：

/**
  * This function is responsible zooms in the map and places provided latitude
  * and longitude in the center of a country.
  *
  * @param: zoomLevel: zoom level in map
  * @param: longitude/latitude: provide coordinates from country
 */
 self.map.zoomToLongLat(4, event.mapObject.longitude, event.mapObject.latitude, false);

所以，完整的方法是：

**
 * This function is responsible to filter the datatable 
 * and map chart by cities from country clicked on map
 */
 this.map.addListener('clickMapObject', function (event) {

   // get the devices list from country clicked on map
   const devicesCountryList = self.devicesCountryGrouped[event.mapObject.country_code];

   // group the devices from country by cities
   self.devicesCountryGrouped= self.groupDevicesByCity(devicesCountryList);

  // build bubble chart and map chart based on list of cities from country
  self.buildBubbleChart(self.devicesCityGrouped, 'bubble-city');

  /**
    * This function is responsible zooms in the map and places provided latitude
    * and longitude in the center of a country.
    *
    * @param: zoomLevel: zoom level in map
    * @param: longitude/latitude: provide coordinates from country
    */
    self.map.zoomToLongLat(4, event.mapObject.longitude, event.mapObject.latitude, false);  
 });
}

推荐阅读