vue-cmap

Vue 中国地图可视化组件，支持 Drilldown 切换国家 / 省份视图

特性

平滑的省市视图切换
可叠加 OpenStreetMap 贴片地图
惰性加载地形数据（基于 Code Splitting，无需配置后端接口）
参数化的定制样式
极轻，初始数据量小于 80K

Demo

Clone 本仓库并执行构建：

cd vue-cmap/example
npm run dev

导入

按标准 Vue 组件导入方式导入即可：

npm install vue-cmap

<template>
  <c-map :mapData="myMapData"></c-map>
</template>

<script>
import CMap from 'vue-cmap'

export default {
  data() {
    return {
      myMapData: [
        { name: "安徽", value: 200, children: [] }
      ]
    }
  },
  components: { CMap }
}
</script>

API

CMap 组件的数据和配置均以 Vue 的标准 props 形式传入，若地图数据在初始化 CMap 后保持不变，可在引入组件时添加 v-once 指令以优化性能：

<c-map
  v-once
  :mapData="myMapData"
  :mapConf="myMapConf">
</c-map>

mapData

通过该 props 传入省市数据。由于全国城市数量固定，故在此可将省份和城市数据全量传入，传入省市数据的顺序、数量均不限（缺少数据的省市会显示为灰色）。数据格式如下：

const myMapData = [
  {
    // name 需与省份中文名保持一致
    name: "安徽",
    value: 200,
    children: [
      { name: "黄山市", value: 100 },
      { name: "合肥市", value: 100 }
      // ...
    ]
  },
  { name: '北京', value: 300, children: [] }
  // ...
]

mapConf

通过该 props 传入 CMap 配置参数信息。传入的参数将与如下的默认参数合并后，再用于渲染图表：

export default {
  colors: ['#800026', '#BD0026', '#E31A1C', '#FC4E2A', '#FD8D3C', '#FEB24C', '#FED976', '#FFEDA0'],
  scale: null,
  width: '100%',
  height: '550px',
  hasCityView: true,
  hasTileLayer: false,
  hasZoomControl: true,
  countryBounds: [[18, 72], [54, 137]],
  tileStyle: {
    weight: 2,
    opacity: 1,
    borderColor: 'white',
    dashArray: 4,
    fillOpacity: 0.7
  },
  highlightStyle: {
    weight: 5,
    borderColor: '#666',
    dashArray: 0,
    fillOpacity: 0.7
  }
}

width

Type: String Default: 100%

地图区域宽度。

height

Type: String Default: 550px

地图区域高度。

colors

Type: Array

地图配色数组，数量不限。数组中越靠后的颜色用于渲染越大的数据。数据将按大小顺序均匀分配各颜色。

scale

Type: Object Default: null

需要手动定义地图各颜色阈值时，传入该参数。该参数存在时，colors 不生效。格式如下：

const scale = [
  { color: 'green', threshold: 100 },  // 小于等于 100 的数据为绿色
  { color: 'yellow', threshold: 200 }, // 小于等于 200 的数据为黄色
  { color: 'red', threshold: 300 },    // 小于等于 300 的数据为红色
]

在默认情况下 scale 由 CMap 组件根据传入数据自动生成，无需手动定义颜色与数据的对应关系。