我最近遇到了这个问题。如果您确实已经设法自己解决了这个问题,那么我至少会把它留在这里作为其他人遇到这个问题的快速答案。
Highsoft 似乎还没有关于这个特定部分的文档。我可能应该向他们提交文档问题。
以下是我在我正在进行的 React 项目中解决它的方法。
第 1 步:为 proj4 创建一个包装器导入,将其放在“window”上
我制作了一个单独的“导入包装器”,当我从需要 proj4(只是 Highcharts)的任何东西中导入它时,它会从中导入真正的 proj4node_modules
并将其粘贴window
为window.proj4
. 这是 Highmaps在尝试查找 proj4 时寻找的内容。
例如,假设此文件位于@/maps/lib/proj4.js
.
import proj4 from 'proj4';
// NOTE: when dealing with server side rendering as we are, check for window before doing things with it.
// If you're not doing server side rendering, then you don't need this check and can just assign straight to window.
if (typeof window !== 'undefined') {
window.proj4 = window.proj4 || proj4;
}
export default proj4;
第 2 步:下载并安装地图
在尝试使用 Highmaps 时最初让我感到困惑的一件事是,当我尝试在我正在进行的项目中重现这些示例时,它们似乎都不起作用。原来这是因为 Highmaps 本身不包含任何地图,而我们需要下载并手动安装它们,通常是从他们的地图集合中。
顺便说一句,如果您查看他们的 JS 地图文件,您会发现他们基本上只是像这样直接分配地图:Highcharts.maps["custom/world"] = {"title":"World, Miller projection, medium resolution",...}
. 对于我正在进行的项目,我刚刚下载了 JSON 版本并自己完成了作业。我将地图文件本身放在@/maps/custom/world.geo.json
.
我在另一个导入包装类型文件中执行此操作,这次是针对 Highcharts。该文件位于@/maps/lib/Highcharts.js
.
import './proj4';
import Highcharts from 'highcharts';
import HighchartsMap from 'highcharts/modules/map';
import customWorld from '@/maps/custom/world.geo.json';
// NOTE: Again, if doing server side rendering, check for window before bothering.
// Highcharts modules crash on the server.
if (typeof window !== 'undefined') {
HighchartsMap(Highcharts);
Highcharts.maps['custom/world'] = customWorld;
}
export default Highcharts;
请注意,我在所有全局导入之前放置了一个本地导入,即@/maps/lib/proj4.js
. 虽然不是绝对必要的,但我这样做是为了确保proj4
在导入 Highcharts 之前始终安装它,以防万一。
第 3 步:从我们的导入包装器中导入 Highcharts
然后,在图表组件中,我可以只从我们的包装器导入而不是node_modules
安装。
import Highcharts from '@/maps/lib/Highcharts';
// do stuff with Highcharts itself...
旁白:系列和数据
Not sure why, but I had to always include a separate series for the map lines themselves.
{
// ...
series: [
// Series for the map.
{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false,
showInLegend: false,
zIndex: 1,
},
// Series for the data. Have to remember to add data later using chart.series[1]
// rather than chart.series[0].
{
type: 'mapbubble',
name: 'Live Activity',
data: [],
// TODO: Format for datum... point.datum.userId, etc.
tooltip: {
pointFormat: '{point.datum.userId}',
},
minSize: 4,
maxSize: 24,
zIndex: 2,
},
],
// ...
}