蜈蚣

百足之虫,死而不僵
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

另类地图分块算法(懒人专用)

Posted on 2007-05-30 11:51  蜈蚣  阅读(2559)  评论(1编辑  收藏  举报
 上次做个项目,有个客户说ArcIMS为什么不把数据缓存一下,相同的请求如果地图没变,直接在缓存里读出来就行了。每次都跑呀跑的。。。。
 我很无奈的回答他:人每次操作时候位置很难相同的,如果这样做的话,服务器就需要无穷的资源。
 后来想想,其实不对。虽然操作是随意的,但我们可用在这个基础上作规则化,只要不影响用户体验就可用了。
        最简单的方法是地图切片,把地图分割成若干片,在客户端根据坐标重新组装。很多大型地图网站就是这么用的。
 不过这种作法明显不符合我等懒人,我们的要求是又快又方便。
        懒人自有懒人的算法:
 1,约定一个缩放步长(限制每次缩放比例)
        2,在约定一个地图块大小(抽象,真实是不存在的)
        3,计算出该比例下地图的逻辑块数量.
        4,根据逻辑块,将位置对应上去.
        如图,假设黑色的线框代表逻辑块,褐色代表用户操作,我们可用根据规则将范围对应到逻辑块上。
      
     理论上块切的越小,对用户操作起来影响越小,所需的缓存空间则越大.
       代码:
 1//加载地图
 2        this.LoadMap = function(x,y,x1,y1){
 3                    
 4                var zx = (this.mapMaxx - this.mapMinx) / (x1 - x);              //操作缩放比例(为了简单,这里只用x轴)
 5                var i = 1;                                //缩放比例
 6                var fac = this.ZoomSetp / 10;                        //容差(如果在缩放比例在原来缩方步长1/10内算误差)
 7                
 8                //根据步长算出一个合适的缩放比例,如果在容差范围内将被忽略掉
 9                if(zx >= (1 + fac)){
10                    while(zx > i){
11                        i = i * this.ZoomSetp;
12                    }

13                }
else if(zx < (1 - fac)){
14                    while(zx < i){
15                        i = i / this.ZoomSetp;
16                    }

17                }
 
18                                
19                var cx = Math.floor(this.MapWidth / 100* i;    //地图在x轴被分成的逻辑块数(假设块宽度为100px)
20                var kl = (this.mapMaxx - this.mapMinx) / cx;    //每块的宽度
21                var nx = x - (x % kl);                //重新得出地图位置
22                var nx1 = x1 - (x % kl); 
23                
24                var cy = Math.floor(this.MapHeight / 100* i;    //地图在y轴被分成的逻辑块数(假设块高度为100px)
25                var kl = (this.mapMaxy - this.mapMiny) / cy;    //每块的高度
26                var ny = y + (kl - (y % kl));            //重新得出地图位置
27                var ny1 = y1 + (kl - (y % kl)); 
28                
29                //alert(zx+","+i+","+cx+","+x+","+x1+","+nx+","+nx1)
30                this.nk =  Math.floor(nx  + nx1 +  ny  + ny1);        //位置key(用这个做key其实不好)
31                
32                var cacheData = this.Cache.Get(this.nk);    //判断是否有过相同的请求,如果有从缓存取,没有则请求服务器生成
33                //alert(this.nk + "," + cacheData);
34                if( cacheData != null){
35                    this.LoadMapData(cacheData);
36                }
else{
37                    this.axlSession.GetMapImage(this.MapWidth,this.MapHeight,nx,ny,nx1,ny1);
38                }

39        }

40
41        
42        //加载地图数据
43        this.LoadMapData = function(doc){
44            if(!this.Cache.HasKey(this.nk)){    //加入缓存
45                //alert(this.nk + "," + doc);
46                this.Cache.Add(this.nk,doc);
47            }
        
48        
49            var mapImageData = doc;
50            this.SetMapInfo(mapinfo);
51            this.DrawMap();
52        }

53
54        //缓存数据
55        this.Cache = new Array();
56        this.Cache.Add = function(key,data){
57            me.Cache[me.Cache.length] = key;
58            me.Cache[me.Cache.length] = data;
59        }

60            
61        this.Cache.Get = function(key){
62            for(var i = 0;i < me.Cache.length;i = i + 2){
63                if(me.Cache[i] == key)
64                    return me.Cache[i + 1];
65            }

66                
67            return null;
68        }

69        
70        this.Cache.HasKey = function(key){
71            for(var i = 0;i < me.Cache.length;i = i + 2){
72                if(me.Cache[i] == key)return true;
73            }

74                            
75            return false;
76        }

ps:这里的缓存是在客户端做的,如果能让arcIMS服务端处理,那就完美了