我尝试使用TMS图层和Boxes图层制作地图。
我的地图是这样构建的:
`var get_my_url = function (bounds) {
var res = this.map.getResolution();
var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var zoom = this.map.getZoom();
var path = '433-' + zoom + "-" + x + "-" + y + "." + this.type;
var url = this.url;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
var maxSize = 3872;
var mapHeight = 2592;
var tileSize = 256;
var options = {
maxExtent: new OpenLayers.Bounds(0,0,maxSize,maxSize),
maxResolution: maxSize / tileSize,
numZoomLevels: 5
};
var map = new OpenLayers.Map(
'map',
options
);`
我的TMS图层构建如下:
`var layer = new OpenLayers.Layer.TMS(
'Aerial',
'<?php print site_url(); ?>/wp-content/uploads/map-tiles/',
{
type: 'png',
getURL: get_my_url,
layername: "basic",
isBaseLayer: true
}
);`
最后,我的Boxes层构建如下:
`var bounds = new OpenLayers.Bounds(<?php print $box_x ?>, <?php print $box_y ?>, <?php print $box_x + $box_w ?>, <?php print $box_y + $box_h ?>);
box = new OpenLayers.Marker.Box(bounds);
box.events.register("click", box, function (e) {
this.setBorder("yellow");
});
var boxes = new OpenLayers.Layer.Boxes(
'Boxes',
{
layername: "juzbox",
isBaseLayer: false
}
);
boxes.addMarker(box);`
现在,我只需将图层添加到地图中,然后在地图上设置中心,如:
`map.addLayers([layer, boxes]);
var lonlat = new OpenLayers.LonLat(maxSize/2, maxSize-(mapHeight/2));
lonlat.transform(map.displayProjection, map.baseLayer.projection);
map.setCenter(lonlat, 2);`
我的问题是我的图层没有叠加,但第二层是第一个......
需要一些帮助!!
答案 0 :(得分:1)
稍后注意:0,0是地图的左下角,而不是左上角!!!
所以问题只是在盒子层的范围内。
var bounds = new OpenLayers.Bounds(<?php print $box_x ?>, maxSize - <?php print $box_y + $box_h ?>, <?php print $box_x + $box_w ?>, maxSize - <?php print $box_y ?>);
它有效......看看the exemple