{"id":16321472,"url":"https://github.com/doodlewind/sinomap","last_synced_at":"2025-03-16T14:31:00.845Z","repository":{"id":57144498,"uuid":"90637186","full_name":"doodlewind/sinomap","owner":"doodlewind","description":"🌎 Super lightweight canvas map lib.","archived":false,"fork":false,"pushed_at":"2018-03-22T15:57:49.000Z","size":548,"stargazers_count":107,"open_issues_count":4,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-23T13:39:46.783Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://sinomap.ewind.us","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doodlewind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-08T14:25:00.000Z","updated_at":"2024-02-14T03:16:14.000Z","dependencies_parsed_at":"2022-09-05T06:51:51.373Z","dependency_job_id":null,"html_url":"https://github.com/doodlewind/sinomap","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fsinomap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fsinomap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fsinomap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fsinomap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doodlewind","download_url":"https://codeload.github.com/doodlewind/sinomap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243818195,"owners_count":20352629,"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-10-10T22:47:53.980Z","updated_at":"2025-03-16T14:31:00.280Z","avatar_url":"https://github.com/doodlewind.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sinomap\n插件化的超轻量中国地图库\n\n\n## 特性\n* 基于 canvas 的地形数据渲染\n* 小于 5KB gzipped 的尺寸\n* 插件化的 Layer 层，提供 Hover API 支持\n\n\n## 上手\n请首先将 Sinomap 作为依赖安装：\n\n```\nnpm install --save sinomap\n```\n\n而后即可在项目中使用。注意在导入 Sinomap 库本身时并不带地形数据，但其附带了中国省份的地形数据 GeoJSON 资源以便于选择性导入：\n\n``` js\nimport Sinomap from 'sinomap'\n\n// 通用的 GeoJSON 地形数据资源\nimport china from 'sinomap/resources/china.json'\n```\n\n而后即可通过新建 Sinomap 实例的方式，初始化地图了：\n\n``` js\nnew Sinomap({ el: '#app', geoJSON: china })\n```\n\n\n## 示例\n你可以基于 Sinomap 定制出各类不同地图可视化效果。以下是若干实现了基本效果的示例：\n\n### Basic\n不带交互的基础地图：\n\n``` js\nimport Sinomap from 'sinomap'\nimport china from 'sinomap/resources/china.json'\n\nnew Sinomap({\n  el: '#map',\n  geoJSON: china,\n  color: 'red',\n  borderColor: 'black'\n})\n```\n\n### Layer\nSinomap 通过将数据传入 Layer 的方式实现可视化效果。不同 Layer 具有不同数据格式。\n\n``` js\n// ...\nimport ChoroplethLayer from 'sinomap/dist/layers/choropleth'\nimport BubbleLayer from 'sinomap/dist/layers/bubble'\n\n// 色级统计图 Layer\nconst choropleth = new ChoroplethLayer({\n  color: 'red', // 基础底色\n  level: 5, // 由底色衍生的分色种类数\n  data: [\n    { name: '北京', value: 1989 },\n    { name: '江苏', value: 1926 }\n  ],\n  // 光标移入区域时触发\n  // `name` 为 GeoJSON 中区域名\n  // `cp` 为 GeoJSON 中区域 capital 坐标\n  // `value` 为 Layer 的 data 数据\n  onAreaEnter ({ name, cp, value }) {\n    // 该函数中 this 指向 Layer 实例而非地图实例\n  },\n  // 光标移出区域时触发\n  onAreaLeave ({ name, cp, value }) {\n\n  }\n})\n\n// 气泡图 Layer\nconst bubble = new BubbleLayer({\n  color: 'red', // 基础底色\n  data: [\n    { \"name\": \"合肥\", \"coordinate\": [117.2461, 32.0361], \"size\": 10 }\n  ],\n  // 光标移入区域时触发\n  // `point` 为该 bubble 在 canvas 中的坐标\n  onAreaEnter ({ name, point, size, coordinate }) {\n\n  },\n  // 光标移出区域时触发\n  onAreaLeave ({ name, point, size, coordinate }) {\n\n  }\n})\n\n// 使用 layer 实例初始化 Sinomap\nnew Sinomap({\n  el: '#map',\n  layers: [choropleth, bubble],\n  geoJSON: china\n})\n```\n\n### 定制 Layer\n一个示例的 Layer 就是一个独立的 Class。Sinomap 提供了多个在特定时机将当前 canvas 交由插件绘图的回调 API，只需在插件 Class 中提供相应名称的类方法，Sinomap 即会在相应时机调用插件绘图。若存在多个插件，则每个回调 API 触发时，逐个调用插件的相应接口（插件不需要的回调可以不在插件 Class 中提供）。可用的 API 如下：\n\n#### afterAreaDraw (map, points, areaProps)\n当 Area 完成绘制后触发。在全国地图中，一个省份即为一个 Area。同样地，在省级地图中，一个城市即为一个 Area。\n\n* `map` 为当前 Sinomap 实例的 `this` 上下文，当前示例对应的 canvas 上下文为 `map.ctx`\n* `points` 为当前 Area 地形对应的 canvas 坐标数组，形如 `[[x1, y1], [x2, y2]...]`\n* `areaProps` 为当前 Area 的 GeoJSON 信息，包括名称 `name` / 坐标经纬度 `cp` 及 `id` 等（该属性中仅包含地形数据，相应的可视化数据应保存在 Layer 实例中，由 Layer 根据 `name` 等字段查找出数据后进行相应的可视化绘制）。\n\n#### onAreaHover (map, points, areaProps)\n在光标 Hover 至某个 Area 时被触发。\n\n#### onAreaEnter (map, areaProps)\n在光标离开某个 Area 时被触发。\n\n#### onAreaLeave (map, areaProps)\n在光标离开某个 Area 时被触发。\n\n#### afterMapDraw (map)\n在一次重绘结束时被触发。Hover 状态下每个 mousemove 事件均会触发重绘。\n\n除上述方法外，Sinomap 还以 utils 的形式，提供了便于插件绘图的辅助函数，以 `map.utils` 的形式提供给插件使用：\n\n#### map.utils.convert([lat, lng])\n输入一个经纬度数组，返回当前 canvas 中该经纬度的 `[x, y]` 坐标数组。\n\n#### map.utils.drawPath(ctx, points)\n根据形如 `[[x, y]...]` 的坐标数组，绘制一个多边形 Path。\n\n一个最简单的 Layer 示例如下（将当前 Hover Area 绘制为黑色）：\n\n``` js\nclass MyLayer {\n  onAreaHover (map, points, areaProps) {\n    map.ctx.fillStyle = 'black'\n    map.utils.drawPath(map.ctx, points)\n  }\n}\n\nconst myLayer = new MyLayer()\nnew Sinomap({\n  // ...\n  layers: [myLayer]\n})\n```\n\n\n## API\n目前 Sinomap 的配置均在 `new Sinomap` 时传入。所支持参数如下：\n\n* `el: string|HTMLElement` 目标 DOM 元素，支持传入选择器字符串与 DOM Node 对象。地图对应的 Canvas 会作为 `el` 的子元素插入 DOM 中。\n* `width: number` 地图宽度\n* `height: number` 地图宽度\n* `layers: Array\u003cLayer\u003e` Layer 数组\n* `color: string` 地图底色\n* `borderColor: string` 地图边框颜色\n* `geoJSON: GeoJSON` 地形 GeoJSON 数据\n\n\n## 开发\n\n开发模式：\n\n``` text\nnpm run dev-sinomap    # Sinomap 基础库\nnpm run dev-choropleth # 色级统计图插件\nnpm run dev-bubble     # 气泡图插件\n```\n\n生产模式：\n\n``` text\nnpm run build # 打包基础库及插件\n```\n\n\n## 致谢\nSinomap 的灵感与基础功能参考了 [smallworld.js](http://mikefowler.me/smallworld.js/)，API 设计借鉴了 [Chart.js](https://github.com/chartjs/Chart.js) 和 [Leaflet](http://leafletjs.com/)\n。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoodlewind%2Fsinomap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoodlewind%2Fsinomap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoodlewind%2Fsinomap/lists"}