MapEasy答疑(二) 如何让MapEasy与WMS共同工作

飞你默属

MapEasy群里面很多新朋友都不停的问到同一个问题，既然MapEasy是一个纯粹的JavaScript地图显示客户端那么她是如何与客户自己的后台地图程序进行整合，共同工作？这在MapEasy的设计之初就给了完美的解答，在MapEasy上实现与不同的地图服务的对接是一件非常轻松而且灵活的事情。大家都可以看到在MapEasy的Sample里就给出了诸如Google、edushi、WOW、custom等多种后台地图服务的接口。

     但是由于各种历史的原因Sample里只有edushi的地图现在还可以正常工作，其他的可能已经看不到图片。很多朋友都以为是MapEasy的代码的原因，其实不然，可以解释为是MapEasy很久没有更新的原因，那些地图服务已经不能取得地图数据了。

     在这里特别感谢BeanSoft兄提出的建议，做一个在取本地图片的的Sample，这样就不会出现上述的地图服务不能工作后Sample不能正常工作。最值得我敬佩的是他马上动手做了一个Demo，再次感谢分享！

     下面告诉大家实现与自己的地图服务配合是一件多么Easy的事情（我们的目的就是让Map更加Easy ^_^）。请大家注意MapType这个类，她就是MapEasy提供给大家扩展自定义地图服务类型的组件（我觉得在这里用组件这个词更加贴切，因为她虽然够简单，但同样够强大和完整）。下面给出MapType类：

1 function MapType() {
2     
3     this.enablePic;
4
5     this.disablePic;
6     
7     //~ Method
8      {
9         this.enablePic = imgBaseDir + "maptype_0b.gif";
10         this.disablePic = imgBaseDir + "maptype_0a.gif";
11      }
12
13     this.getSrc = function(level, row, column) {
14         return imgBaseDir + 'zoom_' + level + '/' + level + '_' + column + '_' + row + '.jpg';
15      }
16
17     this.getEnablePic = function() {
18         return this.enablePic;
19      }
20
21     this.getDisablePic = function() {
22         return this.disablePic;
23      }
24 }
     enablePic、disablePic即显示在左上角（当然如果你愿意可以把她放在任何位置）的变换地图类型的按钮的图片，分别为选中和非选中时的图片。而getSrc方法就是实现与不同地图服务对接的最重要直接的方法，默认提供的方法是取本地图片。getSrc方法提供了与不同数据源的接口，在getSrc中发挥你的聪明才智以最简单的方式取得对应瓦片的图片就可以了。

     MapEasy推荐的最佳实践是编写一个属于自己的MapType，如WMSMapType，继承MapEasy提供的MapType重写getSrc方法实现自己的数据源接口。

     WMS(Web Map Service)是OPENGIS的规范，应用非常广泛。下面给出一个以WMS服务为地图数据源的简单实现作为参考。

1 /**
2 * 自定义一个WMS数据源
3 * @author crespo
4 */
5 function WMSMapType() {
6
7      MapType.apply(this);
8
9     this.getSrc = function(level, row, column) {
10         var xMin = (MapModel.bound.getMinX() + ((MapModel.bound.getWidth()) / (new Zoom(level).getBorderTilesNum()))*(column))/1e16;
11         var yMin = (MapModel.bound.getMaxY() - ((MapModel.bound.getHeight()) / (new Zoom(level).getBorderTilesNum()))*(row+1))/1e16;
12         var xMax = (MapModel.bound.getMinX() + ((MapModel.bound.getWidth()) / (new Zoom(level).getBorderTilesNum()))*(column+1))/1e16;
13         var yMax = (MapModel.bound.getMaxY() - ((MapModel.bound.getHeight()) / (new Zoom(level).getBorderTilesNum()))*(row))/1e16;
14         //alert("row and column"+row+","+column);
15         //alert(xMin+","+yMin+","+xMax+","+yMax);
16         return "http://localhost:8080/geoserver/wms?bbox="+xMin+","+yMin+","+xMax+","+yMax+"&styles=population&Format=image/png&request=GetMap&layers=states&width=256&height=256&srs=EPSG:4326";
17      }
18 }
     使用本机的geoserver服务器提供的WMS服务测试通过。

     赶快去扩展你的地图类型吧！