{"id":13535960,"url":"https://github.com/doodlewind/vue-cmap","last_synced_at":"2025-03-20T22:31:14.335Z","repository":{"id":80193211,"uuid":"75201641","full_name":"doodlewind/vue-cmap","owner":"doodlewind","description":"Vue China map visualizing component, supports drilldown and lazy loading.","archived":false,"fork":false,"pushed_at":"2016-12-06T13:50:12.000Z","size":458,"stargazers_count":39,"open_issues_count":1,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-11T22:48:18.196Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://ewind.us/h5/cmap/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doodlewind.png","metadata":{"files":{"readme":"README-cn.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-30T15:46:04.000Z","updated_at":"2021-01-21T04:31:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"c494981b-bf20-47a3-9800-503da984c94f","html_url":"https://github.com/doodlewind/vue-cmap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fvue-cmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fvue-cmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fvue-cmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fvue-cmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doodlewind","download_url":"https://codeload.github.com/doodlewind/vue-cmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244703795,"owners_count":20496180,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T09:00:32.696Z","updated_at":"2025-03-20T22:31:13.842Z","avatar_url":"https://github.com/doodlewind.png","language":"JavaScript","readme":"# vue-cmap\nVue 中国地图可视化组件，支持 Drilldown 切换国家 / 省份视图\n\n![vue-cmap-country](http://7u2gqx.com1.z0.glb.clouddn.com/vue-cmap-1.png)\n\n![vue-cmap-province](http://7u2gqx.com1.z0.glb.clouddn.com/vue-cmap-2.png)\n\n\n## 特性\n* 平滑的省市视图切换\n* 可叠加 OpenStreetMap 贴片地图\n* 惰性加载地形数据（基于 Code Splitting，无需配置后端接口）\n* 参数化的定制样式\n* 极轻，初始数据量小于 80K\n\n\n## Demo\nClone 本仓库并执行构建：\n\n``` text\ncd vue-cmap/example\nnpm run dev\n```\n\n\n## 导入\n按标准 Vue 组件导入方式导入即可：\n\n``` text\nnpm install vue-cmap\n```\n\n``` html\n\u003ctemplate\u003e\n  \u003cc-map :mapData=\"myMapData\"\u003e\u003c/c-map\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport CMap from 'vue-cmap'\n\nexport default {\n  data() {\n    return {\n      myMapData: [\n        { name: \"安徽\", value: 200, children: [] }\n      ]\n    }\n  },\n  components: { CMap }\n}\n\u003c/script\u003e\n```\n\n\n## API\nCMap 组件的数据和配置均以 Vue 的标准 `props` 形式传入，若地图数据在初始化 CMap 后保持不变，可在引入组件时添加 `v-once` 指令以优化性能：\n\n``` html\n\u003cc-map\n  v-once\n  :mapData=\"myMapData\"\n  :mapConf=\"myMapConf\"\u003e\n\u003c/c-map\u003e\n```\n\n### mapData\n通过该 `props` 传入省市数据。由于全国城市数量固定，故在此可将省份和城市数据全量传入，传入省市数据的顺序、数量均不限（缺少数据的省市会显示为灰色）。数据格式如下：\n\n``` js\nconst myMapData = [\n  {\n    // name 需与省份中文名保持一致\n    name: \"安徽\",\n    value: 200,\n    children: [\n      { name: \"黄山市\", value: 100 },\n      { name: \"合肥市\", value: 100 }\n      // ...\n    ]\n  },\n  { name: '北京', value: 300, children: [] }\n  // ...\n]\n```\n\n### mapConf\n通过该 `props` 传入 CMap 配置参数信息。传入的参数将与如下的默认参数合并后，再用于渲染图表：\n\n``` js\nexport default {\n  colors: ['#800026', '#BD0026', '#E31A1C', '#FC4E2A', '#FD8D3C', '#FEB24C', '#FED976', '#FFEDA0'],\n  scale: null,\n  width: '100%',\n  height: '550px',\n  hasCityView: true,\n  hasTileLayer: false,\n  hasZoomControl: true,\n  countryBounds: [[18, 72], [54, 137]],\n  tileStyle: {\n    weight: 2,\n    opacity: 1,\n    borderColor: 'white',\n    dashArray: 4,\n    fillOpacity: 0.7\n  },\n  highlightStyle: {\n    weight: 5,\n    borderColor: '#666',\n    dashArray: 0,\n    fillOpacity: 0.7\n  }\n}\n```\n\n#### width\nType: `String` Default: `100%`\n\n地图区域宽度。\n\n#### height\nType: `String` Default: `550px`\n\n地图区域高度。\n\n#### colors \nType: `Array`\n\n地图配色数组，数量不限。数组中越靠后的颜色用于渲染越大的数据。数据将按大小顺序均匀分配各颜色。\n\n#### scale\nType: `Object` Default: `null`\n\n需要手动定义地图各颜色阈值时，传入该参数。该参数存在时，`colors` 不生效。格式如下：\n\n``` js\nconst scale = [\n  { color: 'green', threshold: 100 },  // 小于等于 100 的数据为绿色\n  { color: 'yellow', threshold: 200 }, // 小于等于 200 的数据为黄色\n  { color: 'red', threshold: 300 },    // 小于等于 300 的数据为红色\n]\n```\n\n在默认情况下 `scale` 由 CMap 组件根据传入数据自动生成，无需手动定义颜色与数据的对应关系。\n\n#### hasCityView\nType: `Boolean` Default: `true`\n\n是否展示各省下的城市详细数据。\n\n#### hasTileLayer\nType: `Boolean` Default: `false`\n\n是否加载来自 Open Street Map 的贴片地图。\n\n#### hasZoomControl\nType: `Boolean` Default: `true`\n\n是否显示地图缩放控件。\n\n#### boxZoom\nType: `Boolean` Default: `true`\n\n是否启用 Shift 拖动鼠标的缩放。\n\n#### doubleClickZoom\nType: `Boolean` Default: `true`\n\n是否启用双击缩放。\n\n#### ScrollWheelZoom\nType: `Boolean` Default: `true`\n\n是否启用滚轮缩放。\n\n#### minZoom\nType: `Number` Default: `3`\n\n最低缩放等级。\n\n#### maxZoom\nType: `Number` Default: `Infinity`\n\n最高缩放等级。\n\n#### countryBounds\nType: `Array` Default: `[[18, 72], [54, 137]]`\n\n初始化时加载的中国经纬度，地图的缩放和平移均限制在该范围内。\n\n#### tileStyle\nType: `Object`\n\n地图省市 Tile 样式，默认参数如下：\n\n``` js\nconst tileStyle = {\n  weight: 2,              // 边框宽度\n  opacity: 1,             // 内容透明度\n  borderColor: 'white',   // 边框颜色\n  dashArray: 4,           // 边框间隔长度\n  fillOpacity: 0.7        // 边框透明度\n}\n```\n\n#### highlightStyle\nType: `Object`\n\nHover 时的 Tile 样式，默认参数如下：\n\n``` js\nconst tileStyle = {\n  weight: 5,              // 边框宽度\n  borderColor: '#666',    // 边框颜色\n  dashArray: 0,           // 边框间隔长度\n  fillOpacity: 0.7        // 边框透明度\n}\n```\n\n\n## Custom\n可通过定制 `modules/loader.js` 中 `require` 内容，剪裁出适合业务所需省份范围的构建版本，当只需国家视图时，可去除 `china.json` 之外的省份地形数据导入代码，以减小 Webpack 的构建文件数量。\n\n\n## License\nMIT","funding_links":[],"categories":["UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":["Libraries \u0026 Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoodlewind%2Fvue-cmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoodlewind%2Fvue-cmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoodlewind%2Fvue-cmap/lists"}