Vue js Highmaps如何加载映射？

Question

我对Vue.js有点陌生，但今天我尝试设置某种地图来显示数据。最后，我选择了Highmap，因为它似乎是最好的选择，也因为我已经在其他项目中使用了它(高级图表)。

现在出现了问题，因为我正在开发一个组件驱动的webapp，但是我想从Highmap导入地图。由于它们只是使用CDN路径，所以我不知道如何使用import语句来实现它们。下面是一些让你更好理解的代码。

--- main.js ---
import Vue from 'vue'
import App from './App'
import MapComponent from './components/MapComponent.vue'
import Highcharts from 'highcharts';
import HighMaps from '../node_modules/highcharts/highmaps.js'
import VueHighcharts from 'vue-highcharts'
import loadMap from 'highcharts/modules/map';

loadMap(Highcharts);

Vue.use(VueHighcharts, { Highcharts });
Vue.use(HighMaps);

Vue.component('app-map', MapComponent)

new Vue({
  el: '#app',
  router: router,
  components: { App },
  template: '<App/>'
})
------------------------
--- MapComponent.vue ---
<template>
  <div>
    <highmaps :options="chartOptions"></highmaps>
  </div>
</template>

<script>
  import Element from 'element-ui';
  import axios from 'axios';
  import HighCharts from 'vue-highcharts';

  export default {
    data () {
      return {
          chartOptions: {
              chart: {
                  map: 'countries/it/it-all'
              },
              ... 
          }
    },
  }
</script>

这就是从浏览器中可以看到的，当我试图按+/-或在地图的边框内滚动时，错误就会出现。

正如您在脚本标记中看到的那样，我已经导入了一些库，但是我也无法理解如何导入Highmap。

Answer 1

现在，我找到了一种方法(可能很俗气)，通过复制粘贴变量中的对象，然后将其引用到chart.map中，将地图数据强制到地图本身。

我知道这可能很糟糕，因为Vue需要在组件中编译所有的对象，但我希望这是一个临时的解决方案。

<template>
  <div>
    <highmaps :options="chartOptions"></highmaps>
  </div>
</template>

<script>
  import Element from 'element-ui';
  import axios from 'axios';
  import HighCharts from 'vue-highcharts';

  export default {
    data () {
    var country= {"title":"Italy","version":"1.1.2","type":"FeatureCollection","copyright":"Copyright...}
    return {
          chartOptions: {
            chart: {
              map: country
            },
    ...
    }
</script>

您可以在这 url找到地图数据(选择GeoJSON选项)

编辑

通过将映射的原始json数据保存到本地.json文件中并导入它，我终于找到了一种很好的方法，如下所示：

<template>
  <div>
    <highmaps :options="chartOptions"></highmaps>
  </div>
</template>

<script>
  import HighCharts from 'vue-highcharts';
  import json from '../map.json'

  export default {
    data () {
      return {
          chartOptions: {
            chart: {
              map: json,
            },
            ...
      }
</script>

Answer 2

我可以在图像中看到您有一个错误：

未定义的ReferenceError，HighCharts未定义为

这是因为，每当您为Vue导入库时，都应该将其作为组件提供。

所以，你必须加上：

import HighCharts from 'vue-highcharts';

export default {
   //...
  components: { HighCharts },
  //...
}

Answer 3

这里的问题是CDN导入了VueHighcharts，您可以将它全局注册为

Vue.use(VueHighcharts, { Highcharts: Highcharts })

然后在任何地方使用它

<highmaps :options="options"></highmaps>

查看Lib自述底部的示例

另外，最好是通过npm安装它，以便有一个更好的模块化结构来与webpack (或您使用的任何东西)一起工作。