Angular 使用Highcharts地图（Highmaps）创建简单的自定义向下展开地图

我想用Highcharts/Highmaps和我的geojsons（而不是Highcharts中的geojsons）创建一个非常简单的深入地图

它们看起来像这样（由软件导出）：

以下是我到目前为止的代码（基于各种教程和试错…）：

从'@angular/core'导入{Component，OnInit}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{forkJoin}；
从“角度高度图表”导入{Highcharts，MapChart}；
@组成部分({
选择器：“应用程序演示地图向下展开”，
模板：“”，
样式URL:['./demo-map-drilldown.component.css']
})
导出类DemoMapDrilldownComponent实现OnInit{
构造函数（私有httpClient:httpClient）{}
恩戈尼尼特（）{
让geoJsonList=[]；
[“国家”、“地区1”、“地区2”、“地区3”]。forEach（（名称）=>{
geoJsonList.push（this.httpClient.get（“资产/”+name+“.geojson”）；
});
forkJoin（geoJsonList）.subscribe（geoJsons=>{
geoJsons[0][“功能”].map（（元素，i）=>{
element.drilldown=element.properties['Id']；//Id在我的文件中看起来像“RegionX”
element.value=i；
});
this.chart=新地图图表({
图表：{
地图：geoJsons[0]
},
标题：{
文本：“Highmaps中的GeoJSON”
},
地图导航：{
启用：对，
按钮选项：{
垂直排列：“底部”
}
},
颜色轴：{
像素间隔：100
},
系列：[{
数据：[
[“区域1”，“区域1”，44]，
[“区域2”，“区域2”，49]，
[“区域3”，“区域3”，53]
],
键：['Name'，'drilldown'，'value']，
joinBy:'名称'，
名称：'随机数据'，
国家：{
悬停：{
颜色：“#a4edba”
}
},
数据标签：{
启用：对，
格式：“{point.properties.Name}”
}
}],
向下展开：{
系列：[{
数据：[
[“城市”，1]，
[“城巴”，5]
],
id:“区域1”
}, {
数据：[
[“CityC”，3]，
[“CityD”，4]
],
id:“区域2”
}, {
数据：[
[“城市”，0]，
[“城市”，2]
],
id:“区域3”
}]
}
});
});
}
}

问题是，我不知道如何在深入查看期间加载不同的地图。 到目前为止，如果单击某个区域，将播放向下展开动画，但加载相同的贴图（当然，使用不同的数据值）

有人能帮我吗？谢谢

---

PS：我不知道如何提供此类项目的工作样本，抱歉……

PS：我不知道如何提供此类项目的工作样本，抱歉。。。Try Here是一个有用的官方演示，它展示了如何使用多个地图实现向下搜索。你看到了吗？是的，我看到了，而且更简单，但我认为我的第一个问题是将它从JavaScript转换为Angular。我提出了另一个问题，如果你想看看：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "Id": "Region1",
        "Name": "My First Region" },
        "geometry": {
          "type": "MultiPolygon",
          "coordinates": [ [ [ [ 830.49832547647298, 9313.4877617806696 ], ...

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';
import { Highcharts, MapChart } from 'angular-highcharts';

@Component({
  selector: 'app-demo-map-drilldown',
  template: '<div [chart]="chart" class="container" id="container"></div>',
  styleUrls: ['./demo-map-drilldown.component.css']
})
export class DemoMapDrilldownComponent implements OnInit {

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    let geoJsonList = [];
    ["Country", "Region1", "Region2", "Region3"].forEach((name) => {
      geoJsonList.push(this.httpClient.get("assets/" + name + ".geojson"));
    });
    forkJoin(geoJsonList).subscribe(geoJsons => {
      geoJsons[0]["features"].map((element, i) => {
        element.drilldown = element.properties['Id']; // Id looks like "RegionX" in my files
        element.value = i;
      });

      this.chart = new MapChart({
        chart: {
          map: geoJsons[0]
        },

        title: {
          text: 'GeoJSON in Highmaps'
        },

        mapNavigation: {
          enabled: true,
          buttonOptions: {
            verticalAlign: 'bottom'
          }
        },

        colorAxis: {
          tickPixelInterval: 100
        },

        series: [{
          data: [
            ["Region1", "Region1", 44],
            ["Region2", "Region2", 49],
            ["Region3", "Region3", 53]
          ],
          keys: ['Name', 'drilldown', 'value'],
          joinBy: 'Name',
          name: 'Random data',
          states: {
            hover: {
              color: '#a4edba'
            }
          },
          dataLabels: {
            enabled: true,
            format: '{point.properties.Name}'
          }
        }],

        drilldown: {
          series: [{
            data: [
              ["CityA", 1],
              ["CityB", 5]
            ],
            id: 'Region1'
          }, {
            data: [
              ["CityC", 3],
              ["CityD", 4]
            ],
            id: 'Region2'
          }, {
            data: [
              ["CityE", 0],
              ["CityF", 2]
            ],
            id: 'Region3'
          }]
        }
      });
    });
  }
}