【转】Ext配合ArcGIS JavaScript快速搭建地图系统

当ESRI推出ArcGIS Server 的Flex API和Silverlight
API的之初，也许你会为之震惊，前端活泼生动的视角效果，以及后台强大的地图分析能力得到紧密的结合，足以一扫以前ADF的阴霾。当然了，要做出好的视角效果，除了专门学习一门富客户端技术，如Flex或Silverlight，那是一个较为漫长的过程，而且，要做出好的的界面和动画效果，都必须有较深后的美工功底。


对于没有接触过flex和Silverlight，且没有美工功底的开发人员来说，这无疑是一种挑战。如果你是个喜欢接受挑战的开发人员，那恭喜你，你可以直接使用ArcGIS的Flex
API和Silverlight
API进行GIS的开发，并祝愿你打造出完美的地图系统。但如果你是个实用主义者，并且不想耗费时间在界面的搭建上，只想一心专注地图应用，快速搭建系统的话，那使用ArcGIS
Server JavaScript. API配合Ext，无疑是你最好的选择。


笔记认为，Ext是目前少数几个做得最成功的JS框架。它具有良好的架构，提供丰富而功能强大的组件，支持组件拖拽和半透明效果等。不论你是老程还是小程，第一次见到Ext展示效果的时候，肯定会兴奋不已，恨不得马上将其肢解，看看内部到底是什么回事。Ext是一个完全开放源代码的js库，在遵守其授权的基础上，任何人都可以对其进行修改，并将其整到自己的项目中去。关于Ext的介绍和基础知识，本文不作详细介绍，读者可以登录Ext官网http://www.extjs.com/
了解和下载最新的脚本库和说明文档。

    细心的读者也许会发现，ArcGIS JavaScript.
API使用的是dojo框架，而我们这次介绍的是使用Ext框架，那会不会在搭建系统的时候比较麻烦，相互之间有没有什么不良影响。但只要我们细心想想，就会发现，ESRI已经把dojo整合到JavaScript.
API，我们并不需要在html中明确指出dojo的脚本引用，只需要加上<script. type="text/javascript"
src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>即可。而Ext库的引用也是很简单，直接把库文件拷贝到项目中去，使用<script>标签引用一下就可以了。


为什么要引入Ext？也许不用我多说读者都能明白。因为dojo的后台能力很强经，但在前端的表现并不理想，使用Ext可以有效的弥补这方面的不足。
闲话少说，马上切入正题。先来看看搭建开发环境的必要条件。It’s too easy！首先搭建好下载并搭建好ArcGIS JavaScript.
API（如果有外网环境并且想偷懒，可以直接使用网络路径引用，如<script. type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>）。然后到http://www.extjs.com/下载最新的Ext库（中文版地址:http://www.extjs.org.cn/），解压后提取相关的js和css文件到项目目录下。可以使用文本编辑器或者专门的网页开发平台（如dw）进行代码的编写。


好了，下面将介绍如何用几十行代码将一个地图系统的基本界面和最基础的功能搭建出来（嘿嘿，做demo的时候非常省事哦）。先来个看图说话。


从图可以看到，我们现在搭建的一个界面里面包括了哪些内容。这感觉就像我们常见的C/S地图用用布局。最顶是标题栏和常用工具条，左边是可隐藏、可折叠的类似QQ的工具栏，中心主框是地图展示窗口，最底下是状态栏，用于显示操作提示。
下面我们来看一下详细的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Ext和ArcGIS Javascript. API快速搭建地图展示程序 --by LazySheep</title>
<script. src="adapter/ext/ext-base.js" type="text/javascript"></script>
<script. src="ext-all.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script. src="http://lyx/arcgis_js_api/library/1.5/arcgis/" type="text/javascript" ></script>
<script. type="text/javascript">
　　dojo.require("esri.map");
　　dojo.require("esri.toolbars.navigation");
　　var mapLayout,map,toolbar;
　　function initMap(){
　　　　esriConfig.defaults.map.sliderLabel = null;
　　　　//加载地图
　　　　map = new esri.Map(Ext.getCmp('mapPanel').body.dom.id); 
　　　　//map = new esri.Map('mapPanel');
　　　　var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
　　　　map.addLayer(tiledMapServiceLayer); 
　　　　//初始化工具
　　　　toolbar = new esri.toolbars.Navigation(map);
　　}

