Question

我想用我的geojson（不是来自Highcharts的geojson）使用Highcharts / Highmaps创建一个非常简单的向下钻取地图。

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

{
  "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'
          }]
        }
      });
    });
  }
}

问题是，我不知道在下钻期间如何加载其他地图。到目前为止，如果我单击一个区域，则会播放向下钻取动画，但会加载相同的地图（当然，具有不同的数据值）。

有人可以帮助我吗？谢谢！

PS：我不知道如何提供这种项目的工作样本，对不起...

使用Highcharts Map（Highmaps）创建简单的自定义向下钻取地图

0 个答案: