如何导入 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>

而且它不起作用。它默默地失败了。地图已绘制，但地图上未绘制任何点。如果您在此 fiddle 上移除 Proj4Js，这与您得到的行为相同：http://jsfiddle.net/r9hugxsu/

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

编辑： 我知道我可以简单地将 script 标签放在我的 index.html 上。但我只是想知道是否有 ES6 方式来做这种 "dependency-script-including".

Answer 1

我最近才运行参与其中。如果你确实已经设法自己解决了这个问题，那么我至少会把它留在这里作为对其他人的快速回答运行。

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

以下是我如何在我正在进行的 React 项目中解决它。

第 1 步：为 proj4 创建包装器导入，将其放在“window”

我做了一个单独的 "import wrapper"，当我从任何需要 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 时最初让我感到困惑的一件事是，当我尝试在我正在进行的项目中重现这些示例时，none 示例似乎有效。这是因为 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,
    },
  ],
  // ...
}

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

How to import Proj4js to use with Highmaps?

highcharts

proj4js

ecmascript-6

vue.js

highmaps

第 1 步：为 proj4 创建包装器导入，将其放在“window”

第 2 步：下载并安装地图

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

旁白：系列和数据