　　function createLayout(){
　　　　new Ext.Viewport({
　　　　enableTabScroll:true,
　　　　layout:"border",
　　　　items:[{title:"ArcGIS Ext 地图展示程序 --by LazySheep",
　　　　region:"north",
　　　　height:50,
　　　　//嘿嘿，此处加载初始化工具条，本节懒得把代码拆分，后期将对各部分进行整理
　　　　//各部分的功能将用在不同的js文件中编写和实现（这是懒羊羊的风格，哈哈）
　　　　tbar:[
　　　　　　{xtype: 'tbbutton', text:'  地图放大',cls: 'x-btn-text-icon',icon: 'images/Zoom_In.png', tooltip:'  地图放大',
　　　　　　　　handler: function(){toolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}},
  
　　　　　　{xtype: 'tbbutton', text:'  地图缩小',cls: 'x-btn-text-icon',icon: 'images/Zoom_Out.png', tooltip:'地图缩小',
　　　　　　　　handler: function(){toolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}},
  
　　　　　　{xtype: 'tbbutton', text:'  地图平移',cls: 'x-btn-text-icon',icon: 'images/hand.png', tooltip:'地图平移',
　　　　　　　　handler: function(){toolbar.activate(esri.toolbars.Navigation.PAN);}},
  
　　　　　　{xtype: 'tbbutton', text:'  地图全图',cls: 'x-btn-text-icon',icon: 'images/Full_Extent.png', tooltip:'地图全图', 
　　　　　　　　handler: function(){ toolbar.zoomToFullExtent();}},
  
　　　　　　{xtype: 'tbbutton', text:'  前一视图',cls: 'x-btn-text-icon',icon: 'images/Zoom_Back.png', tooltip:'前一视图', 
　　　　　　　　handler: function(){ toolbar.zoomToPrevExtent();}},

　　　　　　{xtype: 'tbbutton', text:'  后一视图',cls: 'x-btn-text-icon',icon: 'images/Zoom_Forward.png', tooltip:'后一视图', 
　　　　　　　　handler: function(){toolbar.zoomToNextExtent();}}
　　　　]
　　},
　　{
　　　　title:"工具栏",
　　　　region:"west",
　　　　width:300,
　　　　collapsible:true,
　　　　layout:"accordion",
　　　　layoutConfig: {animate:true},
　　　　items:[{id:'LayersPanel',title:'图层控制'},{id:'AttributePanel',title:'属性'},{id:'OverViewPanel',title:'鹰眼'}]  
　　},
　　{
　　　　region:"center",
　　　　xtype: 'panel' ,
　　　　id:'mapPanel'   //地图控件
　　},//添加状态栏
　　{
　　　　region:"south",
　　　　height:0,
　　　　bbar:[{id:'OperateStu',text:"状态栏"}]
　　} 
 ]
 });
}

Ext.onReady(function(){
　　createLayout();
　　initMap();
});

</script>
</head>
<body>
</body>
</html>

代码中HTML与js，加上注释，还不到一百行。感到惊讶了吧？其实大部分工作都已经交由ext和ArcGIS JavaScript. API代为实现了，我们只是将其简单的组合一下。下面我们来分析一下所使用到的库。 Ext框架下载解压缩后，文件夹大小为四十多兆（笔者使用的是ext-3.1.1），里面包括了完整的ext代码库、几个ext的框架、实例代码、说明文档等等。老程可以根据自己的实际需要，提取出必须的文件，以达到最精简目的。从代码上看，我们这次只用到ext的基本核心。 <script. src="adapter/ext/ext-base.js" type="text/javascript"></script> <script. src="ext-all.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

从ext目录下，可找到ext-all.js（642k）、adapter/ext/ext-base.js（33k）这是ext的基础库文件；resources/css/ext-all.css（135k）。整个ext的核心库文件大概是800k；而ArcGIS JSAPI也大概700k。也许你会说，天啊，光是这些框架就1M多了，那开始加载的时候岂不是需要好一段时间。笔者认为，如果要浏览一个地图网站，最基本的就是保证网速。1M多对于浏览一个地图网站来说，这一点流量不算什么，更何况浏览器是有缓存机制的，只要缓存没被清除掉，那这部分的js文件在以后访问就不会再下载了。从上述代码可以看到，关于地图部分，我们采用了ArcGIS Server的jSAPI进行功能编写，界面部分是使用extjs框架编写，整个程序的开发效率大大提高，代码量减少得让人惊叹。本节先介绍到这里，以后会陆续更新相关章节，对ArcGIS JSAPI和Ext进行深入的阐述。

原文链接：http://www.gisall.com/html/47/122747-3185.html

posted @ 2013-04-26 20:50 沉默的猿阅读(648) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

零壹微码

言必行，行必果！

【转】Ext配合ArcGIS JavaScript快速搭建地图系统

公告