小鱼尼莫


专注于前端(JavaScript、jQuery、html+css)

博主做程序同时,还经营了一家手工发饰淘宝店,纯手工精致发饰发夹, 程序猿送女友必备神器!需要的可以支持一下哦!

 

转载地址:http://psy-yd.iteye.com/blog/807486

ps:文章将地图实现的原理分析的很到位,推荐学习!

一、创建一个地图 
  瓦片:地图组成部分,一个地图信息有多个瓦片拼接而成。 
  Level :地图显示级别 

二、原理

  根据地图基本信息来动态加载 img 集合,并把所有图片拼接成一个完整的地图信息。 
  定义个地图可视化窗口,设置窗口的大小。 
  根据地图的级别、地图类型来加载对应的瓦片信息(即由一张完成的图片切割而成的小图片的集合),根据可视窗口的大小和定义的中心点来计算需要显示哪些瓦片信息,对于超出可视区域的瓦片,不显示。得到瓦片信息集合后,把瓦片信息按规则来拼接在一起,显示成一张完成的图片信息。 
  

------------------------------------------------

  博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!
店名:
  小鱼尼莫手工饰品店
经营:
  发饰、头花、发夹、耳环等(手工制作)
网店:
  http://shop117066935.taobao.com/

  ---------------------------------------------------------------------

继续正题... 

  


三、地图移动 
  在地图移动过程中,记录地图中心点的位置改变。 
  移动结束后,根据中心点位置改变的大小来重新计算加载的瓦片信息;并调用地图重绘方法来重新生成显示的地图信息。 

四、地图缩放 
  根据地图的缩放级别来重新计算加载的瓦片信息。并调用地图重绘方法来重新显示地图信息。 
  原理:假设当前显示的地图 level=2 由 
         a b 
         c d 
  四张图片按这样的排列方式拼接而成。点击放大后 level = 3 ,原理显示图片 a 的区域改变为: 
         a1 a2 
         a3 a4 
  四张图片。其他三个区域改变方式相同。(这里的 a1 ~ a4 是由 level=3 的地图图片切割而来的),这样就实现了地图放大的效果。 
  
五、地图 js 功能说明 
Map 功能 js 结构如下: 
  ..... 
  ...... 

功能说明: 
  1. Action 文件为控制层对象 这里实现对地图中基本操作的控制,如:地图的移动,缩放,地图类型的转换等。 
  2. Model 文件为模型定义对象,这里定义了地图中所有使用模型的定义,如:坐标定义,点定义,矩形区域定义,地图对象定义,标注定义,工具定义等。同时实现了对这些模型的基本操作方法。 
  3. Widget 文件界面生成对象,扩展工具定义,地图基本方法定义和基本地图工具定义。 
  4. Mapbuilder.js 地图创建初始化 
  5. MapEvent.js 地图事件定义 
  6. BaseAction.js 控制层对象 
  7. BaseModel.js 模型对象 
  8. BaseWidget.js 界面生成对象 
  9. Command.js 事件控制对象 
  10. Listener.js 抽象监听对象 
  11. ListenerSupport.js 监听对象 
  12. Prototype.js   js 库 
  13. Util.js 常用操作方法定义

 
Js 功能说明: 
  Mapbuilder.js 地图构建器:地图构建器对象,对创建地图进行初始化加载。 
  Include 方法:动态加载 js 文件,如果有新添加的 js 文件统一在此处加载。 
  MapBuilder 方法:地图构建对象,通过创建一个 MapBuilder 对象来生成一个地图 。其中有以下方法: 
  outputMap : 输出地图信息。 
  addTool : 增加扩展工具信息。 
  GetMap : 取得地图对象。 
  
MapEvent.js 地图事件定义:地图自定义事件,可以加入实现特定功能的事件和方法。有以下定义方法: 
  MapEvent. getEventCoord :取得事件触发的坐标。添加标注时通过该方法取得标注在地图上的具体坐标。 
  MapEvent. addListener : 为对象添加监听事件。 

Eg :为地图添加右键单击事件,定义事件常量 
  MapEvent.ONCONTEXTMENU = "event.oncontextmenu" ; 
  为地图对象添加监听事件 
  MapEvent.addListener(map, MapEvent.ONCONTEXTMENU , function (e) { 
      var coord = MapEvent.getEventCoord(e, map); 
      … 
  } ); 

  添加用户自定义事件( MapPaneWidget.js 中 customEvent 方法 ) 
  if (eventName == MapEvent.ONCONTEXTMENU) { 
         mapDiv.oncontextmenu = this .model.events[MapEvent.ONCONTEXTMENU]; 
  }

