我很无奈的回答他:人每次操作时候位置很难相同的,如果这样做的话,服务器就需要无穷的资源。
后来想想,其实不对。虽然操作是随意的,但我们可用在这个基础上作规则化,只要不影响用户体验就可用了。
最简单的方法是地图切片,把地图分割成若干片,在客户端根据坐标重新组装。很多大型地图网站就是这么用的。
不过这种作法明显不符合我等懒人,我们的要求是又快又方便。
懒人自有懒人的算法:
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 }
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服务端处理,那就完美了