bbq/src/app/routes/datatable/components/datascreen/map/map.component.ts

import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild, AfterViewInit } from '@angular/core';
import { Chart } from '@antv/g2';
import DataSet from '@antv/data-set';
import { DataService } from 'src/app/routes/datatable/services/data.service';
@Component({
  selector: 'app-datatable-customindex-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.less']
})
export class DatatableCustomindexMapComponent implements OnInit, OnChanges, AfterViewInit {
  el: any;
  @Input() chartData: any;
  @ViewChild('auditModal', { static: false }) auditModal!: any;
  @ViewChild('map',{static: false}) map!: any;
  chart: any;
  mapData: any;
  ds!: DataSet ;
  worldMap: any;
  userView: any;
  userDv: any;
  userData: any = [];
  constructor(private service: DataService, private ngZone: NgZone) {}
  ngAfterViewInit(): void {
    this.map.el.nativeElement.style.height  = this.map.el.nativeElement.clientWidth + 'px'
    this.chart.render();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (this.chartData) {
      // setTimeout(()=>{
      //   this.chart.render(true)
      // }, 1000)
    }
  }
 
  ngOnInit(): void {}
  reRender() {
    console.log('5454545');
    setTimeout(() => {
      this.chart.render();
    }, 1000);
  }
  render(el: ElementRef<HTMLDivElement>): void {
    this.el = el.nativeElement;
    setTimeout(() => {
      this.ngZone.runOutsideAngular(() => this.init(this.el));
    }, 500);
  }

  private init(el: HTMLElement): void {
    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/china.json')
      .then(res => res.json())
      .then(mapData => {
      this.mapData =mapData
      this.chart = new Chart({
        container: el,
        autoFit: true,
        padding: [0, 0]
      });
      this.chart.tooltip({
        showTitle: false,
        showMarkers: false,
        shared: true
      });
      // 同步度量
      this.chart.scale({
        longitude: {
          sync: true
        },
        latitude: {
          sync: true
        }
      });
      this.chart.axis(false);
      this.chart.legend('trend', {
        position: 'left'
      });
      console.log('8888');
  
      // 绘制世界地图背景
      this.ds = new DataSet();
      this.worldMap = this.ds.createView('back').source(this.mapData, {
        type: 'GeoJSON'
      });
      const worldMapView = this.chart.createView();
      worldMapView.data(this.worldMap.rows);
      worldMapView.tooltip(false);
      worldMapView.polygon().position('longitude*latitude').style({
        fill: '#fff',
        stroke: '#ccc',
        lineWidth: 1
      });
        let value: any = []
      this.service.request(this.service.$api_getTransactionDistribution).subscribe((res: any) => {
     if(res) {
      res.forEach((element: any) => {
        value.push({
          name: element.province,
          value: element.weight,
       });
       });
       console.log(value);
       this.userData = value
       
if (!(this.userData instanceof Array) || this.userData.length === 0) {
	return;
  }
    this.userDv = this.ds.createView().source(this.userData).transform({
        geoDataView: this.worldMap,
        field: 'name',
        type: 'geo.region',
        as: ['longitude', 'latitude']
      }).transform({
        type: 'map',
        callback: (obj: { trend: string; value: number }) => {
          if(obj.value < 500) {
            obj.trend = '500以下';
          } else if(obj.value >= 500 && obj.value < 1000){
            obj.trend = '500-1000';
          } else if(obj.value >= 1000 ){
            obj.trend = '>1000';
          }
          return obj;
        }
      });
    this.userView = this.chart.createView();
    this.userView.data(this.userDv.rows);
    this.userView.scale({
      trend: {
        alias: '蓝色地区数量'
      }
    });
    console.log(this.userView);
    console.log('45545');
    
    this.userView.polygon().position('longitude*latitude').color('trend', ['#0a3f80', '#1b6aca', '#5d93d4']).tooltip('name*trend*value').style({fillOpacity: 0.85 })
      .animate({
        leave: {
          animation: 'fade-out'
        }
      });
      this.userView.interaction('element-active');
      this.chart.render();

    }
      })
      });

      console.log('9999');
  

  }
  
}