Question

我正在我的应用程序中实现自定义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...

Answer 1

我找到了一个解决方案。用户单击气泡后，我将构建其他图表。因此，我需要更新此图表并从国家/地区进行放大。因此，在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);

因此，complethe方法是：

**
 * 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);  
 });
}

如何动态放大amchart地图

1 个答案: