Vue China map visualizing component, supports drilldown and lazy loading.
Clone this repo and run example:
cd vue-cmap/example
npm run dev
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>
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>
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: [] }
// ...
]
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
}
}
Type: String
Default: 100%
Width of map container.
Type: String
Default: 550px
Height of map container.
Type: Array
Map color array, number of colors is not limited. Lower-ranking color is used for area with larger data.
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.
Type: Boolean
Default: true
Whether to enable province view (zoom in to see cities of the province selecetd).
Type: Boolean
Default: false
Whether to load tile map from Open Street Map.
Type: Boolean
Default: true
Whether to show map zoom control widget.
Type: Boolean
Default: true
Whether to enable box zoom.
Type: Boolean
Default: true
Whether to enable double click zoom.
Type: Boolean
Default: true
Whether to enable scroll wheel zoom.
Type: Number
Default: 3
Min map zoom level.
Type: Number
Default: Infinity
Max map zoom level.
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.
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
}
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
}
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.
0.0.4
0.0.3
0.0.2
Implement data rendering on city data0.0.1
Implement switching between country and province viewsMIT