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 ...
随机推荐
- java基础之Character类概述
Character 类 在对象中包装一个基本类型 char 的值 此外,该类提供了几种方法,以确定字符的类别(小写字母,数字,等等),并将字符从大写转换成小写,反之亦然 构造方法 public Cha ...
- reac-native + typescript 的环境搭建
一. RN-TS环境搭建 . 安装RN脚手架 yarn add create-react-native-app -g yarn global add typescript . 创建项目文件夹 crea ...
- Could not resolve placeholder 'CUST_INDUSTORY' in string value "${CUST_INDUSTORY}"
问题描述 项目中的资源文件中写了个properties文件,内容这样的 CUST_FROM=002 CUST_INDUSTORY=001 CUST_LEVEL=006 在springmvc配置文件中加 ...
- Python学习之--函数/生成器/装饰器
Function,函数,主要是为了:1提高代码的复用程度,2将程序模块化. 定义函数 在Python中,使用def 用来定义函数,一般函数的定义如下: def name(arg1,arg2,....) ...
- 构建HBase二级索引
- 推荐5款超实用的.NET性能分析工具
虽然.NET框架号称永远不会发生内存泄漏,原因是引入了内存回收机制.但在实际应用中,往往我们分配了对象但没有释放指向该对象的引用,导致对象永远无法释放.最常见的情况就是给对象添加了事件处理函数,但当不 ...
- CODE[VS]1372:DNA
Description 为了进一步分析外星生物,专家们决定对 DNA 进行切割.限制性核酸内切酶是基因工程中的重要的工具酶.它会识别一段碱基序列(说白了就是只包含 ATGC 的序列)并且切割开.Eco ...
- webpack配置根据浏览器自动添加css前缀的loader
1.安装 postcss-loader autoprefixer npm install postcss-loader autoprefixer --save-dev 2.配置webpack.conf ...
- 改变swiper 按钮swiper-button-next 颜色
温馨提示:一般如果一个项目只需要一两处使用swiper时,不需要把swiper的css文件引进去,只需要把需要的几个类在swiper.css中复制出来,粘贴到自己的项目css中即可. 改变按钮颜色(红 ...
- Http post请求案例
public RmiRespBase sendHttpRes(String jsonParamStr, String url, String apiName,String systemId,Strin ...