随笔档案

     作者：施伟，原文出处： http://www.blogjava.net/crespo9907/archive/2007/03/02/mapeasy_answer3_level_row_column.html，转载请保留。
      
       cyg_gis在我的博里留言，问到如下三个问题：

      1.请问level不同时如何分割图片，是否根据坐标来？ 
      2.level变动时，function NewMapType() {}函数如何实现？ 
      3.可否说说MapEasy的执行流程。 

      这也是很多的朋友在群里和论坛里经常问到的问题，也因为最近比较忙都只是做了简单的交流，今天抽空在这里把这个问题分析一下，我想上面三个问题也就自己解开了。

      首先需要搞清楚row,column,level分别是什么意思，我想大家英文对付它们应该绰绰有余，呵呵。row表示行、column表示列而level表示级别，在MapEasy中row表示瓦片（tile）所在的行数、column表示瓦片所在的列数而level表示地图缩放的级别。

      下面我们来理解几个更为重要的概念，主要是MapModel这个地图核心对象的几个属性：

      1. MapModel.bound 表示地图的坐标范围
      它为地图指定了一个参考坐标范围，其他一些带有坐标信息的概念都是以它作为参考，如点（Point）、地物标注（Marker）等。如设置当前坐标范围为(-180e16, 180e16, -90e16, 90e16)，即MapModel.bound = new Bound(-180e16, 180e16, -90e16, 90e16)（在这里默认你已经了解Bound对象的含义），有一个标注的坐标为(-180e16, 90e16)，即new Marker(new Point(-180, 90)) ，很容易看出在这个地图坐标系范围中此标注在地图的最左上角。自然这个标注在显示时位置也就在地图的最左上角。

      2. MapModel.firstZoomTileNum 表示地图在客户端显示时在第一个级别所分成的瓦片数。
      这个值一般是一个平方数，因为默认地图为正方形。如MapModel.firstZoomTileNum = 121表示在第一个级别会分成121和瓦片来显示，即11行11列的瓦片组成的二元矩阵。

      3. MapModel.scalePara 表示地图每一层缩放之间的缩放比例
      这个比较容易理解，如果MapModel.scalePara=2，那么每个级别之间就以2倍的比例放大或者缩小。

      4. MapModel.tileSize 表示每个瓦片的尺寸大小，单位为象素
      如MapModel.tileSize=256，那么瓦片即为256*256的DIV，地图图片相应也为256*256。注意此处单位为象素。

      5. MapModel.maxZoomLevel 表示地图能放大的最大级别
      如MapModel.maxZoomLevel=5，那么地图能放大的最大级别为5，相应在滑块工具上你也只能看到放大到5。

      
      我想理解了上面几个概念要回答那三个甚至是相关的问题都不会太难，首先我们来分析问题一：请问level不同时如何分割图片，是否根据坐标来？ MapEasy这种地图显示方式就是把地图分成一个个大小相等小的瓦片，我们可以把的地图看作是又我们生成的这些瓦片所拼接起来，其实一个瓦片在浏览器中就是一个DIV，里面包含一个图片。我们举一个比较典型的例子来说明。
     
      如果地图坐标范围为(-100,100,-100,100)，我们把它看左一个长宽均为200的大图片，我们设置MapModel.firstZoomTileNum=4，即在第一级用4个瓦片来显示，显示如下：

      A1 A2
      B1 B2

      A1,A2,B1,B2即为4个瓦片，显然A1显示(-100,0,0,100)范围的地图，A2显示(0,100,0,100)范围，B1显示(-100,0,-100,0)范围，B2显示(0,100,-100,0)范围。这个时候我们可以结合理解row,column的概念，其实这四个代号中A,B即代表row，下标1，2即代表column。

      为方便阅读把图片与地图范围列表如下：

      A1－(-100,0,0,100)
      A2－(0,100,0,100)

      B1－(-100,0,-100,0)
      B2－(0,100,-100,0)

      同样举最典型的例子当地图由level=1变为level=2时，并MapModel.scalePara=2即放大比例为2时，显然图片的长和宽都变为原来的一倍，而整个地图的面积就变成了原来的四倍。这个时候MapEasy会用四倍的瓦片数量来显示地图，如上面举的例子就变成如下显示：

   C1 C2 C3 C4
   D1 D2 D3 D4
   E1  E2 E3 E4
   F1  F2 F3 F4

      注:这里的ABCDEF并没有任何含义，只是代号而已。

      这个时候C1显示(-100,-50,50,100)范围地图,而C2显示(-50,0,50,100),依次类推，见下表：

      C1－(-100,-50,50,100)
      C2－(-50,0,50,100)
      C3－(0,50,50,100)
      C4－(50,100,50,100)

      D1－(-100,-50,0,50)
      D2－(-50,0,0,50)
      D3－(0,50,0,50)
      D4－(50,100,0,50)

      E1－(-100,-50,-50,0)
      E2－(-50,0,-50,0)
      E3－(0,50,-50,0)
      E4－(50,100,-50,0)

      F1－(-100,-50,-100,-50)
      F2－(-50,0,-100,-50)
      F3－(0,50,-100,-50)
      F4－(50,100,-100,-50)

      可以看出原来由一个瓦片A1显示的部分，现在由C1,C2,D1,D2四个瓦片共同显示，其他类推。

      当level不同时MapEasy就是这样分割图片来形成瓦片显示的，我想第一个问题应该解决了吧。下面我们来看第二个问题：level变动时，function NewMapType() {}函数如何实现？在自定义一个新的地图类型时，主要就是需要重载getSrc()方法来跟特定的地图服务器配合取得对应瓦片的图片数据。这个在以前也讨论过，getSrc方法通过level, row, column三个参数来确定现在需要请求哪个瓦片的图片数据。即表示在level级别下第row行第column列的瓦片地图数据的地址(在MapEasy中row,column的索引是从0开始的)。再结合第一个问题的解释第二个问题也就自然不成问题了。如上面的例子当level为1第二行第二列的瓦片图片数据为B2即(0,100,-100,0)范围的图片数据，二当level为2时同样第二行第二列的瓦片图片数据为D2即(-50,0,0,50)的图片数据。

      不管你的地图服务器(或者称为数据源)是使用按图片名称编好号码的静态图片还是动态的WMS服务等，都没有任何关系，按照上面的规律实现getSrc方法按对应的level,row,column取得对应的地图数据就可以享受MapEasy带来的乐趣了。如果你知道了这些还问我怎么去取图片呢，那我只能说仁者见仁，智者见智。呵呵

      对于第三个问题，我能说的就是在开源项目文档不全的客观条件下，静下心来研读一遍代码是最好的方法。MapEasy的代码即使在JavaScript基础不是太好的情况下我想抽一个星期的空余时间应该可以完整的读一遍了。不知道我这样回答cyg_gis兄是否能满意，不过这确实是肺腑直言，读源代码才是王道，强烈推荐！

      确实有好多好多的朋友提到这几个相关的问题，希望这篇文章能帮大家一解困惑，共同享受MapEasy！