基于EXT构建GIS页面
最近经常碰到尴尬的情况，想做个工程，或者写个Demo的时候，总是苦于没有顺手的，或者说是好看又好用的界面。这种事情又不能去找美工来设计，那只能自己动手来写界面了。
在GIS中，UI是很重要的。虽然UI对于程序员来说并不重要，但是对于GIS系统的用户——大众用户以及领导们来说，UI有时候甚至能撑住GIS系统的半个台面。比如说Google页面的UI，虽然是脚本实现的，但是平滑与舒适度让人称赞；再比如Adobe AIR，Microsoft Silverlight，都有优美的界面，良好的动画效果。这样绚丽的UI不仅吸引了大众的眼球，也吸引了我们这些“锐意创新”的技术人员，我们愿意在这个平台上面施展自己的想象力和创造力，从而为用户提供出更加人性化的应用系统。
跑题了，继续说说GIS的UI。虽然UI主要是由应用系统的开发商来实现的，但是如何首先为这些开发上提供良好的UI基础呢？这里不得不说说ESRI，他们的平台（现在的9.3及以后的9.4）基于Adobe Flex，Microsoft Silverlight，以及Dojo封装了GIS的客户端接口，这样开发人员只需要调用这些接口就可以开发出基于那些技术的应用系统了。这种方式为开发人员提供了极大的方便，也为应用系统的最终效果打下了基础，还在平台之间的竞争中领先了一步，总的来说，高，实在是高。ESRI把GIS与IT技术之间的差距拉近了，为GIS行业又做出了贡献。又说远了，这里不是为ESRI讲好话，只是希望国内软件也能勤奋创新，锐意进取。
回到正题，由于Flex和Silverlight已经有了很好的UI，那么为了使JavaScript也有很好的交互界面，这里就用我们常见的EXT搭建一个界面。
html
1 <html>
2 <head>
3 <meta http-equiv="Content-Page" content="text/html; charset=utf-8" />
4 <title></title>
5 <link rel="stylesheet" type="text/css" href="scripts/ext-frame/ext/resources/css/ext-all.css" />
6 <script type="text/javascript" src="scripts/ext-frame/ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="scripts/ext-frame/ext/ext-all.js"></script>
8 <script type="text/javascript" src="scripts/ext-frame/frame.js"></script>
9 </head>
10 <body>
11 <div id="header"></div>
12 <div id="businessContainer"></div>
13 <div id="mapContainer" style="width:100%; height:100%;">
14 <div id="mapControlPanel" style="width:100%; height:100%; z-index:1;">
15 <div id="mapControl" style="width:100%; height:100%; z-index:1;"></div>
16 </div>
17 <div id="toolbar"></div>
18 <div id="overviewPanel" style="position:absolute; right:0px; z-index:10;">
19 <div id="overview" style="width:150px; height:150px;"></div>
20 </div>
21 <div id="layerPanel" style="position:absolute; left:0px; z-index:10;">
22 <div id="layer" style="width:250px; height:280px;"></div>
23 </div>
24 <div id="resultGrid"></div>
25 </div>
26 <div id="footer"></div>
27 </body>
28 </html
2 <head>
3 <meta http-equiv="Content-Page" content="text/html; charset=utf-8" />
4 <title></title>
5 <link rel="stylesheet" type="text/css" href="scripts/ext-frame/ext/resources/css/ext-all.css" />
6 <script type="text/javascript" src="scripts/ext-frame/ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="scripts/ext-frame/ext/ext-all.js"></script>
8 <script type="text/javascript" src="scripts/ext-frame/frame.js"></script>
9 </head>
10 <body>
11 <div id="header"></div>
12 <div id="businessContainer"></div>
13 <div id="mapContainer" style="width:100%; height:100%;">
14 <div id="mapControlPanel" style="width:100%; height:100%; z-index:1;">
15 <div id="mapControl" style="width:100%; height:100%; z-index:1;"></div>
16 </div>
17 <div id="toolbar"></div>
18 <div id="overviewPanel" style="position:absolute; right:0px; z-index:10;">
19 <div id="overview" style="width:150px; height:150px;"></div>
20 </div>
21 <div id="layerPanel" style="position:absolute; left:0px; z-index:10;">
22 <div id="layer" style="width:250px; height:280px;"></div>
23 </div>
24 <div id="resultGrid"></div>
25 </div>
26 <div id="footer"></div>
27 </body>
28 </html
extExt.onReady(function(){
/////////////////////////////////////////////
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
/////////////////////////////////////////////
////////////////////控件设计/////////////////////////
var bm = new Ext.menu.Menu({
id:"businessMenu",
items:[{
text:"Select Date",
icon:"images/addMark.gif",
menu:new Ext.menu.DateMenu({
//selectHandler:
}),
//handler:
}, {
text:"Pick Color",
icon:"images/addMark.gif",
menu:new Ext.menu.ColorMenu({
//selectHandler:
}),
//handler:
}]
});
var tb = new Ext.Toolbar();
tb.render("toolbar");
tb.add({
text:"Business",
icon:"images/eventpoint.gif",
cls :'x-btn-text-icon',
menu:bm
}, "-", {
text:" 全幅",
icon:"images/viewentire.gif",
cls :'x-btn-text-icon',
handler: function(){
viewEntire();
}
}, "-", {
text:" 平移",
icon :'images/pan.gif',
cls :'x-btn-text-icon',
handler: function(){
setPan();
}
}, "-", {
text:" 放大",
icon:"images/zoomin.gif",
cls :'x-btn-text-icon',
handler: function(){
setZoomIn();
}
}, "-", {
text:" 缩小",
icon:"images/zoomout.gif",
cls :'x-btn-text-icon',
handler: function(){
setZoomOut();
}
}, "-", {
text:" 清除高亮",
icon:"images/clearhighlight.gif",
cls :'x-btn-text-icon',
handler: function(){
clearHighlight();
}
});
var overviewPanel = new Ext.Panel({
el:"overviewPanel",
collapsible: true,
collapsed:true,
title: "鹰眼视图",
width:160,
height:160,
items:{
el:"overview",
xtype:"box"
}
});
var mapControlPanel = new Ext.Panel({
id:"mapControlPanel",
el:"mapControlPanel",
collapsible:false,
items:{
el:"mapControl",
xtype:"box"
}
});
var layerPanel = new Ext.Panel({
id:"layerPanel",
el:"layerPanel",
title:"图层控制",
width:250,
height:300,
collapsible:true,
collapsed:true,
items:{
el:"layer",
xtype:"box"
}
});
////////////////////控件设计/////////////////////////
////////////////////加载主体框架/////////////////////////
var frame = null;
frame = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
el:"header",
html: '<h1 class="x-panel-header">GIS@dulvyizhihua</h1>',
autoHeight: true,
border: true,
margins: '0 0 5 0'
}, {
region: 'west',
el:"businessContainer",
collapsible: true,
title: 'BusinessData',
xtype: 'tabpanel',
width: 200,
autoScroll: true,
split: true,
activeTab:0,
items:[{
title:"LayerControl",
html:"图层控制"
},{
title:"Result",
html:"查询结果"
}
],
}, {
id:"mapContainer",
region: 'center',
xtype: 'panel',
autoScroll :false,
closable :false,
margins :'1 1 1 1',
el:"mapContainer",
items: [tb, overviewPanel, layerPanel, mapControlPanel]
}, {
region: "south",
xtype: "panel",
el:"footer",
autoHeight: true,
items:{
html:"<a href='http://www.supermap.com.cn'><h1 class='x-panel-header' align=center>Copyright@dulvyizhihua</h1></a>"
}
}]
});
frame.render();
//onPageLoad();
////////////////////加载主体框架/////////////////////////
var mapContainer = frame.findById("mapContainer");
mapContainer.addListener("resize", mapResizeHandler);
function mapResizeHandler(){
var clientWidth = $get("mapControlPanel").clientWidth;
var clientHeight = $get("mapControlPanel").clientHeight;
mapControl.resize(clientWidth, clientHeight);
/////////////////////////////////////////////
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
/////////////////////////////////////////////
////////////////////控件设计/////////////////////////
var bm = new Ext.menu.Menu({
id:"businessMenu",
items:[{
text:"Select Date",
icon:"images/addMark.gif",
menu:new Ext.menu.DateMenu({
//selectHandler:
}),
//handler:
}, {
text:"Pick Color",
icon:"images/addMark.gif",
menu:new Ext.menu.ColorMenu({
//selectHandler:
}),
//handler:
}]
});
var tb = new Ext.Toolbar();
tb.render("toolbar");
tb.add({
text:"Business",
icon:"images/eventpoint.gif",
cls :'x-btn-text-icon',
menu:bm
}, "-", {
text:" 全幅",
icon:"images/viewentire.gif",
cls :'x-btn-text-icon',
handler: function(){
viewEntire();
}
}, "-", {
text:" 平移",
icon :'images/pan.gif',
cls :'x-btn-text-icon',
handler: function(){
setPan();
}
}, "-", {
text:" 放大",
icon:"images/zoomin.gif",
cls :'x-btn-text-icon',
handler: function(){
setZoomIn();
}
}, "-", {
text:" 缩小",
icon:"images/zoomout.gif",
cls :'x-btn-text-icon',
handler: function(){
setZoomOut();
}
}, "-", {
text:" 清除高亮",
icon:"images/clearhighlight.gif",
cls :'x-btn-text-icon',
handler: function(){
clearHighlight();
}
});
var overviewPanel = new Ext.Panel({
el:"overviewPanel",
collapsible: true,
collapsed:true,
title: "鹰眼视图",
width:160,
height:160,
items:{
el:"overview",
xtype:"box"
}
});
var mapControlPanel = new Ext.Panel({
id:"mapControlPanel",
el:"mapControlPanel",
collapsible:false,
items:{
el:"mapControl",
xtype:"box"
}
});
var layerPanel = new Ext.Panel({
id:"layerPanel",
el:"layerPanel",
title:"图层控制",
width:250,
height:300,
collapsible:true,
collapsed:true,
items:{
el:"layer",
xtype:"box"
}
});
////////////////////控件设计/////////////////////////
////////////////////加载主体框架/////////////////////////
var frame = null;
frame = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
el:"header",
html: '<h1 class="x-panel-header">GIS@dulvyizhihua</h1>',
autoHeight: true,
border: true,
margins: '0 0 5 0'
}, {
region: 'west',
el:"businessContainer",
collapsible: true,
title: 'BusinessData',
xtype: 'tabpanel',
width: 200,
autoScroll: true,
split: true,
activeTab:0,
items:[{
title:"LayerControl",
html:"图层控制"
},{
title:"Result",
html:"查询结果"
}
],
}, {
id:"mapContainer",
region: 'center',
xtype: 'panel',
autoScroll :false,
closable :false,
margins :'1 1 1 1',
el:"mapContainer",
items: [tb, overviewPanel, layerPanel, mapControlPanel]
}, {
region: "south",
xtype: "panel",
el:"footer",
autoHeight: true,
items:{
html:"<a href='http://www.supermap.com.cn'><h1 class='x-panel-header' align=center>Copyright@dulvyizhihua</h1></a>"
}
}]
});
frame.render();
//onPageLoad();
////////////////////加载主体框架/////////////////////////
var mapContainer = frame.findById("mapContainer");
mapContainer.addListener("resize", mapResizeHandler);
function mapResizeHandler(){
var clientWidth = $get("mapControlPanel").clientWidth;
var clientHeight = $get("mapControlPanel").clientHeight;
mapControl.resize(clientWidth, clientHeight);
Author:dulvyizhihua
