- OpenLayers Cookbook
- Antonio Santiago Perez
- 335字
- 2021-08-13 18:03:34
Avoiding the need of a base layer
There can be situations where you don't want a base layer and only want a bunch of layers to work on.
Imagine an online GIS editor where users can add and remove layers but they are not obligated to have an always visible one.
This recipe shows how we can easily avoid the requirement of setting a base layer within the map.

How to do it...
- As always, create a DOM element to render the map:
<div id="ch1_avoid_baselayer" style="width: 100%; height: 100%;"></div>
- Now create a new
OpenLayers.Map
instance and set theallOverlays
property totrue:
// Create the map using the specified DOM element var map = new OpenLayers.Map("ch1_avoid_baselayer", { allOverlays: true });
- Add two layers to see a result. Also add the layer switcher control:
// Add a WMS layer var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' }); map.addLayer(wms); // Add a WMS layer var topo = new OpenLayers.Layer.WMS("USA Topo Maps", "http://terraservice.net/ogcmap.ashx", { layers: "DRG" }, { opacity: 0.5 }); map.addLayer(topo); // Add LayerSwitcher control map.addControl(new OpenLayers.Control.LayerSwitcher());
- Center the map view to some nice place:
// Set view to zoom maximum map extent // NOTE: This will fail if there is no base layer defined map.setCenter(new OpenLayers.LonLat(-100, 40), 5);
When the map's property allOverlays
is set to true
, the map ignores the isBaseLayer
property of the layers.
If you expand the layer switcher control, you will see that it contains two overlay layers, no base layer, which you can show or hide and, if desired, leave a blank map without layers.
In addition, in this recipe we have used the map.setCenter()
method, which needs a position, an OpenLayers.LonLat
instance, and a zoom level to work.
When working in the allOverlays
mode, the lowest layer will act as base layer, although all the layers will be flagged as isBaseLayer
is set to false.
- 網(wǎng)絡(luò)協(xié)議工程
- 物聯(lián)網(wǎng)(IoT)基礎(chǔ):網(wǎng)絡(luò)技術(shù)+協(xié)議+用例
- 光網(wǎng)絡(luò)評估及案例分析
- Hands-On Chatbots and Conversational UI Development
- Getting Started with Grunt:The JavaScript Task Runner
- 中國互聯(lián)網(wǎng)發(fā)展報告2018
- 網(wǎng)絡(luò)環(huán)境中基于用戶視角的信息質(zhì)量評價研究
- jQuery Mobile Web Development Essentials
- INSTANT LinkedIn Customization How-to
- 現(xiàn)場綜合化網(wǎng)絡(luò)運(yùn)營與維護(hù):運(yùn)營商數(shù)字化轉(zhuǎn)型技術(shù)與實(shí)踐
- 區(qū)塊鏈社區(qū)運(yùn)營手冊
- 5G智慧交通
- 物聯(lián)網(wǎng)導(dǎo)論
- Learn Node.js by Building 6 Projects.
- 計算機(jī)網(wǎng)絡(luò)(項目教學(xué)版)