Awesome
vue-cmap
Vue China map visualizing component, supports drilldown and lazy loading.
Feature
- Smooth switch between country and province views.
- Support OpenStreetMap tile map.
- Lazy loading province view shape data, based on code splitting.
- Super lightweight, init loading size less than 80KB.
Demo
Clone this repo and run example:
cd vue-cmap/example
npm run dev
Import
Import CMap as a typical Vue component:
<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
Pass data and conf through Vue props
. If map data stays static after loading CMap, the v-once
directive can be added to optimize performance.
<c-map
v-once
:mapData="myMapData"
:mapConf="myMapConf">
</c-map>
mapData
Pass in province and city data through this props
. Since the number of Chinese cities remains static, so full dataset of provinces and cities can be passed in once. You can pass in a subset of full country data with arbitrarily order. Data format is shown below:
const myMapData = [
{
// name must be corresponding to province's Chinese name
name: "安徽",
value: 200,
children: [
{ name: "黄山市", value: 100 },
{ name: "合肥市", value: 100 }
// ...
]
},
{ name: '北京', value: 300, children: [] }
// ...
]
mapConf
Pass in configuration arguments through this props
. Arguments will be assigned with default args shown below, then used to render map.
export default {
colors: ['#800026', '#BD0026', '#E31A1C', '#FC4E2A', '#FD8D3C', '#FEB24C', '#FED976', '#FFEDA0'],
scale: null,
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%
Width of map container.
height
Type: String
Default: 550px
Height of map container.
colors
Type: Array
Map color array, number of colors is not limited. Lower-ranking color is used for area with larger data.
scale
Type: Object
Default: null
Pass in this arg if you need to handle scale manually. When this arg is specified, the colors
args does not work.
const scale = [
{ color: 'green', threshold: 100 }, // Green for areas whose value less then 100
{ color: 'yellow', threshold: 200 }, // Yellow for areas whose value less then 200
{ color: 'red', threshold: 300 }, // Red for areas whose value less then 300
]
By default scale
is generated by CMap from data passed in, you don't have to declare this arg manually.
hasCityView
Type: Boolean
Default: true
Whether to enable province view (zoom in to see cities of the province selecetd).
hasTileLayer
Type: Boolean
Default: false
Whether to load tile map from Open Street Map.
hasZoomControl
Type: Boolean
Default: true
Whether to show map zoom control widget.
boxZoom
Type: Boolean
Default: true
Whether to enable box zoom.
doubleClickZoom
Type: Boolean
Default: true
Whether to enable double click zoom.
ScrollWheelZoom
Type: Boolean
Default: true
Whether to enable scroll wheel zoom.
minZoom
Type: Number
Default: 3
Min map zoom level.
maxZoom
Type: Number
Default: Infinity
Max map zoom level.
countryBounds
Type: Array
Default: [[18, 72], [54, 137]]
The latitude and longitude bound of map area. Zooming and panning of map are restricted in this area.
tileStyle
Type: Object
Tile style for city and province areas, default args are shown as below:
const tileStyle = {
weight: 2, // border width
opacity: 1, // content transparency
borderColor: 'white', // border color
dashArray: 4, // border dash length
fillOpacity: 0.7 // border transparency
}
highlightStyle
Type: Object
Tile style on hover, default args are shown as below:
const tileStyle = {
weight: 5, // border width
borderColor: '#666', // border color
dashArray: 0, // borer dash length
fillOpacity: 0.7 // border transparency
}
Custom
By modifying the require
code in modules/loader.js
, you can modify the component size to fit the needs. When onlu contury view is needed, all code loading GeoJSON can be commented out to reduce Webpack chunk size.
Changelog
0.0.4
- Fix width and height style issue
- Add zoom conf
0.0.3
- Add conf interface
- Add mask on data loading
- Fix bug on empty provinces
- Fix style bug on IE
- Add doc
0.0.2
Implement data rendering on city data0.0.1
Implement switching between country and province views
License
MIT