highcharts - 如何导入 Proj4js 以与 Highmaps 一起使用？

Question

我有一个使用 highchart 和 vue-highcart 的 Vue 应用程序绘制 map 的组件。
我需要根据纬度和经度在这张 map 上绘制点，根据 Highmaps documentation ，我必须使用Proj4js。
在普通的旧 javascript 中，我会简单地使用 <script>将其放入我的页面，但我不知道如何以 ES6 方式进行操作。我尝试了以下方法:

import Proj4 from 'proj4';
import Highcharts from 'highcharts';
import VueHighcharts from 'vue-highcharts';
import LoadHighmaps from 'highcharts/modules/map';

LoadHighmaps(Highcharts);
Vue.use(VueHighcharts, { Proj4, Highcharts })

// ....

<highmaps :options="options"></highmaps>

它不起作用。它默默地失败了。 map 已绘制，但 map 上未绘制任何点。如果您删除此 fiddle 上的 Proj4J，您会得到相同的行为: http://jsfiddle.net/r9hugxsu/

有什么帮助吗？提前致谢。

编辑:
我知道我可以简单地输入 script在我的 index.html 上标记。但我只是想知道是否有一种 ES6 方式来执行这种“包括依赖脚本”。

Answer 1

我最近自己也遇到了这个问题。如果您已经设法自己解决了这个问题，那么我至少会把它留在这里作为对遇到此问题的其他人的快速回答。

Highsoft 似乎还没有关于这个特定部分的文档。我可能应该向他们提交文档问题。

这是我如何在我参与的 React 项目中解决它的方法。

第 1 步:为 proj4 创建一个包装导入，将其放在 `window` 上

我制作了一个单独的“导入包装器”，当我从任何需要 proj4(只是 Highcharts)的东西中导入它时，它会从 node_modules 导入真正的 proj4。并贴在 window如 window.proj4 .这就是 Highmaps 寻找的 when it's trying to find 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 步:下载并安装 map

在尝试使用 Highmaps 时，最初让我感到困惑的一件事是，当我尝试在我参与的项目中重现它们时，这些示例似乎都不起作用。原来这是因为Highmaps本身不包含任何 map ，而我们需要下载并手动安装它们，通常来自 their map collection .

顺便说一句，如果你查看他们的 JS map 文件，你会发现他们基本上只是像这样直接分配 map : Highcharts.maps["custom/world"] = {"title":"World, Miller projection, medium resolution",...} .对于我参与的项目，我只是下载了 JSON 版本并自己完成了作业。我将 map 文件本身放在 @/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...

旁白:系列和数据

不知道为什么，但我必须始终为 map 线本身包含一个单独的系列。

{
  // ...
  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,
    },
  ],
  // ...
}