Openlayers2切换supermap WMS服务底图，已解决

最新推荐文章于 2024-06-17 10:19:03 发布
最新推荐文章于 2024-06-17 10:19:03 发布
阅读量1.8k 收藏 4
点赞数 1
文章标签： openlayer2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012374381/article/details/77829019
版权

   话不多说上代码，，，


    
 <html>  
     <head>  
    <title>  
    电子海图的图层切换控件  
    </title>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
    <!-- 加载OpenLayers 类库 -->  
    <script type="text/javascript" src="http://www.openlayers.cn/olapi/OpenLayers.js">  
    </script>  
    <style>  
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }  
    </style>  
      
    <script type="text/javascript">  
    function init() {  
    // 使用指定的文档元素创建地图  
    var map = new OpenLayers.Map("test_map");  
    // 创建一个 OpenStreeMap raster layer  
    var osm = new OpenLayers.Layer.OSM();  
    //创建一个WMS图层  
    var wms_layer = new OpenLayers.Layer.WMS(  
      'WMS Layer Title',  
      'http://116.117.157.170:8085/iserver/services/map-ordosMap/wms111/ordosMap',  
      {layers: 'ordosMap'},  
      {}  
    );  
     var wms_layer1 = new OpenLayers.Layer.WMS(  
      'WMS Layer Title1',  
      'http://116.117.157.170:8085/iserver/services/map-eeds10m/wms111/eeds',  
      {layers: 'eeds'},  
      {}  
    );
    //添加图层切换控件  
    var switch_ctrl=new OpenLayers.Control.LayerSwitcher({});  
    map.addControl(switch_ctrl);  
      
    map.addLayers([wms_layer1,wms_layer]);  
    map.setCenter([109.797986,39.628674],17);  
    map.setZoom(10);
    // 设定视图缩放地图程度为最大  
    map.zoomToMaxExtent();  
    }  
    </script>  
    </head>  
       
    <body οnlοad="init()">  
    <div id="test_map" style="width: 100%;  
    height: 100%;">  
    </div>  
    </body>  
       
    </html>

效果

   



今天就不发了，睡觉觉。。。凌晨了也挺晚的，熬夜伤身。


优雅码农
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 3104
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-21 9127
OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。
openlayers3-切换WMSsupermap服务底图
09-04
openlayers3-切换WMSsupermap服务底图 openlayers3-切换WMSsupermap服务底图 openlayers3-切换WMSsupermap服务底图
ocx控件id可以自己定吗?_OpenLayers教程七：地图控件之自己实现图层切换控件
weixin_39975055的博客
12-22 161
OpenLayers并没有封装图层切换的控件，所以我们需要自己来实现图层控件。 自定义图层切换控件的原理很简单：显示某个图层时，将其他图层隐藏。 完整代码： layerSwitch.html:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
openlayers之ImageWMS监听事件
最新发布
IT_moshang的博客
06-17 197
ol.source.ImageWMS，WMS 服务提供的单一的图片数据，继承自，触发；
OpenLayers + SuperMap iClient for OpenLayers 加载超图地图服务 4326 3857 rest
josiecici的博客
01-26 6070
服务地址：https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China 服务分类：地图服务 服务坐标系：3857 layers内有子图层： 服务地址：https://iserver.supermap.io/iserver/services/map-world/rest/maps/World 服务坐标系：4326 同样的layers内也有子图层，截图省略。。。 加载代码，这里我的代码是从超图官网获取的： v
OpenLayers实现图层切换控件
10-14
主要为大家详细介绍了OpenLayers实现图层切换控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-29 790
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
适合GIS专业学生和前端webgis小白快速上手的Vue+OpenLayers6入门到实战教程，OpenLayers6中文文档手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-23 1270
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
openlayers学习三：切换底图（天地图）
weixin_39520640的博客
07-19 4035
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>底图切换</title> <script src="dist/ol.js"></script> <link rel="styl...
openlayers动态切换图层
zxz_learn的博客
04-25 925
openlayers动态切换图层 通过修改Zindex修改 map.getLayers().array_[0].setZIndex(3); map.getLayers().array_[1].setZIndex(4); 通过修改Zindex修改 map.getLayers().array_[0].setVisible(true); map.getLayers().array_[1].setVisible(false);
OpenLayers 3 之 切换图层控件
热门推荐
研究与专注
11-27 1万+
在 openlayers 2中，是默认有切换图层控件的，但是由于某种原因，openlayers 3中并没有默认实现，但却给我们很容易扩展的基类（ol.control.Control），我们可以自定义实现，并不是很难，这我会在其他文章中讲解。这篇文章中，我利用一个 GitHub 中的一个开源项目（这个项目就是扩展了`ol.control.Control`，自定义了切换图层控件），添加切换图层控件，并探索其用法。
OpenLayers 学习（四）电子海图的图层切换控件
Stonesk的博客
03-16 2913
在整理叠加图层时，发现有时需要切换地图，试用Control.LayerSwitcher实现。 源码如下： 电子海图的图层切换控件 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } function init() { // 使用指定的文档元素创建地图 var map = new OpenLay
OpenLayers3之根据范围设置地图缩放级别
Console_DS的博客
11-21 4869
OpenLayers3根据范围设置地图缩放级别/*两种方式*/ //第一种 var r=map.getView().getResolutionForExtent(extent,map.getSize()); map.getView().setResolution(r); map.getView().setCenter(ol.extent.getCenter(extent)); //第二种 ...
OpenLayers 6 中实现“上一视图”、“下一视图”的视图切换功能，类似arcgis for js的Navigation
weixin_44519342的博客
04-19 592
OpenLayers 6 中实现“上一视图”、“下一视图”的视图切换功能，类似arcgis for js的Navigation
openlayers 使用天地图 切换图层
q1025387665a的博客
04-02 1817
前言： 刚开发完一个模块，主要的功能都是由openlayers实现的，写篇博客，一个是为后来者指引条明路（前端的大佬们都只喜欢讲理论，我不喜欢理论，我只喜欢实现的过程，所以这篇文章我只会告诉你怎么实现。同时作者的水平也不高，没有达到做封装的地步，如果你觉得简单，那就再好不过了。），二是给自己做个总结。 看不懂？没关系，我也看不懂，但相信你有过openlayers的使用你应该能知道这个WMTS是什么。他在官网的有些实例加载地图的时候不是等到地图初始化完毕直接渲染的，而是通过一个一个预定义图块进行渲染的。 了
openlayers6【十二】vue 切片图层 TileLayer 切换地图底图，图层叠加效果
@必意玲
06-04 9120
1. 效果图 官方参考文档：https://openlayers.org/en/latest/examples/zoomslider.html 2. 使用 ZoomSlider 控件 2.1 导入ZoomSlider 控件 import { defaults as defaultControls, ZoomSlider } from "ol/control"; 2.2 向map地图创建一个 ZoomSlider控件即可 this.map.addControl(new ZoomSlider());
openlayers在vue中做底图裁剪，行政区划 剪裁
weixin_54988062的博客
06-27 700
openlayers在vue中做底图裁剪，行政区划 剪裁
vue使用openlayers调用wms地图服务不显示
06-08
2. WMS版本不兼容。OpenLayers默认使用WMS 1.3.0版本，如果服务端只支持较旧的版本，可能会导致地图无法显示。 3. 地图服务的坐标系与OpenLayers不兼容。需要确保OpenLayers和地图服务使用的坐标系相同。 4. 地图...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值