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服务测试通过。
赶快去扩展你的地图类型吧！
posted on 2007-02-07 10:59
cresposhi 阅读(3411)
评论(9) 编辑 收藏