Skip to content

Latest commit

 

History

History
117 lines (79 loc) · 6.5 KB

README.md

File metadata and controls

117 lines (79 loc) · 6.5 KB
Raw

D3-GEO-MAP

点击这里看一个DEMO;

项目说明

D3-GEO-MAP 是一个基于 d3.js(v4),和 lodash 的地图绘制工具包。特性：

  1. 支持 GeoJson格式（需要 properties 中至少有个 name 属性，目前在各地下载的基本都有这个属性），推荐的下载地址为 ：阿里云-datav的下载。这个版本的地图包含已经计算好的中心点以及上下级的级联数据，方便后续自行扩展功能。
  2. 通过滤镜实现了一个 伪3D 的效果。地图看上去有一定的立体感。
  3. 支持各种点击选中交互操作
  4. 支持 条形图
  5. 支持 地区连线
  6. 支持 地区点
  7. 支持 飞线
  8. 支持Tips提示
  9. 目前所有功能压缩后不到30k(如果分离些不需要的组件和scss，会更小)。
  10. 暂未兼容 TopoJson ,如果使用的是 TopoJson ，可以直接修改源代码，在feature里面加一行代码即可实现兼容，如下
features = topojson.feature(json,json.object.xxx).features;

使用说明

水平有限，建议直接通过源码修改：

  1. clone 或者 download 本项目
  2. 复制 src 文件夹到项目，可改名
  3. 如果使用 webpack 可以使用 commonJS 引入 var D3Map = require('../src');
  4. 编写代码 var map = new D3Map(json,document.getElementById('id'),config) ;

配置项

地图配置

项 类型 说明 默认
RotateX Number 2.5D旋转角度，0为不旋转 30
Zoom Boolean 是否开启缩放平移功能，设置为 false 不开启 true
OnSelect Function 地图选中后的回调函数 null
Shadow Object 伪3D阴影设置，如果不需要可以设置为 null 或 false
默认配置在右下方产生5个单位相互阴影		 {Left:5,Top:5}

条形图配置 Bar

项 类型 说明 默认
Effect Number 条形出现的过滤时间（毫秒） 2000
Width Number 宽度 8
HeightMin Number 最低高度 10
HeightMin Number 最高高度 60
Radius Number 圆角 2
OnMouserOver Function 鼠标移到条形图上事件，接收线条自身数据 null
OnMouserOut Function 鼠标移出条形图事件，接收线条自身数据 null
OnClick Function 鼠标点击条形图后事件，接收线条自身数据 null

线条配置 Line

项 类型 说明 默认
EffectMin Number 最少飞行时间 2000
EffectMax Number 最大飞行时间 4000
PointRadius Number 飞行点的半径 1.5
OnMouserOver Function 鼠标移到线条上事件，接收线条自身数据 null
OnMouserOut Function 鼠标移出线条事件，接收线条自身数据 null
OnClick Function 鼠标点击线条后事件，接收线条自身数据 null

标记点配置 Point

项 类型 说明 默认
EffectMin Number 最小扩散时间 2000
EffectMax Number 最大扩散时间 4000
RadiusMin Number 扩散起始半径 8
RadiusMax Number 扩散终止半径 16

飞线配置 Fly

项 类型 说明 默认
EffectMin Number 最小飞行时间 2000
EffectMax Number 最大飞行时间 4000

方法

方法 参数类型 说明 参数说明
setBars Array[Object] 设置条形图 数组，每个元素至少需要 area、count 两个属性
例如:setBars([{area:'湖北省',count:100},{area:'湖南省',count:500}])
setLines Array[Object] 设置地图连线 数组，每个元素至少需要 from、to两个属性
例如:setLines([{from:'湖北省',to:'湖南省'},{from:'四川省',to:'上海市'}])
setPoints Array[String] 设置地图标记点 地区名数组，
例如:setLines(['湖北省','湖南省','四川省','上海市'])
fly from, to, callback 设置地图飞线 说明：
1. from,to,即可以中一个地名，也可以是容器上的一个坐标点[x,y]
2. callback为选填参数，如果有传，则对飞线完成后会回调该方法
例如：
1. map.fly([200,200],'湖南省'), 2: map.fly('湖北省','湖南省',function(){map.tip('The message','湖南省')})
setColors Array[Object] 设置各个地区的填充样式 数组，每个元素至少需要 area、fill 两个属性
例如:setBars([{area:'湖北省',fill:'red'},{area:'湖南省',fill:'#cccccc'},{area:'四川省',fill:'rgba(0,0,5,0.5)'},{area:'上海市',fill:'url(#f-point)'},])
showTip String,String 弹出一个Tip说明 第一个参数为需要显示的html,第二个参数为需要显示在目标位置，如果是D3本身的鼠标事件，可以不传第二个参数
hideTip 隐藏Tip

自定义样式

所有样式均在 style.scss 和 style.html 里面，可以根据自己需要进行扩展

总结

由于地图定制化很强，在各项目中都是千变万化，所以仅提供源码方式使用，鼓励将所需要的部分代码复制到实际的项目中，根据实际要求修改并使用。

本项目使用 webpack，通过 git clone 下来后，使用 npm install 后，再使用 webpack，再启个http服务 就可以看到上面的demo了。demo基本是一个功能的全集，代码可以进行参考。

本人的功力和时间都有限，只是总结了一些地图上各种元素的排布绘制API，源码还算的上是模块分明，尽量简单粗暴一点，改起来比较直接！