如何将内部地图链接到其他地图？，或者如何改变geojason dinaminacally？

Question

我将 angular 6 与库高度图一起使用，当我单击某个区域时，我需要动态地更改地图。我该怎么做？有可能吗？我没有找到任何例子。

这是我的代码：

declare var require: any;
import { Component, OnInit } from '@angular/core';
import { SpainService } from '../services/spain.service';
import * as Highcharts from 'highcharts';
import StockModule from 'highcharts/modules/stock';
import MapModule from 'highcharts/modules/map';
import GanttModule from 'highcharts/modules/gantt';
import ExportingModule from 'highcharts/modules/exporting';
import SunsetTheme from 'highcharts/themes/sunset.src.js';
import Drilldown from 'highcharts/modules/drilldown';
Drilldown(Highcharts);
import HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);
StockModule(Highcharts);
MapModule(Highcharts);
GanttModule(Highcharts);
ExportingModule(Highcharts);
SunsetTheme(Highcharts);
Highcharts.setOptions({
  title: {
    style: {
      color: 'blue'
    }
  },
  legend: {
    enabled: false
  },
  navigation: {
    buttonOptions: {
      enabled: false
      }
     }
});


@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {

  Highcharts: typeof Highcharts = Highcharts;
  data: any = [
    ['ANDALUCIA', 78],
    ['ARAGON', 34],
    ['CASTILLA Y LEON', 5],
];
  chartMap: Highcharts.Options = {
    chart: {
      map:  require('../../assets/maps/ESP_regions.json'),
      backgroundColor: 'rgba(255, 255, 255, 0.0)',
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        alignTo: 'spacingBox'
      }
    },
    legend: {
      enabled: false,
    },
    colorAxis: {
      min: 0,
      minColor: '#FFFFFF',
      maxColor: '#5c881a',
    },
    series: [{
      events: {
        click: function(e) {
          console.log(e);
        }
      },
      name: 'dato',
      states: {
        // hover: {
        //    color: '#5c881a'
        // }
      },
      dataLabels: {
        enabled: true,
        format:  '{point.properties.NAME_1}'
      },
      allAreas: true,
      data: this.data,
      keys: ['NAME_1', 'value'],
      joinBy: 'NAME_1',
    } as Highcharts.SeriesMapOptions]
  };
  constructor() {}
  ngOnInit() {}
}

我需要将地图内的导航添加到其他区域，使用相同的地图或导航到其他页面。什么是可能的？

Answer 1

在click 点事件中，您可以删除实际系列并添加具有新data 和mapData 属性的新系列。纯 JS 示例：

var dataUK = [
    ['gb-wi', 5]
];

var data = [
    ['gb', 20, 'https://code.highcharts.com/mapdata/countries/gb/gb-all.geo.json', dataUK]
];



function getGeoJSON(url, chart, data) {
    $.getJSON(url, function(geojson) {
        updateChart(geojson, chart, data);
    });
}

function updateChart(geojson, chart, data) {
    if (!chart) {
        createChart(geojson)
    } else {
        chart.series[0].remove();

        chart.addSeries({
            data: data,
            mapData: geojson
        });
    }
}

function createChart(geojson) {
    Highcharts.mapChart('container', {
        ...,

        series: [{
            point: {
                events: {
                    click: function() {
                        getGeoJSON(this.url, this.series.chart, this.newData)
                    }
                }
            },
            keys: ['hc-key', 'value', 'url', 'newData'],
            mapData: geojson,
            ...
        }]
    });
}

---

现场演示： https://jsfiddle.net/BlackLabel/c1nwzqbk/

API 参考：

https://api.highcharts.com/highmaps/series.map.point.events.click

https://api.highcharts.com/highmaps/series.map.keys