基于SuperMap的Echarts迁徙图

基于SuperMap的Echarts迁徙图

       前提：对SuperMap有一定了解

一、      用法

1、引入相关js

 <scriptsrc="./../js/jquery.min.js"></script>

    <scripttype="text/javascript"src="./../js/echarts-all.js"></script>

<script type="text/javascript"src="./../js/forJavaScript/libs/SuperMap.Include.js"></script>

 

  2、创建扩展对象SuperMapExt、设置访问地址。

 var superMapExt= new SuperMapExt("main", SuperMap, echarts,{hosturl:'http://support.supermap.com.cn:8090',controls: [

           new SuperMap.Control.LayerSwitcher(),

           new SuperMap.Control.ScaleLine(),

           new SuperMap.Control.PanZoomBar(),

           new SuperMap.Control.Navigation()

       ]});

3、设置Echarts渲染option对象

4、调用initLazyECharts(option,SuperMap) 渲染Echarts, SuperMap是超图GIS的命名空间必须要有。

二、      API

1.       构造函数

参数说明：

第一个参数：Div 容器ID

第二个参数：超图的命名空间

第三个参数：echarts 的命名空间

第四个参数：超图地图初始化参数

用法如下：

 var superMapExt = newSuperMapExt("main", SuperMap,        echarts,{hosturl:'http://support.supermap.com.cn:8090',controls: [

            newSuperMap.Control.LayerSwitcher(),

            new SuperMap.Control.ScaleLine(),

            new SuperMap.Control.PanZoomBar(),

            new SuperMap.Control.Navigation()

        ]});

2.       getMap 返回SuperMap地图实例

参数说明： 无

返回值：SuperMap.Map

用法如下：

   superMapext.getMap();

3.       initLazyECharts 初始化Echarts

参数说明：

  第一个参数option： echarts的option

  第二个参数SuperMap：SuperMap 的命名空间

返回值：无

用法如下：

  superMapExt.initLazyECharts(option,SuperMap);

 

三、      扩展思路

i.        设置命名空间为为SuperMap

ii.       创建Map对象

iii.    扩展一个Div遮罩层在地图

iv.    设置页面像素对应经纬度、

v.       设置经纬度对应页面像素

vi.    绑定地图事件的处理方法

vii.  把遮罩层Div初始化为Echarts

四、      Demo下载

http://download.csdn.net/download/tannongchun/9983805

五、      完成效果