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 οnlοad="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>

转载于:https://www.cnblogs.com/Jeely/p/11175313.html

OpenLayers图层相关推荐

Openlayers 图层的常用操作
Openlayers 图层的常用操作 OpenLayers 教程 Openlayers 图层的常用操作在线示例 OpenLayers 教程在 Openlayers 中,图层是非常基础的对象,这里汇 ...
openlayers图层开关控件
openlayers2自带图层开关控件,但是自openlayers3后,不再有这个控件.但是,当了解了openlayers控件开发后,我们可以自己实现这个控件,实现起来也非常之简单.不多说,先看下结果 ...
geoservice地图openlayers图层+echart图表政区添加色块
先看效果图: openlayers案例+api: https://openlayers.org/en/latest/examples/ https://openlayers.org/en/latest ...
OpenLayers - 图层透视效果（九）
简介本文主要讲解的是,通过控制图层,层级和大小来实现图层透视功能. 主要使用图层监听事件 prerender监听图层渲染之前,postrender监听图层渲染之后. 实现DEMO 初始化地图 < ...
vue openlayers——图层控制切换底图
openlayers官网: OpenLayers - Welcomehttps://openlayers.org/ 1.创建地图获取页面节点放置地图的节点元素,设置地图中心点,创建地图 const ...
关于openlayers图层的放大缩小以及中心坐标
首先要引入openlayers的defaults,看看官网的文档. import { defaults } from "ol/control"; import { fromLonL ...
openlayers 图层刷新问题
图层编辑之后,重新加载图层,刷新不成功的问题缓存存在,图层remove在add之后,并未发生新的网络请求.已知地图缩放级别并未发生改变,窗口也没有,所以此时的gis数据请求的参数是已经被缓存起来了, ...
读书笔记(2) OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...
openlayers加载谷歌地图（在线demo）
最近发现可以直接访问谷歌地图了(不用梯子,不用翻墙,直接访问谷歌地图,关键是使用了gac-geo.googlecnapps.cn ),用openlayers随手写了一个,方便自己使用,感兴趣的可以访问 ...
Openlayers View 限制显示范围、限制缩放级别、限制拖动等
Openlayers 视图(View)常用方法介绍 OpenLayers 教程 Openlayers 视图(View)常用方法介绍在线示例 OpenLayers 教程在 Openlayers 中, ...

OpenLayers图层

OpenLayers图层相关推荐

最新文章

热门文章