• 提供:省市/热力/网格/POI点四中数据图层绘制/删除功能;
• 设置显示区域可以自动调整zoom级别;
• 经讨论 这里只设置中心点， 不调整zoom级别.
• 地图完成加载/用户修改zoom/显示区域/拖拽地图后会统一触发数据加载事件;
• 点击绘制的网格/POI点后触发 onItemClick 事件暴露一些参数,使用页面逻辑根据这些参数 决定弹出哪种对话框;
• 数据加载优化,会预加载一些看不见区域的数据提升体验;
• 暴露属性(可以在设置默认值,允许页面逻辑进行修改):
  • width/height 默认撑满容器,可以跟随容器大小改变地图的大小
  • 显示区域 默认显示北京,支持传入 位置 名称,比如 "宁波","浙江省" 为高德地图api的透传
  • zoom 默认为国家级,设置后改变高德地图的缩放级别,与高德,修改后改变地图的缩放级别
  • province 暂时有省份 后续需要再扩展 省级/市级,设置高亮省级/市级色彩图,设置空数据,固定格式 [{ id:'', title:'',//显示的名称 place:'浙江省', // 如果市级就传递 "宁波市" value:xxx, color:'' }]
  • heatmap 热图数据,设置后再地图上渲染,设置空数组会删掉,固定格式 [{ id:'', title:'',//显示的名称 lat: xxx, lng: xxx, count:xxx }]
  • grid 网格化数据,设置后在地图上渲染,设置空数组会删除已经绘制的网格数据,格式固定 [{ id:'', title:'',//显示的名称 boundary:[{lat:xxx,lng:xxx},{},{},{}]// 网格四边点的集合 value:xxx, color:'' // 默认根据颜色,规则为: 由高到低: 0%~25%红,25%-50%橙色,50%-75%黄,75%~100%绿 }]
  • poi poi点数据,与grid类似,可以共存,设置空数组会删除已经绘制的poi点,格式固定 [{ id:'', title:'', lat: xxx, lng: xxx, icon: '', // 显示的类型 }] -暴露事件:
  • onClick 点击地图上绘制的热力图,网格,点后触发,传递:
  • 图形类型 有以下四种: type: grid, heatmap, poi, province
  • 图形绑定的数据 data
  • x,y 相对于文档的左顶点。 page: {x: xxx, y: xxx}
  • 经纬度
  • 高德地图对象 amap
  • onDataLoad 地图加载后加载数据/zoom缩放后/移动后,传递:
  • 地图的边界?
  • zoom级别
  • 高德地图对象 amap

{
    //容器的宽
    width: '100%',
    //容器的高
    height: '100%',
    //地图的缩放级别
    zoom: 5,
    // 定位地址可选
    place: '北京',
    //mapOption
    mapOption: {
        // http://lbs.amap.com/api/javascript-api/reference/map 这里面的所有属性
    },
    //toolbar 组件配置
    toolbarOption: {
        //http://lbs.amap.com/api/javascript-api/reference/map-control#AMap.ToolBar 
    },
    //设置省份颜色 其中place 属性是必选， color可选 province 可为空  [], null, undefined, 为空时 会清空省份颜色
    province: [{
        place: '浙江省',
        color: 'red'
    }, {
        place: '北京',
    }],
    provinceOption: {
        //颜色函数 item 为当前项的原始数据
        color: function (item) {
            return color;
        }               
    },
    //设置poi相关信息 lng, lat 必选 其余属性随意
    poi: [{
        center: {
            lng: xxx,
            lat: xxx
        },
    }],
    //
    //商家相关信息
    poiOption: {
        支持这里的属性 http://lbs.amap.com/api/javascript-api/reference/overlay#Marker          
    }
    //热力图  lng, lat , value 必选， 其余属性随意
    heatmap: [{
        center: {
            lat: xxx,
            lng: xxx
        },
        value: xxx 
    }],
    //热力图颜色设置
    heatmapOption: {
        //具体见 http://lbs.amap.com/api/javascript-api/reference/layer#m_AMap.Heatmap 与高德地图api同步                 
    },
    //boundary 必选， 里面是边界的点
    grid:[{
        boundary:[{lng:xxx, lat:xxx}, {...}, {...}, {....}]      
    }],
    gridOption: {
        //颜色函数 item 为当前项的原始数据
        color: function (item) {
            return color;
        }               
    },
    //地图complete之后触发
    onAfterComplete: function (map) {
        //传入  amap对象 这里添加各种个性化的东西    
    },
    // 单击事件 各种图形的单击事件
    onClick: function (params) {
        //params 有如下参数 可能没有
        type: grid, heatmap, poi, province
        //数据 可能没有
        data: data,
        page: {x: x, y: y},
        lnglat: {lng: xxx, lat: xxx},
        amap:  高德地图对象
    },
    // 地图加载 缩放平移后触发
    onDataLoad: function (params) {
        //parmas 如下参数
        boundary: [{lng: lat:}, {}, {}, {}]
        zoom:  缩放级别
        center: {lng: ,lat:} 
        amap: 高德地图对象 
    }
};