Vue2中Highmaps（Highcharts）如何引入tiledwebmap.js对接OpenStreetMap？

1. 安装依赖 #

首先安装适配Vue2的Highcharts相关包，highcharts-vue@1.x版本专门支持Vue2：

npm install highcharts highcharts-vue@1.4.0 --save

2. 导入并初始化模块 #

在Vue组件中导入所需模块并初始化，推荐局部导入以减少打包体积：

import { Chart } from 'highcharts-vue'
import Highcharts from 'highcharts'
// 导入Highmaps核心模块
import highmaps from 'highcharts/modules/map'
// 导入TiledWebMap模块
import tiledWebMap from 'highcharts/modules/tiledwebmap'

// 初始化模块到Highcharts实例
highmaps(Highcharts)
tiledWebMap(Highcharts)

3. 完整组件示例 #

以下是可直接运行的Vue组件，实现加载OpenStreetMap瓦片地图：

<template>
  <div class="map-wrapper">
    <highcharts :options="mapOptions"></highcharts>
  </div>
</template>

<script>
import { Chart } from 'highcharts-vue'
import Highcharts from 'highcharts'
import highmaps from 'highcharts/modules/map'
import tiledWebMap from 'highcharts/modules/tiledwebmap'

// 初始化地图及瓦片模块
highmaps(Highcharts)
tiledWebMap(Highcharts)

export default {
  components: {
    highcharts: Chart
  },
  data() {
    return {
      mapOptions: {
        chart: {
          type: 'map',
          height: '100vh'
        },
        title: {
          text: 'OpenStreetMap 瓦片地图演示'
        },
        // 启用地图导航（缩放、平移）
        mapNavigation: {
          enabled: true,
          buttonOptions: {
            verticalAlign: 'bottom'
          }
        },
        series: [
          {
            type: 'tiledwebmap',
            // OpenStreetMap 瓦片地址模板，{z}缩放级别、{x}{y}瓦片坐标
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            // 瓦片服务器子域名，分流请求
            subdomains: ['a', 'b', 'c'],
            // 必须保留OSM版权声明
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.map-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}
</style>

4. 可选：CDN引入方式 #

如果不想使用npm包，可直接在index.html中引入CDN资源：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/tiledwebmap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts-vue@1.4.0/dist/highcharts-vue.min.js"></script>

之后在Vue组件中无需import，直接注册Chart组件即可使用。

注意事项 #

• 必须保留OpenStreetMap的版权声明（attribution字段），否则违反OSM使用协议
• 若遇到跨域问题，可配置Vue代理或使用支持CORS的瓦片服务
• 可通过调整mapNavigation、chart等配置项自定义地图交互和样式

内容的提问来源于stack exchange，提问作者Oleg Kuznetsov