给ArcIms穿件清凉的外衣

用ArcIMS的html View做过项目的人都有个相当痛苦的经历。整天在一顿javascript 和ArcXml上转啊转，里面的结构一是一般的乱，东西也不是一般的多。如果新手拿着esri公司的参考文档看半天能找出个东南西北，头脑算是比较清醒的。
 最主要的是那个慢啊。。。。。
 单位有个项目，要求用VML在地图上动态绘制点东西。每次看到连续定义50个以上变量的代码我就容易发疯。所以还没看完第一个方法，我就开始想歪主意。想坏主意一般是从最熟悉的方向下手。在这之前曾用VML/底图方式分别实现矢量地图/图片地图的放大，缩小，移动，测量，选择，鹰眼.(用底图的缩放是伪缩放，不过用多级平滑处理后勉强能蒙过去)。干脆给拖过来试试，顺便测试下原来设计的兼容性。
   webGis地图操作，最常用的也就是放大，缩小，移动，测量，选择。顶多就偶偶做做图层切换。原来的实现方式是依赖以一个xml配置文件，根据坐标动态切换图片。
   不过这个活ArcIMS已经给我们包装好了（这个简单的包装其实是相当的昂贵的，一个key就好几万哪），只要向服务器发送出用ArcXML包装好的请求，服务器就能生成图片。
   说说流程吧：
    1， 获取地图信息
    2， 根据信息解析空间坐标，图层信息等
    3， 加载一张默认地图
    4， 根据用户进行地图操作（放大，缩小，移动，测量，选择）
    5， 根据操作屏幕坐标，换算出新的地图位置（投影坐标/地理坐标）
    6， 发出ArcXML请求
    7， ArcIMS服务器返回图片信息（包括图片位置和坐标）
    8， 将位置信息重新计算。
   好家伙，认真看了一下，原来地图操作方法和接口基本上不用动。只要改下缩放和绘制方法就ok了。 
     

