简体   繁体   中英

javascript programming: how to remove blank area of a tile map in openlayers

I use a open source tool named "maptiler" to create a tile map on a raster impage (no geo-info). It also create a HTML file which uses openlayers lib to display the created tile map. It looks fine except the map (image) is draggable and there are a large blank area in the screen which looks urgly. Do you know how to remove the blank area around the map?

Thanks for your help!

screenshot is here: use http to visit: "218.244.136.35:8080/7777/a.png"

My software is like this:

var options = {
              controls: [
                        new OpenLayers.Control.Attribution(),
                        new OpenLayers.Control.TouchNavigation({
                            dragPanOptions: {
                                enableKinetic: true
                            }
                        }),
                        new OpenLayers.Control.LayerSwitcher(),
                        new OpenLayers.Control.Zoom()
                ],
                maxExtent: new OpenLayers.Bounds(  0.0, -3448.0, 2426.0, 0.0 ),
                maxResolution: 16.000000,
                numZoomLevels: 5
            };


var layer = new OpenLayers.Layer.TMS( "TMS Layer","",
       {  url: '', serviceVersion: '.', layername: '.', alpha: true,
                                type: 'png', getURL: overlay_getTileURL 
                    });

map = new OpenLayers.Map('map', options);                       
map.addLayer(layer);
var mapBounds = new OpenLayers.Bounds( 0.0, -3448.0, 2426.0, 0.0); // this is the resolution of my image
map.zoomToExtent( mapBounds );          
map.addControl(new OpenLayers.Control.MousePosition());

You must add restrictedExtent: to the options of the map. An example of this feature is visible at:

http://openlayers.org/dev/examples/restricted-extent.html

If you had used new MapTiler (from http://www.maptiler.com ) to generate the tiles, then the javascript code would be cleaner and you would also get Leaflet viewer out of the box and minimized tiles.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM