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 ...
随机推荐
- SpringMVC，3种不同的URL路由配置方法 [转]
SpringMVC中配置URL拦截,非常简单.网上找个示例,就能通过.但是,在我做了好几个Web项目,又参与了别人主导的Web项目时,发现URL配置也非常有学问. 1. 先说说一种比较常见的: < ...
- springboot核心技术(三)-----web开发
web开发 1.简介 使用SpringBoot: 1).创建SpringBoot应用,选中我们需要的模块: 2).SpringBoot已经默认将这些场景配置好了,只需要在配置文件中指定少量配置就可以运 ...
- DFS-深度优先搜索与BFS-广度优先搜索
1.DFS DFS是一个递归过程.(类似于二叉树的前序遍历) 参考:深度优先搜索(Depth-First-Search)精髓 2.BFS 可以理解为按层遍历,借助队列结构来实现.(类似于二叉树的层次遍 ...
- 新增对象Products 的流程说明
库内新增对象Products 的流程说明: 第一步: com.jeecms.cms.entity.assist.base下建立模型基础类,BaseCmsProducts.java com.jeecms ...
- Cesium打包命令总结
引言 Cesium实验室QQ群里有人在问Cesium的打包问题.我想干脆总结一下Cesium的打包命令特点,写篇文章,顺带庆祝一下1024程序员节.. Cesium的npm脚本有好多,其中几个和打包相 ...
- idea报错：Error：java不支持发行版本5的解决方法
将以下对应配置一致即可. File-->Project Structure File-->Settings
- python编程：从入门到实践学习笔记
python编程:从入门到实践学习笔记 原文地址:https://blog.csdn.net/qq_35554125/article/details/79548192 [day 1]python编程: ...
- HDU2896 病毒侵袭 AC自动机模板
各种MLE,这模板感觉有问题,next数组开128也会MLE,实际上可见字符为编号32~126,只用开100就行. #include <iostream> #include <cst ...
- mysql 登录的时候设置编码 utf8
很多时候 导入sql 的时候需要命令行导入 但是有的时候容易出现乱码 因为字符集的问题 所以 尽量在登录的时候就设置编码 就不容易出错了 例如: mysql -uroot -p –default-ch ...
- Visual Studio 2013打开Orchard1.8.1版本源码，出现无法打开解决方法
当使用Visual Studio打开项目时,如果遇到如上情况,可能是缓存问题,删除解决方案缓存(suo后缀文件)后重新打开sln解决方案即可,如下图