核心代码
  1Com.Esri.WebMap = function()
  2    {    
  3        //创建地图
  4        this.CreatMap = function(mapBox)
  5        {            
  6            this.InitMap();
  7            this.onCreatMap();            
  8            this.DrawMap();                
  9        }
 10        
 11        //初始化地图
 12        this.InitMap = function()
 13        {
 14            //创建连接
 15            this.axlSession = new Com.Esri.ArcXmlSession(this);
 16            var doc = this.axlSession.GetMapInfo();
 17        
 18                        
 19            //读取地图信息
 20            var mapinfo = this.MapData.selectSingleNode("PROPERTIES/ENVELOPE");
 21            
 22            //保存坐标系        
 23            
 24            //比例尺
 25                    
 26            //读入地图图层信息
 27            this.MapLayers = new Com.Esri.LayerList();        
 28            
 29            //默认加载全图
 30            this.LoadMap(this.mapMinx,this.mapMaxy,this.mapMaxx,this.mapMiny);
 31        }
 32        
 33        //绘制地图
 34        this.DrawMap = function(){            
 35            this.MapArea.style.backgroundImage = "url(" + this.mapUrl + ")";
 36            this.onDrawMap();
 37        }
 38        
 39        //加载地图
 40        this.LoadMap = function(x,y,x1,y1){
 41            this.axlSession.GetMapImage(this.MapWidth,this.MapHeight,x,y,x1,y1);
 42        }
 43        
 44        //加载地图数据
 45        this.LoadMapData = function(doc){
 46            this.SetMapInfo();
 47            this.DrawMap();
 48        }
 49        
 50        //设置地图信息，随地图操作变化
 51        this.SetMapInfo = function(x0,y0,x1,y1){
 52        }
 53        
 54        //鼠标/选择区域移动开始
 55        this.Map_MouseDown = function(){
 56        }
 57        
 58        //鼠标移动，地图/选择区域也跟着移动
 59        this.Map_MouseMove = function(){
 60        }                
 61        
 62        //鼠标被放开，地图/选择区域移动结束
 63        this.Map_MouseUp = function(){
 64        }
 65        
 66        this.Map_Click = function(){
 67        }
 68        
 69        this.onmousedown = function(){}
 70        this.onmousemove = function(){}
 71        this.onmouseup = function(){}
 72        this.onclick = function(){}
 73        this.onCreatMap = function(){}
 74        this.onDrawMap = function(){}
 75        
 76        //保存鼠标状态
 77        this.SaveMouseState = function(){
 78        }
 79        
 80        //移动地图 x横向值,y纵向值
 81        this.MoveMap = function(x,y){                                    
 82        }    
 83        
 84        //移动地图到 x横向值,y纵向值
 85        this.MoveMapTo = function(x,y){
 86        }    
 87        
 88        //以xy为中心移动地图 x横向值,y纵向值
 89        this.MoveMapToCenter = function(x,y){
 90        }    
 91        
 92        //缩放到指定比例
 93        this.ZoomTo = function(tox,j,w){                
 94            return true;        
 95        }
 96        
 97        //缩小
 98        this.ZoomOut = function(x,y,w,h){
 99        }    
100        
101        //放大
102        this.ZoomIn = function(x,y,w,h){            
103        }
104        
105        
106        //经度转化为屏幕坐标
107        this.Longitude2Map = function(x) {
108        }
109        
110        //纬度转化为屏幕坐标
111        this.Latitude2Map = function(x) {
112        }        
113        
114        //屏幕坐标转化为经度
115        this.Map2Longitude = function(x){   
116        }
117        
118        //屏幕坐标转化为纬度
119        this.Map2Latitude = function(x){
120        }
121        
122        //屏幕坐标转化为投影坐标
123        this.Map2WorldX = function(x){   
124        }
125
126        //屏幕坐标转化为投影坐标
127        this.Map2WorldY = function(y){
128
129        }
130        
131        
132        //获取当前信息
133        this.GetCurrMsg = function(){                
134            var s = "";
135            return s;
136        }
137        
138        
139        //显示当前信息
140        this.ShowCurrMsg = function(){
141            this.showMsg(this.GetCurrMsg());
142        }
143        
144        //显示信息接口
145        this.showMsg = function(s){
146            window.status = s;
147        }
148        
149        //获取地图显示区域宽度
150        this.GetViewWidth = function(){
151        }
152        
153        //获取地图显示区域高度
154        this.GetViewHeight = function(){
155        }
156        
157        return this;
158    }
159    
160    //arcXML接口
161    Com.Esri.ArcXmlSession  = function(webMap)
162    {
163        this.webMap = webMap;
164        this.MapImageService = "http://192.168.0.3/servlet/com.esri.esrimap.Esrimap?ServiceName=SZ_JG&ClientVersion=4.0&Form=True&Encode=False";
165        this.RequestType = "";
166        
167        //获取地图信息
168        this.GetMapInfo = function(){
169            this.RequestType = "GetMapInfo";                        
170            var vx = "<ARCXML version='1.1'><REQUEST><GET_SERVICE_INFO renderer='false' extensions='true' fields='true' /></REQUEST></ARCXML>";    
171            var doc = Sys.Net.HttpSession.GetDom(this.PostXml(vx));
172        
173            return doc;
174        }
175        
176        //获取地图图片        
177        this.GetMapImage = function(w,h,x,y,x1,y1){
178            this.RequestType = "GetMapImage";
179            var vx = "<ARCXML version='1.1'><REQUEST><GET_IMAGE><PROPERTIES><ENVELOPE minx='" + x + "' miny='" + y1 + "' maxx='" + x1 + "' maxy='" + y + "' /><IMAGESIZE height='" + h + "' width='" + w + "' /></PROPERTIES></GET_IMAGE></REQUEST></ARCXML>";
180            this.PostXml(vx);
181        }
182    
183        //post ArcXml请求
184        this.PostXml = function(x){    
185            Sys.Net.HttpSession.showMsg();
186            var str = "ArcXMLRequest=" +  escape(x) + "&JavaScriptFunction=parent.MapFrame.processXML&RedirectURL=&BgColor=#000000&FormCharset=UTF-8";
187            
188            if(this.RequestType == "GetMapInfo"){
189                var re = Sys.Net.HttpSession.Request(this.MapImageService,str);
190                return re.substring(re.indexOf("XMLResponse='") + 13,re.indexOf("';/r/nparent.MapFrame.processXML(XMLResponse);"));
191            }else{
192                Sys.Net.HttpSession.Request(this.MapImageService,str,this.CallBackInterface);
193            }
194        }
195        
196        //回调接口，注意这里无法用this访问
197        this.CallBackInterface = function(re){
198            re =  re.substring(re.indexOf("XMLResponse='") + 13,re.indexOf("';/r/nparent.MapFrame.processXML(XMLResponse);"));
199            var doc = Sys.Net.HttpSession.GetDom(re);
200            
201            switch(webMap.axlSession.RequestType){
202                case "GetMapImage":
203                    webMap.LoadMapData(doc);
204                    break;
205            }
206            
207            webMap.axlSession.RequestType = "";
208        }
209        
210        //判断是否有未完成的地图请求
211        this.HasRequest = function(){
212            if(this.RequestType != "")
213                alert("前面的操作未完成，请稍后！");
214            
215            return this.RequestType != "";
216        }    
217    }    

   搞了半天，终于能跑了，不过给偶们部门经理几句话就给毙了：“设计思路清晰，但没有像HTML viewer模版一样经过测试，公司无法预测风险”。既然公司用不上，那就给别人用吧，说不定还可用当作个ArcIMS入门级的练习程序,再不济，当个ArcIMS服务的测试程序也比HTML Viewer强。
   代码下载： /Files/sukyboor/ArcIMSDemo.rar。配置好arcIMS服务后，改下MapImageService地址就可用。（注意这里假设默认坐标系为投影坐标，通过定义一个经纬度区域与之对应，所以算出来的经纬度不一定正确。但如果直接用经纬度作为默认坐标系，则无此问题）
   有兴趣的人可任意在此基础上进行开发，并希望有好的应用能发一份给我看看。