GeoObject.js 地理信息定义:坐标定义,点定义和矩形区域定义。并实现了相应的操作方法。 
MapModel.js 地图对象定义 
MapModel :地图模型定义,定义地图的缩放比例,中心区域坐标,地图事件等。 
方法: 
addOverlay : 添加地图标注信息,参数为地图标注对象( marker )。在地图上添加一个标注可以直接用以下方法实现: 
MapModel.addOverlay(new Marker(coord.getPoint(), Marker.LARGE)); 
           removeOverlay : 移除单个标注信息(移除指定的标注,参数为标注对象)。 
           clearOverlays : 清除地图所有标注信息。 
MapType :地图类型定义,我们自定义的地图类型继承该方法,并重写 getSrc 方法来获得正确的图片路径。如果要添加一个新的地图类型,可以用以下方法实现: 
           function MapMapType() { 
          // 继承 maptype 
          MapType.apply( this ); 
          // 重写 getSrc 方法 
          this .getSrc = function (level, row, column) { 
         var url = "mapdemo\\images\\zoom" +level+ "\\" +level+ "_" +column+ "_" +row+ ".jpg" ; 
                  return url; 
          } 
            } 
  MapModel.mapTypes = new Array(); 
  MapModel.mapTypes.push( new MapMapType()); 
这里 new MapMapType() 为我们自定义的地图类型。 

Zoom : 比例模型定义,定义了地图当前等级,当前所有瓦片集合和边缘瓦片数。 
Tile :瓦片定义,定义列,行和地图缩放级别 
Overlay.js 地图覆盖物定义 
Overlay :地图覆盖物抽象类 ,定义覆盖物区域范围,坐标,显示图形,阴影图形。 
Icon : 覆盖物显示图标 
Marker : 标记定义(继承 overlay )。定义了标记的基本信息,我们可以在起初添加新的属性,并实现他的 get 和 set 方法。 
Marker.LARGE :定义标记显示图片和阴影图片。 
ExttoolsWidget.js 扩展工具类 
SliderWidget :滑块工具 参数: model ( MapModel 对象)。 
    定义滑块工具和点击放大 / 缩小时触发事件 
sliderMDown :滑块拖动 
    实现在地图上按住鼠标左键可以拖动地图。 
MarkerWidget : 标记定义 
    实现对标记信息的添加,对标记信息窗口的显示和隐藏。 
    有以下方法: 
addMarker :在地图上添加一个标记图片和阴影图片,并给该标记添加触发事 件。我们可以对此方法进行改写。 
    showInfoWindow : 显示标记信息显示窗口。可以对此方法进行改写 
    hideInfoWindown :隐藏标记信息显示窗口。 
MapTypeWidget :地图类型定义。可以定义多个不同类型的地图信息。 
  
MapPaneWidget.js 地图面板控制,注册了地图的移动,缩放,类型改变和自定义方法事件。定义了地图的输出方法。 
Paint :地图界面绘制方法。 
设置地图容器的 style 属性,屏蔽右键和全选功能,添加地图移动工具栏,地图类型切换栏和地图 div 。 
propertyChange :监听地图触发事件。 
实现了对地图缩放( zoom ),移动( move ),用户自定义事件( event.addlistener )和地图类型变换( maptype )事件的控制。根据不同的事件名来进行对应的处理操作。 
customEvent :用户自定义事件。 
可以在此处添加用户自定义的事件。 
changeMaptype :地图类型改变方法。 
方法先移除就的瓦片集合,然后根据新的地图类型来重绘显示的地图。 paintMap ()地图重绘方法。 
paintMap :地图重绘方法。 
根据新的地图 level ,和中心点位置。来取得所有要显示的瓦片集合(即分割的小图片),对新取得的集合循环输出,在显示的同时判断该瓦片是否在旧的瓦片集合中存在,如果存在则不重新加载。 
mapMDown :地图拖动方法。 
记录地图中心点的位移,拖动完成后重新输出地图。 
ToolsWidget.js   基本地图工具,实现地图的上,下,左,右移动和居中显示。 
MapBuilder.js 地图构建对象。 
加载地图 js 脚本库。实现地图构建器,和地图的输出。 
Include :动态载入地图 js 脚本库文件,如果有新添加的 js 文件统一在此处加载。 
MapBuilder :地图构建器,参数: container 为地图容器。 
    定义地图的基本信息,并为地图添加相应的操作监听事件。 
