文章目录
  1. 1. 项目说明
  2. 2. 使用说明
    1. 2.1. 配置项
      1. 2.1.1. 地图配置
      2. 2.1.2. 条形图配置 Bar
      3. 2.1.3. 线条配置 Line
      4. 2.1.4. 标记点配置 Point
      5. 2.1.5. 飞线配置 Fly
    2. 2.2. 方法
    3. 2.3. 自定义样式
    4. 2.4. 总结

一个基于d3的地图demo,点击这里看;代码放在了github

项目说明

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里面加一行代码即可实现兼容,如下

1
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阴影设置,如果不需要可以设置为 nullfalse
默认配置在右下方产生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] 设置条形图 数组,每个元素至少需要 areacount 两个属性
例如:setBars([{area:'湖北省',count:100},{area:'湖南省',count:500}])
setLines Array[Object] 设置地图连线 数组,每个元素至少需要 fromto两个属性
例如: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] 设置各个地区的填充样式 数组,每个元素至少需要 areafill 两个属性
例如: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.scssstyle.html 里面,可以根据自己需要进行扩展

总结

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

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

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

文章目录
  1. 1. 项目说明
  2. 2. 使用说明
    1. 2.1. 配置项
      1. 2.1.1. 地图配置
      2. 2.1.2. 条形图配置 Bar
      3. 2.1.3. 线条配置 Line
      4. 2.1.4. 标记点配置 Point
      5. 2.1.5. 飞线配置 Fly
    2. 2.2. 方法
    3. 2.3. 自定义样式
    4. 2.4. 总结