OpenLayers图层
<!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="./OpenLayers-2.12/theme/default/style.css" type="text/css" />
<script src="./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>
<!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="./OpenLayers-2.12/theme/default/style.css" type="text/css" /> <script src="./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>
OpenLayers图层的更多相关文章
- openlayers图层加标注
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...
- OpenLayers中的图层（转载）
作者:田念明出处:http://www.cnblogs.com/nianming/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法 ...
- Openlayers离线载入天地图
概述: 经过一个春节的休整,今天最终開始了! 任何时候.都不要忘记学习.学习是一辈子的事情!今天,我来说说怎样实现天地图的离线以及Openlayers载入离线数据实现天地图数据的展示. 实现: 1.获 ...
- OpenLayers学习笔记（五）— 拖拽Feature图层
参考文档的例子可以知道如何拖动矢量图层feature GitHub: 八至 作者:狐狸家的鱼 本文链接:拖拽Feature图层 全部代码 <!DOCTYPE html> <html& ...
- OpenLayers 3 之 切换图层控件
OpenLayers 3 之 切换图层控件 openlayers 3中并没有默认的图层切换控件,GitHub中有一个项目实现了我们需要的控件-------- ol3-layerswitcher . 可 ...
- openlayers自定义图层控制的实现
好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...
- openlayers筛选图层
很多时候需要筛选图层,例如选择交互(ol.interaction.Select). 图片来自官方:https://openlayers.org/en/v4.6.5/apidoc/ol.interact ...
- OpenLayers在多个矢量图层编辑要素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
随机推荐
- Python实例2-逗号代码
假定有下面这样的列表: spam = ['apples', 'bananas', 'tofu', 'cats'] 编写一个函数,它以一个列表值作为参数,返回一个字符串.该字符串包含所有表项,表项之间以 ...
- 枚举进程，线程，堆 CreateToolhelp32Snapshot
Takes a snapshot of the processes and the heaps, modules, and threads used by the processes.对当前系统进行一 ...
- csp-s模拟48，49 Tourist Attractions，养花，画作题解
题面:https://www.cnblogs.com/Juve/articles/11569010.html Tourist Attractions: 暴力当然是dfs四层 优化一下,固定两个点,答案 ...
- jQuery3动画+创建元素
一.jQuery的动画 1.jQuery自带的动画 1>变化的是width height opacity display <!DOCTYPE html> <html lang= ...
- Maven实战06_坐标和邮件服务模块
1:何为Maven坐标 为了能够自动化地解析任何一个Java构件,Maven就必须要将其唯一标识,这就是依赖管理的底层基础--坐标. 学过数学的人都知道平面直角坐标系,x,y分别为其横,纵坐标,将会在 ...
- WhaleCTF之web-Find me
WhaleCTF之web-Find me 前往题目 Where is the flag?这是给我提示吗? 没思路,看看源码,说不定有惊喜 哇,在这里啊,得到flag~ flag:{This_is_s0 ...
- Dockerfile镜像制作时间同步
1.问题描述 宿主机与容器时间相差8小时 2.原因 宿主机采用了CST时区,CST应该是指(China Shanghai Time,东八区时间)容器采用了UTC时区,UTC应该是指(Coordinat ...
- i\'ll make a man out of you
Let's get down to business To defeat the Huns Did they send me daughters When I asked for sons? You' ...
- HTML5中类jQuery选择器querySelector和querySelectorAll的使用
支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...
- Jquery手机下拉刷新，下拉加载数据
一.Jquery手机下拉刷新,下拉加载数据.附加有源码 <!DOCTYPE html> <html> <head> <title>手机</titl ...