outputMap :地图输出。根据出入的中心点和地图显示 level 调用地图的 print 方法来输出地图信息。 
addTool :添加地图扩展工具,如滑块工具和地图类型变换工具。 
getMap :取得地图对象。 
MapEvent.js 自定义事件控制 
getEventCoord :取得事件触发的坐标点位置。 
addListener :添加用户自定义事件监听。 
MapEvent.CLICK :添加用户自定义事件。 
    其他类功能说明,请参考对应的 api 文档。 
    
地图使用 
1.创建一个 jsp 或 html 页面,在页面添加地图显示 div 
< div align = "center" > 
    < div id = "newmap" style = "width:800px;height:400px; background :#F2F6FF" " ></ div > 
 </ div > 

2.导入初始化的 js 文件,样式文件   
<!-- 加载样式 --> 
    < link rel = "stylesheet" href = "webep/css/style.css" type = "text/css" >     
    <!-- 加载地图生成 js 文件 --> 
    < script language = "JavaScript" src = "mapdemo/js/Util.js" ></ script > 
  < script language = "JavaScript" src = "mapdemo/js/map/MapBuilder.js" ></ script > 
  
3.自定义地图类型,重写 getsrc 方法,并把新的地图类型添加到 MaoModel 的 mapTypes 中 
  // 定义自己的 map 类型 
  function MapMapType() { 
          // 继承 maptype 
          MapType.apply( this ); 
          // 重写 getSrc 方法 
          this .getSrc = function (level, row, column) { 
         var url = "mapdemo\\images\\zoom" +level+ "\\" +level+ "_" +column+ "_" +row+ ".jpg" ; 
                  return url; 
          } 
    } 
4.设置 MapModel 基本常量值 
    // 设置地图显示基本信息 
    /** 地图坐标系范围 */ 
    MapModel.bound = new Bound(-180e16, 180e16, -90e16, 90e16); 
    /** 第一个缩放等级的瓦片数 */ 
    MapModel.firstZoomTileNum = 1; 
    /** 每层缩放之间的比例参数 */ 
    MapModel.scalePara = 2; 
    /** 瓦片尺寸 */ 
    MapModel.tileSize = 256; 
    /** 最大缩放比例 */ 
  MapModel.maxZoomLevel = 4; 

5.定义地图初始化对象,调用 outoutMap 方法输出地图,添加地图缩放移动工具 
  // 初始化 mapbuilder 对象 
     var mymapbuilder = new MapBuilder($( "newmap" )); 
     // 输出地图信息 
  mymapbuilder.outputMap( new Point(10, -20), 3); 
  // 滑块工具 
  mymapbuilder.addTool(MapBuilder.TOOL_SLIDERBAR); 
  
6.地图类型切换工具   
  // 定义的第二个地图类型 
    function MyType1() { 
    // 继承 maptype 
    MapType.apply( this ); 
    
    // 添加地图切换图片 
    this .enablePic = imgBaseDir + "maptype_1b.gif" ; 
        this .disablePic = imgBaseDir + "maptype_1a.gif" ; 
        
    // 重写 getSrc 方法 
    this .getSrc = function (level, row, column) { 
            var url = "mapdemo\\images\\zoom" +level+ "\\" +level+ "_" +row+ "_" +column+ ".jpg" ; 
           return url; 
        } 
    }   
  // 添加第二个地图类型 
  MapModel.mapTypes.push( new MyType1());   
  // 地图类型工具 
  mymapbuilder.addTool(MapBuilder.TOOL_MAPTYPE); 

7.添加 / 删除标记 
添加标记: 
  // 添加一个标记 
  var newmark = new Marker( new Point(20,-20),Marker.LARGE); 
  newmark.setInfo( " 您添加了一个新的标记 " ); 
  map.addOverlay(newmark); 
删除标记: 
  Map.removeOverlay(mark); // 删除指定标记信息 

8.添加自定义方法 
在 ExtToolsWidget.js 中 addMarker 方法中,可以为标注添加自定义的事件

 

店名:
  小鱼尼莫手工饰品店
经营:
  发饰、头花、发夹、耳环等(手工制作)
网店:
  http://shop117066935.taobao.com/

posted on 2013-03-10 22:37  qiongmiaoer  阅读(7912)  评论(0编辑  收藏  举报