平台2.0

1.改善布局

新版本的平台美化了界面布局，新增了dijit/layout/TabContainer控件和dojox.grid.DataGrid控件。

平台1.0版本如图1.1所示：

平台2.0版本界面如图1.2所示：

在2.0版本中，平台界面右边由三个部分组成：一个功能区域，主要用于数据类型、起始时间、地点的选择；一个包含datagrid控件的TabContainer控件；一个用来展示反演结果的TabContainer控件。每个部分约占1/3高度。

1.1 dijit/layout/TabContainer组件

Dijit 是 Dojo 工具包的富组件用户界面库。大多数 Web 应用程序开发人员都熟知基本 HTML 元素和表单元素的局限性，以及利用 <div> 等元素和 CSS 规则对应用程序进行布局的难度。这正是 Dijit 能够发挥其作用的场所。

Dijit 提供了一系列丰富的组件，TabContainer便是其中之一。Dijit组件可以通过两种方式声明：可以使用 HTML 风格的标签以声明式方法声明，也可利用 JavaScript 以编程方式声明。

平台中使用编程方式声明，核心代码如下：

var tc3 = new TabContainer({                style: "height: 100%; width: 100%;"            }, "tc1-prog3");            var cp13 = new ContentPane({                title: "反演结果",                content: ""            });            tc3.addChild(cp13);            tc3.startup();

1.2 dojox.grid.DataGrid组件

DataGrid组件是dojox中的组件之一，主要用于在前端展示从服务端传输过来的数据。

 

1.定义数据并且存储

var data = {                identifier: "",                items: []            };

此处，我们定义的数据为空，然后存储。

var store = new ItemFileWriteStore({data: data});

2.构造布局

var layout = [[                {'name': '编号', 'field': 'id2', 'width': '40px'},                {'name': '数据类型', 'field': 'name', 'width': '70px'},                {'name': '日期', 'field': 'date', 'width': '200px'},                {'name': 'url', 'field': 'url', 'width': '550px'}            ]];

3.实例化DataGrid

var grid = new DataGrid({                id: 'grid',                store: store,                structure: layout,                rowSelector: '20px'            });

前端渲染之后，效果如下:

因为我们定义的数据为空，所以并没有数据加载在Datagrid中显示。

4.用户选择数据类型，起始时间，地点后，datagrid组件获得新的数据源（初始时我们定义它为空）。此数据源是通过ajax方式从后台数据库中获得的。

找到已经创建的datagrid组件，然后改变它的数据。

var grid = dijit.byId("grid"); grid.setStore(newStore);

前端渲染后，效果如下：

2.改善影像加载方式

1.0版本中通过设置jstree子节点点击事件，加载影像图像。在2.0版本中设置datagrid中的行双击事件，加载影像图像。这样的方式更加合理和直观，用户在datagrid中选择想要查看的影像，双击该行。即可加载显示此影像。核心代码如下：

var id=dijit.byId('grid');            dojo.connect(id,"onRowDblClick",function(e){                var row = id.getItem(e.rowIndex);                var url = grid.store.getValue(row, "url");                showImageservice(url);            });

如下图所示，用户可以选择29号，16号，1号任意一天的影像，双击对应的行，即可加载并显示对应的影像图片。

3.改善时间选择方式

1.0版本中只能选择具体某一天的影像图片。在2.0版本中，用户可以选择一个时间范围内的影像图片。譬如，用户选择，modis数据类型，时间从2016-01-01至2016-07-01号。在datagrid中即可显示此段时间内存在的影像图片。如下图所示。

4.解决了影像重叠加载问题

1.0版本中，每次加载影像图片，之前加载的图片并没有消除，新加载的图片在原来的图片上重叠加载。效果如下图所示：

2.0版本中解决了图像叠加问题。核心代码如下：

if (map) {                if(imageServiceLayer) {                     map.removeLayer(imageServiceLayer);                }            }

即在加载新的影像服务之前，判断是否已经存在影像服务。若存在，则删除服务，然后加载新的影像服务。