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

Question

我有一个Vue应用程序，它在vue-高地车组件中使用High图表绘制地图。我需要根据纬度和经度在这张地图上画点，根据高级地图文件，我必须使用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>

而且它不起作用。它无声地失败了。地图是绘制的，但地图上没有点。如果您将Proj4Js重弹在下面的小提琴上：http://jsfiddle.net/r9hugxsu/，您会得到相同的行为。

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

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

Answer 1

我最近才碰上这个的。如果你已经自己解决了这个问题，那么我至少会把这个留在这里，作为其他人遇到这个问题的快速答案。

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

下面是我在一个反应项目中解决这个问题的方法。

步骤1:为proj4创建包装器导入，将其放在window上

我做了一个单独的“导入包装器”，当我从任何需要proj4的地方导入它(这只是高级图表)，它从node_modules导入真正的proj4，并把它作为window.proj4放在window上。这就是Highmap所寻找的当它试图找到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:下载和安装地图

当我尝试使用Highmap时，一件最初让我感到困惑的事情是，当我试图在我正在进行的项目中复制它们时，所有的例子似乎都不起作用。这是因为Highmap本身并不包含任何映射，而是我们需要下载并手动安装它们，通常是从他们的地图收藏。

顺便说一句，如果您查看他们的JS映射文件，您将看到他们基本上只是直接分配映射，如：Highcharts.maps["custom/world"] = {"title":"World, Miller projection, medium resolution",...}。对于我正在进行的项目，我刚刚下载了JSON版本并自己完成了作业。我将地图文件本身放置在@/maps/custom/world.geo.json。

我是在另一个导入包装器类型文件中这样做的，这一次是针对高级图表的。此文件位于@/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，以防万一。

步骤3:从我们的导入包装程序导入高级图表

在图表组件中，我只需从包装程序中导入，而不是从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,
    },
  ],
  // ...
}