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

Question

我有一个 Vue 应用程序，它使用带有 vue-highcart 组件的 highchart 来绘制地图。 我需要根据纬度和经度在这张地图上绘制点，根据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>

而且它不起作用。它默默地失败了。地图已绘制，但地图上未绘制任何点。如果您移除此小提琴上的 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 步：下载并安装地图

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

顺便说一句，如果您查看他们的 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 的导入。虽然不是绝对必要，但我这样做是为了确保在导入 Highcharts 之前始终安装 proj4，以防万一。

第 3 步：从我们的导入包装器中导入 Highcharts

然后，在图表组件中，我可以只从我们的包装器导入，而不是从 node_modules 安装。

import Highcharts from '@/maps/lib/Highcharts';

// do stuff with Highcharts itself...

旁白：系列和数据

不知道为什么，但我必须始终为地图线本身添加一个单独的系列。

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