Angular HighMaps从列表中选择地图-Highcharts.geojson和Highcharts.mapDataIndex问题

我想创建一个地图，在这里我可以提供所有可用地图数据的下拉列表，如下所示：

我在本地系统的@highcharts/map collection（）中有所有地图，我想使用它们，而不是在运行时从下载

在我的typescript文件中，我使用以下导入

import * as Highcharts from "highcharts/highmaps";
import * as HC_DATA from "highcharts/modules/data";
HC_DATA(Highcharts);

在系列中，我提供了以下地图数据：

series: [{
            mapData: Highcharts.geojson(Highcharts.maps['custom/world']),
            name: 'My series',
            data: data,
        }]   

我在运行时遇到以下异常：

ng:///CreationModule/DashboardComponent.ngfactory.js:564错误类型错误：无法读取未定义的属性“features” 在Object.a.geojson

第二个问题：我想获得所有可用地图的列表，我尝试访问Highcharts.mapDataIndex，如中所述， 我得到的错误是mapDataIndex未定义

---

请指导我如何解决上述问题，我认为我没有正确使用所需的导入，请指导。

第一个问题与错误导入地图数据有关。简单地

Highcharts.maps['custom/world']

是未定义的。您可以将地图数据作为json导入，并将其传递给

chart.map

属性，如下所示：

const worldMap = require('@highcharts/map-collection/custom/world.geo.json');

chartOptions = {
    chart: {
      map: worldMap
    },
    ...
}

---

第二个问题：我想获得所有可用地图的列表，我尝试 访问Highcharts.mapDataIndex，如演示/所有地图中所述，I 获取mapDataIndex未定义的错误

未定义mapDataIndex，因为它不是Highcharts默认属性，您必须加载它（在示例中，从此处加载：）。从

highcharts

有关如何加载的官方包装文档中查看此说明：

mapdata.js:

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function (Highcharts) {

...
/* map data content here */
...

}));

export default function (Highcharts) {
   Highcharts.mapDataIndex = {...}
}

在图表组件中：

require('./mapdata')(Highcharts);

演示：

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function (Highcharts) {

...
/* map data content here */
...

}));

export default function (Highcharts) {
   Highcharts.mapDataIndex = {...}
}

编辑

也可以使用

导入
加载地图数据：

import mapdata from "./mapdata";
import * as worldMap from '@highcharts/map-collection/custom/world.geo.json';

mapdata(Highcharts);

mapdata.js:

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function (Highcharts) {

...
/* map data content here */
...

}));

export default function (Highcharts) {
   Highcharts.mapDataIndex = {...}
}

演示：

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function (Highcharts) {

...
/* map data content here */
...

}));

export default function (Highcharts) {
   Highcharts.mapDataIndex = {...}
}



第一个问题与地图数据的错误导入有关。简单地
Highcharts.maps['custom/world']
是未定义的。您可以将地图数据作为json导入，并将其传递给
chart.map
属性，如下所示：

const worldMap = require('@highcharts/map-collection/custom/world.geo.json');

chartOptions = {
    chart: {
      map: worldMap
    },
    ...
}


第二个问题：我想获得所有可用地图的列表，我尝试
访问Highcharts.mapDataIndex，如演示/所有地图中所述，I
获取mapDataIndex未定义的错误

未定义mapDataIndex，因为它不是Highcharts默认属性，您必须加载它（在示例中，从此处加载：）。从
highcharts
有关如何加载的官方包装文档中查看此说明：

mapdata.js:

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function (Highcharts) {

...
/* map data content here */
...

}));

export default function (Highcharts) {
   Highcharts.mapDataIndex = {...}
}

在图表组件中：

require('./mapdata')(Highcharts);

演示：

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function (Highcharts) {

...
/* map data content here */
...

}));

export default function (Highcharts) {
   Highcharts.mapDataIndex = {...}
}






编辑

也可以使用
导入
加载地图数据：

import mapdata from "./mapdata";
import * as worldMap from '@highcharts/map-collection/custom/world.geo.json';

mapdata(Highcharts);

mapdata.js:

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function (Highcharts) {

...
/* map data content here */
...

}));

export default function (Highcharts) {
   Highcharts.mapDataIndex = {...}
}

演示：

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function (Highcharts) {

...
/* map data content here */
...

}));

export default function (Highcharts) {
   Highcharts.mapDataIndex = {...}
}



我们有没有办法在不使用require的情况下实现这一点？require在JS类外部完成时起作用，但我正在实现深入映射，在使用require获取状态映射时，构建过程失败。有趣的是，该应用程序在使用ng serve的本地计算机上运行良好。我已经编辑了我的答案，请检查如何使用
import
加载文件。我们是否可以在不使用require的情况下实现这一点？require在JS类外部完成时起作用，但我正在实现深入映射，在使用require获取状态映射时，构建过程失败。有趣的是，该应用程序使用ng serve在本地计算机上运行良好。我已经编辑了我的答案，请检查如何使用
import
加载文件。