/d3-map-build

d3-map-build

Primary LanguageJavaScript

d3-map-build 基于 D3.js(v4) 的地图绘制工具

import SE from "d3-map-buid"; 
new SE.map({
   areaData: mapInfo.areaData,
   container: "JD3MapList",
   mapUrl: mapInfo.mapUrl,
   mapCentre: mapInfo.mapCentre || [104.3, 28.425],
   mapScale: mapInfo.mapScale || 550,
   gOffset: mapInfo.gOffset,
   mouseoverCallBack: function(d) {
   },
   clickCallBack: mapInfo.clickCallBack || null,
   zoomCfg: {
   },
   initStatus: function() {
   }  
}); 
    mapUrl 地图geoJson 文件地址 必传
    mapCentre 投影中心位置 [] 规则 地址位置东经,北纬边界范围和的平均值 必传
    例:江苏省 东经116.3036—121.9661   北纬30.7531--35.3364  江苏的 mapCentre = [(116.3036+121.9661)/2, (30.7531+35.3364)/2]
    mapScale 地图缩放比例  Num 规则 根据页面区域大小改变  范围 100 - 8000 必传
    initStatus 地图绘制完成以后执行的方法 FUN
    zoomConf 缩放配置 {}
    例:{scaleExtent: [],
       zoomCallBack:FUNCTION,
       scaleExtent 支持的缩放比例范围默认0-10倍,
       zoomCallBack 缩放事件回调
     }
    mapUICfg 地图展示相关UI 配置 {}
    例:mapUICfg.fillColorRange : ['#fff', '#ff0000'], mapUICfg.stroke:'#e4e5f2'
    areaData 真实数据 [] 对应地图区域展示数据 每一条的area,value字段必传分别表示区块名称和数值
    且区块名称需要和地图文件数据里面的item.properties.name对应
    例:[{"area":"湖州市","value":"9"}]
    clickCallBack 对应地图区域点击事件回调
    mouseoverCallBack 鼠标hover 事件回调
    mouseoutCallBack 鼠标移出 事件回调
    closeMapName boolean 是否关闭默认省市名称
    closeMapPointer boolean 是否关闭对默认应省市对应的点
    closeColorSign boolean 是否关闭默认颜色标志模块
    diyPointerCfg 自定义点配置信息 {}
    例: diyPointerCfg.pointerLists [{"dtValue":"","name":"北京","cp":[116.24,39.55]}] 点信息
         diyPointerCfg.pointerClickCB FUNCTION