<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>理解基础层和非基础层</title> <link rel="stylesheet" href="https://my.oschina.net//u/4373914/blog/3466916/OpenLayers-2.12/theme/default/style.css" type="text/css" /> <script src="https://my.oschina.net//u/4373914/blog/3466916/OpenLayers-2.12/lib/OpenLayers.js"></script> <script type="text/javascript"> function init(){ //初始化左侧地图 //应用特定DOM元素创建地图 var map\_a = new OpenLayers.Map("base\_nonbase\_map\_a"); //添加WMS层 var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' }, { isBaseLayer: true }); map\_a.addLayer(wms); // 添加WMS层 var topo = new OpenLayers.Layer.WMS("USA Topo Maps", "http://terraservice.net/ogcmap.ashx", { layers: "DRG" }, { opacity: 0.5, isBaseLayer: false }); map\_a.addLayer(topo); //添加层选择控件 map\_a.addControl(new OpenLayers.Control.LayerSwitcher()); //将地图视图范围设置为全图视窗 //注意：如果没有一个基础层，将创建失败 map\_a.setCenter(new OpenLayers.LonLat(-100, 40), 5); //初始化右侧地图 //应用特定DOM元素创建地图 var map\_b = new OpenLayers.Map("base\_nonbase\_map\_b"); // 添加WMS层 var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' }); map\_b.addLayer(wms); // 添加WMS层 var topo = new OpenLayers.Layer.WMS("USA Topo Maps", "http://terraservice.net/ogcmap.ashx", { layers: "DRG" }); map\_b.addLayer(topo); //添加层选择控件 map\_b.addControl(new OpenLayers.Control.LayerSwitcher()); //将地图视图范围设置为全图视窗 //注意：如果没有一个基础层，将创建失败 map\_b.setCenter(new OpenLayers.LonLat(-100, 40), 5); } </script></head><body onload="init()"> <table style="width: 100%; height: 95%;"> <tr> <td> <p>Map with one non base layer:</p> <div id="base\_nonbase\_map\_a" style="width: 100%; height: 500px;"></div> </td> <td> <p>Map with two base layers</p> <div id="base\_nonbase\_map\_b" style="width: 100%; height: 500px;"></div> </td> </tr> </table> <div style="width:100%; height:100%" id="map"></div></body></html>1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>理解基础层和非基础层</title> 6 <link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" /> 7 <script src="./OpenLayers-2.12/lib/OpenLayers.js"></script> 8 <script type="text/javascript"> 9 function init(){ 10 //初始化左侧地图 11 //应用特定DOM元素创建地图 12 var map_a = new OpenLayers.Map("base_nonbase_map_a"); 13 //添加WMS层 14 var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0", 15 { 16 layers: 'basic' 17 }, 18 { 19 isBaseLayer: true 20 }); 21 map_a.addLayer(wms); 22 // 添加WMS层 23 var topo = new OpenLayers.Layer.WMS("USA Topo Maps", "http://terraservice.net/ogcmap.ashx", 24 { 25 layers: "DRG" 26 }, 27 { 28 opacity: 0.5, 29 isBaseLayer: false 30 }); 31 map_a.addLayer(topo); 32 //添加层选择控件 33 map_a.addControl(new OpenLayers.Control.LayerSwitcher()); 34 //将地图视图范围设置为全图视窗 35 //注意：如果没有一个基础层，将创建失败 36 map_a.setCenter(new OpenLayers.LonLat(-100, 40), 5); 37 //初始化右侧地图 38 //应用特定DOM元素创建地图 39 var map_b = new OpenLayers.Map("base_nonbase_map_b"); 40 // 添加WMS层 41 var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0", 42 { 43 layers: 'basic' 44 }); 45 map_b.addLayer(wms); 46 // 添加WMS层 47 var topo = new OpenLayers.Layer.WMS("USA Topo Maps", "http://terraservice.net/ogcmap.ashx", 48 { 49 layers: "DRG" 50 }); 51 map_b.addLayer(topo); 52 //添加层选择控件 53 map_b.addControl(new OpenLayers.Control.LayerSwitcher()); 54 //将地图视图范围设置为全图视窗 55 //注意：如果没有一个基础层，将创建失败 56 map_b.setCenter(new OpenLayers.LonLat(-100, 40), 5); 57 } 58 </script> 59</head> 60<body onload="init()"> 61 <table style="width: 100%; height: 95%;"> 62 <tr> 63 <td> 64 <p>Map with one non base layer:</p> 65 <div id="base_nonbase_map_a" style="width: 100%; height: 500px;"></div> 66 </td> 67 <td> 68 <p>Map with two base layers</p> 69 <div id="base_nonbase_map_b" style="width: 100%; height: 500px;"></div> 70 </td> 71 </tr> 72 </table> 73 <div style="width:100%; height:100%" id="map"></div> 74</body> 75</html>
OpenLayers图层
Stella981
2021-10-11
1315 0 0
点赞
收藏
评论区
加载中...