Fork me on GitHub
超轻量 JS 地图库
超轻量
Sinomap 体积小于 5KB gzipped,附带中国省级地形数据的总尺寸在 20KB 内,不到多个大型可视化库的 1/10。
插件化
可视化效果通过轻量的 Layer 插件实现。每层 Layer 实例可用于可视化不同数据并逐层叠加。用户还可定制 Layer 并将其作为独立的 NPM 模块发布以复用,减少代码冗余。
现代化
通过结合 Canvas 与 ES6 的新特性,Sinomap 实现了简洁高效的地形数据渲染。同时,它提供了用于与现代 JavaScript View 库对接的 API 接口,提供更多的定制可能性。

Get Started
Sinomap 既可以通过 npm install 的方式安装,也可以直接通过 script 标签引入。 地形 GeoJSON 数据既可以通过 Webpack 等模块打包工具导入,也可以通过 Ajax 加载。
import Sinomap from 'sinomap'
import china from 'sinomap/resouces/china.json'

// 提供目标元素选择器与地形数据即可
new Sinomap({ el: '#map', geoJSON: china })
使用 Layer
原始 API 只提供基本的地图绘制功能。数据可视化通过 Layer 实现。 待可视化的数据传入 Layer 实例而非地图实例,实现更好的模块化。
// ...
import ChoroplethLayer from 'sinomap/dist/layers/choropleth'

// 创建 Layer
const myLayer = new ChoroplethLayer({
  color: 'red',
  data: [
    { name: '北京', value: 1989 },
    { name: '江苏', value: 1926 }
  ]
})

new Sinomap({
  el: '#map',
  color: '#bcf5ff',
  borderColor: '#bcf5ff',
  layers: [myLayer],
  geoJSON: china
})
叠加 Layer
每层 Layer 对应一层对 Canvas 的重绘,可通过叠加多个 Layer 的方式可视化不同数据。 Sinomap 目前提供了 Choropleth 与 Bubble 两种示例 Layer 供导入。
// ...
import BubbleLayer from 'sinomap/dist/layers/bubble'

const choroplethA = new ChoroplethLayer({
  data: [ { name: '福建', value: 123 } ]
})
// 为同类型 Layer 实例化不同数据与配置,并叠加
const choroplethB = new ChoroplethLayer({
  color: 'green',
  data: [ { name: '安徽', value: 456 } ]
})
const bubble = new BubbleLayer({
  data: [ { "name": "厦门", "coordinate": [118.0667, 24.4333], "size": 6 } ]
})

new Sinomap({
  el: '#map',
  layers: [choroplethA, choroplethB, bubble],
  geoJSON: china
})
绘制不同区域地图
Sinomap 默认提供了中国国家级与省市的 GeoJSON 地形数据,可通过 import 或 Ajax 的方式获取并加载不同的地形数据。
// ...
import fujian from 'sinomap/resources/fujian.json'

new Sinomap({
  el: '#map',
  geoJSON: fujian
})
Layer API
Layer 提供了 Hover 等事件的回调接口,从而与其他 JS View 库结合,实现更好的定制。
// ...
const hoverText = document.getElementById('hover-text')

const myLayer = new ChoroplethLayer({
  onAreaEnter ({ name, value }) {
    hoverText.innerText = name
  },
  onAreaLeave ({ name, value }) {
    hoverText.innerText = ''
  }
})

new Sinomap({
  el: '#map',
  layers: [myLayer],
  geoJSON: fujian
})
map stack leaf html-five