`
wgcode
  • 浏览: 602589 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

地图分块加载的实现

阅读更多

首先我们确定几个关键点:

窗口大小:windowW:Number,windowH:Number; 指的是可视区域的大小 我们可以把他想成客户端的分别率

单位地图大小: uintPicW:Number,uintPicH:Number; 指的是你切割的地图图片的单元大小。

当前地图坐标:position:point;这里大家就可以想成是你人物的当前所处坐标

 

清楚了上面的几个关键点,我们再来看下面的这个图:

图片

 

 

阴影区域就是可视区域 A、B、C、D就是切割的单元地图

 

我们可以很容易的求出窗口的4个点,所占的地图的索引:

x0 = position.x - windowW/2;

x1 = position.x + windowW/2;

y0 = position.y - windowH/2;

y1 = position.y + windowH/2;

 

mapIndexX0 = uint(x0/256);

mapIndexX1 = uint(x1/256);

mapIndexY0 = uint(y0/256);

mapIndexY1 = uint(y1/256);

 

明白了上面的这些 下面这个类 相信大家都能看明白

package com.heptaFish.common.game.map.layers

{

import com.heptaFish.common.config.Config;

import com.heptaFish.common.core.BaseDisplayObject;

import com.heptaFish.common.game.map.impl.GameMap;

import com.heptaFish.common.hack.HeptaFishGC;

import com.heptaFish.common.loader.impl.ImageLoader;

import com.heptaFish.common.map.impl.HashMap;



import flash.display.Bitmap;

import flash.events.Event;

import flash.events.IOErrorEvent;

import flash.events.ProgressEvent;

import flash.geom.Point;

//地图层 图片

public class MapLayer extends BaseDisplayObject

{

  //图片读取器

  private var _imageLoader:ImageLoader;

  //地图图片 用于整块加载模式

  private var _image:Bitmap;

  //地图图片数组 用于栅格式加载地图模式

  private var _imageMap:HashMap;

  //小地图图片

  private var _simage:Bitmap;

  //

  private var _map:GameMap;

  private var _loadType:int;//加载类型 0:整块加载 1:栅格加载

  private var _visualWidth:Number;//地图可视宽度

  private var _visualHeight:Number;//地图可视高度

  private var _sliceWidth:Number;//地图切割单元宽度

  private var _sliceHeight:Number;//地图切割单元高度

  private var _preloadX:Number;//横向预加载屏数

  private var _preloadY:Number;//纵向预加载屏数

  private var _loadingMap:HashMap;//正在加载的屏map

  private var _waitLoadingArr:Array;//等待加载的loadermap

  

  private var _loadingNo:int = Config.getInt("concurrencyImageLoader");

  

  private var _screenImageRow:int;//一屏需要加载的横向图片数

  private var _screenImageCol:int;//一屏需要加载的纵向图片数

  private var _row:int;//总横向节点数

  private var _col:int;//总纵向节点数

  

  private var _nowPlayerPointoint;//当前人物所处的屏

  

  public function MapLayer(map:GameMap)

  {

   _map = map; 

   _loadType = parseInt(_map.mapXML.@loadType);

  }

  //读取地图图片

  public function load():void{

   //加载小地图

   var imageLoader:ImageLoader = new ImageLoader();

   var fileName:String =Config.getValue("mapLib") + _map.name + "/map_s.jpg";

   imageLoader.load(fileName);

   imageLoader.addEventListener(Event.COMPLETE,loadSmallSuccess);

   imageLoader.addEventListener(ProgressEvent.PROGRESS,loadingHandler);

   imageLoader.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);

   

  }

  //读取大地图成功

  private function loadBigSuccess(evet:Event):void{

   var imageLoader:ImageLoader = ImageLoader(evet.target);

   var image:Bitmap = new Bitmap(imageLoader._data);

   addChild(image);

   if(_simage != null && _simage.parent == this){

    removeChild(_simage);

    _simage = null;

   }

   this.width = image.width;

   this.height = image.height;

   imageLoader.removeEventListener(Event.COMPLETE,loadBigSuccess);

   imageLoader.removeEventListener(ProgressEvent.PROGRESS,loadingHandler);

   imageLoader.removeEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);

   imageLoader = null;

   dispatchEvent(evet);

   HeptaFishGC.gc();

  }

  //读取小地图成功

  private function loadSmallSuccess(evet:Event):void{

   var imageLoader:ImageLoader = ImageLoader(evet.target);

   var image:Bitmap = new Bitmap(imageLoader._data);

   image.width = _map.mapWidth;

   image.height = _map.mapHeight;

   addChild(image);

   this.width = image.width;

   this.height = image.height;

   imageLoader.removeEventListener(Event.COMPLETE,loadSmallSuccess);

   imageLoader.removeEventListener(ProgressEvent.PROGRESS,loadingHandler);

   imageLoader.removeEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);

   imageLoader = null;

   dispatchEvent(evet);

   HeptaFishGC.gc();   

   switch(_loadType){

    case 0://整块加载    

     //加载大地图

     var bfileName:String =Config.getValue("mapLib") + _map.name + "/map.jpg";

     var bLoader:ImageLoader = new ImageLoader(); 

     bLoader.load(bfileName);

     bLoader.addEventListener(Event.COMPLETE,loadBigSuccess);

     bLoader.addEventListener(ProgressEvent.PROGRESS,loadingHandler);

     bLoader.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);

     break;

    case 1:

     _loadingMap = new HashMap();

     _imageMap = new HashMap();

     _waitLoadingArr = new Array();

     _visualWidth = _map.app.screen.size.x;

     _visualHeight = _map.app.screen.size.y;

     _sliceWidth = parseFloat(_map.mapXML.@sliceWidth);

     _sliceHeight = parseFloat(_map.mapXML.@sliceHeight);

     _preloadX = parseFloat(_map.mapXML.@preloadX);

     _preloadY = parseFloat(_map.mapXML.@preloadY);

     _screenImageRow = Math.round(_visualWidth/_sliceWidth);

     _screenImageCol = Math.round(_visualHeight/_sliceHeight);

     _row = Math.ceil(_map.mapWidth/_sliceWidth);

     _col = Math.ceil(_map.mapHeight/_sliceHeight);

     loadSliceImage(_map.initPlayerPoint);

     break;

    default:

     break;

     

   }

  }

  

  //根据player坐标读取周边指定屏数地图

  private function loadSliceImage(playerPointoint):void{

   var nowX:int = Math.floor(playerPoint.x/_sliceWidth);//现在所处的索引X

   var nowY:int = Math.floor(playerPoint.y/_sliceHeight);//现在所处的索引Y

   var nowScreenX:int = Math.floor(nowX/_screenImageRow);//现在所处的屏索引X

   var nowScreenY:int = Math.floor(nowY/_screenImageCol);//现在所处的屏索引Y

//   trace("nowScreenX:" + nowScreenX);

//   trace("nowScreenY:" + nowScreenY);

   _nowPlayerPoint = new Point(nowScreenX,nowScreenY);

   loadScreenImage(nowScreenX,nowScreenY);

//   removeScreenImage(nowScreenX,nowScreenY);

   var startX:int = (nowScreenX - _preloadX < 0 ? 0 : nowScreenX - _preloadX);

   var startY:int = (nowScreenY - _preloadY < 0 ? 0 : nowScreenY - _preloadY);

   

   var endX:int = (nowScreenX + _preloadX > _row ? _row : nowScreenX + _preloadX);

   var endY:int = (nowScreenY + _preloadY > _col ? _col : nowScreenY + _preloadY);

   

   for(var xx:int = startX; xx < endX;xx++){

    for(var yy:int = startY; yy < endY;yy++){

     if(xx == nowScreenX && yy == nowScreenY){

      continue;

     }else{

      loadScreenImage(xx,yy);

     }

    }

   }

  }

  //加载指定屏的地图图片

  private function loadScreenImage(screenX:int,screenY:int):void{

   var starX:int = _screenImageRow*screenX < 0 ? 0 : _screenImageRow*screenX;

   var starY:int = _screenImageCol*screenY < 0 ? 0 : _screenImageCol*screenY;

   var endX:int = _screenImageRow*(screenX+1) > _row - 1 ? _row -1 : _screenImageRow*(screenX+1);

   var endY:int = _screenImageCol*(screenY+1) > _col-1  ? _col-1 : _screenImageCol*(screenY+1);

   for(var yy:int=starY;yy<endY+1;yy++){

    for(var xx:int = starX;xx<endX+1;xx++){

     var tempKey:String = yy+"_"+xx;

     if(!_loadingMap.containsValue(tempKey) && !_imageMap.containsKey(tempKey)){

      _waitLoadingArr.push(tempKey);

     }

    }

    _waitLoadingArr.reverse();

    loadImage();

   }

  }

  

  private function loadImage():void{

   if(_waitLoadingArr.length > 0){

    for(var i:int = 0;i<_loadingNo - _loadingMap.size();i++){

     var key:String = _waitLoadingArr.pop();

     var imageLoader:ImageLoader = new ImageLoader();

     var fileName:String = Config.getValue("mapLib") + _map.name +"/" + key  + ".jpg";

//     trace("fileName:" + fileName);

     _loadingMap.put(imageLoader,key);

     imageLoader.addEventListener(Event.COMPLETE,loadScreenImageSuccess);

     imageLoader.addEventListener(ProgressEvent.PROGRESS,loadingHandler);

     imageLoader.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);

     imageLoader.load(fileName);

    }

   }

  }

  

  //成功加载某屏的图片

  private function loadScreenImageSuccess(evet:Event):void{

   var imageLoader:ImageLoader = ImageLoader(evet.target);

   var tempStr:String = String(_loadingMap.getValue(imageLoader));

   var tempStrArr:Array = tempStr.split("_");

   var yy:int = tempStrArr[0];

   var xx:int = tempStrArr[1];

   _loadingMap.remove(imageLoader);

   var image:Bitmap = new Bitmap(imageLoader._data);

   image.x = _sliceWidth*xx;

   image.y = _sliceHeight*yy;

   this.addChild(image);

   _imageMap.put(yy+"_"+xx,image);

   imageLoader.removeEventListener(Event.COMPLETE,loadScreenImageSuccess);

   imageLoader.removeEventListener(ProgressEvent.PROGRESS,loadingHandler);

   imageLoader.removeEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);

   imageLoader = null;

   loadImage();

  }

  //卸载指定屏的地图图片

  private function removeScreenImage(screenX:int,screenY:int):void{

   var startX:int = (screenX - _preloadX < 0 ? 0 : screenX - _preloadX);

   var startY:int = (screenY - _preloadY < 0 ? 0 : screenY - _preloadY);

   

   var endX:int = (screenX + _preloadX > _row ? _row : screenX + _preloadX);

   var endY:int = (screenY + _preloadY > _col ? _col : screenY + _preloadY);

   var keyArr:Array = _imageMap.keys();

   for(var i:int = 0;i < keyArr.length;i++){

    var key:String = keyArr;

    var tempStrArr:Array = key.split("_");

    var yy:int = tempStrArr[0];

    var xx:int = tempStrArr[1];

    if(xx < startX*_screenImageRow || xx > endX * _screenImageRow || yy < startY*_screenImageCol || 



yy > endY*_screenImageCol){

     var image:Bitmap = Bitmap(_imageMap.getValue(key));

     this.removeChild(image);

     image = null;

     _imageMap.remove(key);

    }

   }

   HeptaFishGC.gc();

  }

  

  //检查是否需要加载

  public function checkLoad(pointoint):void{

   var nowX:int = Math.floor(point.x/_sliceWidth);//现在所处的索引X

   var nowY:int = Math.floor(point.y/_sliceHeight);//现在所处的索引Y

   var nowScreenX:int = Math.floor(nowX/_screenImageRow);//现在所处的屏索引X

   var nowScreenY:int = Math.floor(nowY/_screenImageCol);//现在所处的屏索引Y

   if(nowScreenX != _nowPlayerPoint.x || nowScreenY != _nowPlayerPoint.y){

    loadSliceImage(point);

   }

   

  }

}

}
 

分享到:
评论

相关推荐

    as3 简单人物行走 地图分块加载

    在本文中,我们将深入探讨AS3(ActionScript 3)中的简单人物行走和地图分块加载技术。ActionScript 3是Adobe Flash开发中广泛使用的编程语言,尤其在创建交互式内容、游戏和动画方面有着重要应用。对于一个游戏或者...

    学习threejs,局部纹理刷新,实现图片分块加载,贴图

    本篇文章将深入探讨如何在使用Three.js时,实现局部纹理的刷新和图片的分块加载与贴图技术。 首先,理解Three.js中的纹理映射(Texture Mapping)是实现贴图的基础。纹理映射是将一张图片应用到一个几何体的表面的...

    QT加载地图百度地图离线加载

    例如,可以使用分块加载策略,只加载可视区域的地图数据,以减少内存消耗和提高加载速度。 8. **布局与设计**:在QT中,我们可以使用`QLayout`来管理UI元素的位置和大小,确保地图在不同屏幕尺寸下都能正确显示。 ...

    地图实现批量加载数据及图层展示

    1. 数据分块:为了处理大规模数据,通常采用分块加载策略。将大文件分割成多个小块(如按经纬度网格划分),逐个加载到地图中,避免一次性加载导致的性能问题。 2. 异步加载:利用Ajax或Fetch API进行异步加载,保证...

    ArcGIS API for JavaScript加载百度地图代码

    9. **性能优化**: 当处理大量数据或复杂交互时,可能需要考虑性能优化,如使用懒加载、分块加载技术,或者利用ArcGIS API的缓存机制。 10. **响应式设计**: 为了让地图在不同设备和屏幕尺寸上都能良好展示,需要...

    Qt加载百度离线地图

    3. 性能优化:大量地图图片可能会对加载速度造成影响,因此可能需要优化图片加载策略,比如延迟加载、分块加载等。 4. 兼容性测试:由于使用的是Qt 4.8.6,可能需要考虑旧版本Qt的兼容性问题,以及在不同操作系统和...

    ArcGIS API 4.10之加载百度地图

    此外,还可以通过分块加载和异步处理来优化用户体验。 7. **代码示例**: 创建一个完整的示例项目,展示如何初始化SceneView,创建自定义BaseTileLayer,并将其添加到场景中。同时,展示如何处理用户交互和性能...

    基于OpenLayers的一种高效地图服务加载方式实现的研究.pdf

    【切片服务与动态服务】切片服务,又称地图缓存服务,通过预生成的影像金字塔,按比例尺分块存储地图图片,提供快速加载但更新不频繁的地图展示。动态服务则根据客户端请求实时生成图片,适合展示变化频繁的数据,但...

    地图加载大量点_leaflet大数据点_DEMO_源码

    1. **分块加载(Clustering)**:Leaflet提供了插件如`Leaflet.markercluster`,它可以将相近的点合并成一个聚类标记,当用户缩放地图时,聚类会自动拆分成更小的群组。这种方法极大地减少了屏幕上的DOM元素数量,...

    ArcEngine加载地图服务Demo

    8. **性能优化**: 加载地图服务时,可以通过缓存、分块加载、懒加载等技术提高性能,尤其对于大数据量或复杂的地图服务。 在"ArcEngine加载地图服务Demo"的源代码中,我们可以看到这些步骤的具体实现,包括必要的...

    mapcontrol加载地图

    为了提高用户体验,开发者需要考虑地图服务的优化,如分块加载(Tile-based loading)以减少初次加载时间,使用缓存机制来加速重复请求,以及根据网络条件动态调整地图质量。 8. **自定义图层和标记**: ...

    地图加载保存

    8. **性能优化**:考虑到地图可能包含大量数据,可以采用分块加载、缓存策略等方法提高加载速度和用户体验。 9. **安全考虑**:如果涉及用户数据,需注意隐私保护,遵循相关的数据处理法规。 总结来说,“地图加载...

    Google地图上市级别分块显示(福建省)

    通过以上分析,我们可以看到"Google地图上市级别分块显示(福建省)"涉及到地图分块技术、API调用、数据处理等多个IT领域的知识,实现这样的功能需要对Web开发、地理信息系统(GIS)以及用户体验设计有深入理解。

    网络游戏-C3游戏地图动态加载的方法.zip

    1. **分块加载**:地图被划分为多个小块,每个块代表一个可独立加载和卸载的区域。当玩家接近新的地图块时,该块被加载;远离时,该块被卸载。这种方法常用于2D游戏,例如基于网格的系统。 2. **LOD(Level of ...

    百度地图3W点位快速加载+跳转热度最大的点位+点位信息

    这种技术通常基于分块加载策略,即地图被分割成多个小块,只有当用户视野内的区块需要时才加载相关的点位数据,大大减少了初始加载时间和内存消耗。 其次,热力图是一种直观展示数据分布密集程度的工具,常用于分析...

    openlayers加载静态图片地图

    在压缩包文件 "olDemo" 中,可能包含了实现上述功能的示例代码,你可以通过查看和运行这些代码来更好地理解OpenLayers加载静态图片地图的过程。通过实践和调试,你将能够掌握这个强大的工具,并为你的项目创建出高效...

    百度地图离线API 1.3双击map.xml,可以加载里面的离线地图

    这个过程可能涉及到地图的层级管理、分块加载策略以及数据解压等技术。 使用百度地图离线API需要一定的编程基础,开发者需要了解如何集成API到自己的应用中。通常,这包括注册开发者账号、获取API密钥、引用相关库...

    Antv L7 + mapbox 实现简单地图场景

    6. **优化性能**:对于大规模数据,可以采用分块加载、数据聚合等策略,提高地图的渲染效率。 7. **部署与发布**:最后,将完成的项目部署到服务器,通过浏览器访问,即可呈现一个生动的地图场景。 通过这个项目,...

    Vue2中CesiumV1.113.0加载离线地图

    为了提高用户体验,可能还需要实现地图的切片管理和分块加载,这通常涉及对地图数据格式的理解,如瓦片金字塔结构(如TMS或XYZ)。Cesium提供了多种 ImageryProvider 实现,如`TileMapServiceImageryProvider`或`...

    行业分类-设备装置-一种基于GIS平台的地图数据加载方法及装置.zip

    分块加载是将大范围地图数据分割成若干小块,逐块加载到内存,减少一次性加载的资源需求。多线程处理则是通过并发执行加载任务,提高数据处理效率。 装置方面,GIS设备可能包括高性能计算服务器、专业图形工作站,...

Global site tag (gtag.js) - Google Analytics