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

Question

我有一个 Vue 应用程序，它使用 highchart 和vue-highcart组件来绘制地图。我需要根据纬度和经度在这张地图上绘制点，根据Highmaps 文档，我必须使用 Proj4js。在普通的旧 javascript 中，我会简单地使用 a<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>

它不起作用。它默默地失败了。地图已绘制，但地图上未绘制任何点。如果你在这个小提琴上删除 Proj4Js，你会得到同样的行为：http : //jsfiddle.net/r9hugxsu/

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

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

Answer 1

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

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...

旁白：系列和数据

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

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