OpenLayers控制瓦片的绽放级别

时间:2023-03-10 01:09:24
OpenLayers控制瓦片的绽放级别

先说说这个功能可能使用到的地方,当我们下载的网上瓦片或者矢量数据的第一级或开始几级效果不是很好时,我们就就想让用户看到这些级别的瓦片。实现这个功能比较简单,主要就是修改Openlayers.map的isValidZoomLevel方法。具体如下:
1.先定义好一个limiteZoonLevel方法,在

/*
*设置地图可以缩放的级别
*Parameters:
*minLevel - {int} 最小级别
*maxLevel - {int} 最大级别
*/
limiteZoonLevel: function (minLevel, maxLevel) {
minLevel = minLevel || 0; //如果没有传入minLevel,则默认为0
maxLevel = maxLevel || this.mapObj.numZoomLevels;
this.mapObj.isValidZoomLevel = function (zoomLevel) {
return ((zoomLevel != null) &&
(zoomLevel >= minLevel) && // 最小级
(zoomLevel <= maxLevel));
}
},

地图初始化完成时,调用就可以了。同样的,我们也可以在点击某个按钮后触发。

2.以初始化地图调用为例。

var myMap = {
mapObj:null,
initialize: function (domId) {
var mapNav = new OpenLayers.Control.Navigation();
this.mapObj = new OpenLayers.Map(domId, {
maxExtent: new OpenLayers.Bounds(90, 0, 135, 45), //90,0,135,40.9798980696202 90, 0, 135, 45
controls: [mapNav],
numZoomLevels: 8,
maxResolution: (135 - 90) / 256,
theme: null
}); //定义瓦片图层
var titleLayer = new Zondy.Map.TileLayerForMetro('myLayers', '', {
baseUrl: '../images/map/ditu/IMG'
});
this.mapObj.addLayer(titleLayer);
this.mapObj.setCenter(new OpenLayers.LonLat(101.217, 24.87400), 4);
this.limiteZoonLevel(4,8);
return this;
}, /*
*设置地图可以缩放的级别
*Parameters:
*minLevel - {int} 最小级别
*maxLevel - {int} 最大级别
*/
limiteZoonLevel: function (minLevel, maxLevel) {
minLevel = minLevel || 0; //如果没有传入minLevel,则默认为0
maxLevel = maxLevel || this.mapObj.numZoomLevels;
this.mapObj.isValidZoomLevel = function (zoomLevel) {
return ((zoomLevel != null) &&
(zoomLevel >= minLevel) && // 最小级
(zoomLevel <= maxLevel));
}
}, OBJECT_NAME: 'myMap'
};

这里我将地图的初始化和级别控制方法都包在myMap对象中了。最后一步就是调用这个myMap对象。