3

我有一个 Vue 应用程序，它使用带有vue-highcart组件的 highchart 来绘制地图。我需要根据纬度和经度在这张地图上绘制点，根据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 方式来执行这种“包含依赖脚本”。

4

1 回答 1

6

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

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

旁白：系列和数据

Not sure why, but I had to always include a separate series for the map lines themselves.

{
  // ...
  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,
    },
  ],
  // ...
}
于 2018-05-01T14:17:53.057 回答