地图 lyrs_openlayers6地图切换展示(附源码下载)

最新推荐文章于 2024-08-13 08:54:47 发布
最新推荐文章于 2024-08-13 08:54:47 发布
阅读量301 收藏
点赞数
文章标签： 地图 lyrs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29865939/article/details/112661686
版权
本文介绍了如何在OpenLayers6中实现地图切换功能，提供了核心代码片段，并提供了完整的源码demo下载链接。感兴趣的话，可以访问GIS之家作品店铺进行更多了解。
摘要由CSDN通过智能技术生成

ab8035cc16d8375855dada7389150685.png

前言

之前写过一篇openlayers4版本的地图切换效果，但是由于是封装一层 js代码写的，很多初学者看起来比较有点吃力，所以本篇文章重新写一篇地图切换效果，直接基于最新版本openlayers6写的，纯粹html + js + css形式，没有任何封装。

内容概览

1.基于openlayers6实现地图切换展示效果
2.源代码demo下载

效果图如下：

7679b292658dfa4cf18d62afec0bf0f3.png
大概实现思路如下：地图初始化配置加载各种在线地图，比如天地图，arcgis地图，谷歌地图，高德地图，百度地图，OSM地图等等，默认图层只显示一个地图，其他在线地图默认隐藏不可见状态；js自定义一个底图切换的控件，底图切换时候，动态设置图层的隐藏以及可见性，达到底图切换目的。
  • 部分核心代码，完整的见源码demo下载
 var satelliteLayer = new ol.layer.Tile({ //天地图卫星图 
          visible: true, 
 source: new ol.source.XYZ({ 
 url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var satelliteLabelLayer = new ol.layer.Tile({ 
 visible: false, 
 source: new ol.source.XYZ({ //天地图卫星图注记 
            url: 'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var streetLayer = new ol.layer.Tile({ //天地图街道图 
          visible: false, 
 source: new ol.source.XYZ({ 
 url: 'http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var streetLabelLayer = new ol.layer.Tile({ 
 visible: false, 
 source: new ol.source.XYZ({ //天地图街道图注记 
            url: 'http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var terLayer = new ol.layer.Tile({ 
 visible: false, 
 source: new ol.source.XYZ({ //天地图地形图 
            url: 'http://t{0-7}.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var osmLayer = new ol.layer.Tile({//OSM地图 
          visible: false, 
 source: new ol.source.OSM() 
      }); 
 
 var arcgisImgLayer = new ol.layer.Tile({//arcgis影像 
          visible: false, 
 source: new ol.source.XYZ({ 
 url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var arcgisVecLayer = new ol.layer.Tile({//arcgis街道 
          visible: false, 
 source: new ol.source.XYZ({ 
 url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var googleImgLayer = new ol.layer.Tile({//谷歌影像 
          visible: false, 
 source: new ol.source.XYZ({ 
 url: 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var googleVecLayer = new ol.layer.Tile({//谷歌街道 
          visible: false, 
 source: new ol.source.XYZ({ 
 url: 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var gaodeImgLayer = new ol.layer.Tile({//高德影像 
          visible: false, 
 source: new ol.source.XYZ({ 
 url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var gaodeVecLayer = new ol.layer.Tile({//高德街道 
          visible: false, 
 source: new ol.source.XYZ({ 
 url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}', 
 crossOrigin:"anonymous" 
          }) 
      }); 
 
 var layers = [ 
      satelliteLayer, 
      streetLayer, 
      terLayer, 
      satelliteLabelLayer, 
      streetLabelLayer, 
      osmLayer, 
      arcgisImgLayer, 
      arcgisVecLayer, 
      googleImgLayer, 
      googleVecLayer, 
      gaodeImgLayer, 
      gaodeVecLayer, 
  ]; 
 //地图创建 
 var map = new ol.Map({ 
 layers: layers, 
 target: 'map', 
 view: new ol.View({ 
 projection: 'EPSG:4326', 
 center: [103.49033880652411, 34.034467489614684], 
 zoom: 7 
      }) 
   }); 
 
 var mapconfig = [ 
        {"layer_id":"tmap_img_w","label":"天地卫星","className":"imgType"},//天地图卫星图 
        {"layer_id":"tmap_vec_w","label":"天地街道","className":"vecType"},//天地图街道图 
        {"layer_id":"tmap_img_w_h","label":"卫星混合","className":"imgType"},//天地图卫星混合图 
        {"layer_id":"tmap_ter_w","label":"天地地形","className":"terType"},//天地图地形图 
        {"layer_id":"tmap_ter_w_h","label":"地形混合","className":"terType"},//天地图地形混合图 
        {"layer_id":"osm","label":"OSM","className":"vecType"},//OSM地图 
        {"layer_id":"arcgis_img","label":"esri影像","className":"imgType"},//arcgis影像 
        {"layer_id":"arcgis_vec","label":"esri街道","className":"vecType"},//arcgis街道 
        {"layer_id":"google_img","label":"谷歌影像","className":"imgType"},//谷歌影像 
        {"layer_id":"google_vec","label":"谷歌街道","className":"vecType"},//谷歌街道 
        {"layer_id":"gaode_img","label":"高德影像","className":"imgType"},//高德影像 
        {"layer_id":"gaode_vec","label":"高德街道","className":"vecType"},//高德街道 
   ]; 
   loadSwitcherMap(mapconfig);//底图切换控件加载 
 /** 
     * 地图切换控件 
     */ 
 function loadSwitcherMap(data){ 
 //设置底图不同类型 
 var baseLayerSwitcherToolbar = new BaseLayerSwitcherToolBar({ 
 data: data 
    }); 
 document.getElementById("map").appendChild(baseLayerSwitcherToolbar.target); 
    baseLayerSwitcherToolbar.onItemClick = function(itemData,index,element){ 
 var data = itemData; 
 console.log(data); 
 switch (data.layer_id) { 
 case "tmap_img_w"://卫星 
                satelliteLayer.setVisible(true); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(false); 
                osmLayer.setVisible(false); 
                arcgisImgLayer.setVisible(false); 
                arcgisVecLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                googleVecLayer.setVisible(false); 
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
 case "tmap_vec_w"://地图 
                satelliteLayer.setVisible(false); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(true);  
                streetLabelLayer.setVisible(true);  
                terLayer.setVisible(false); 
                osmLayer.setVisible(false); 
                arcgisImgLayer.setVisible(false); 
                arcgisVecLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                googleVecLayer.setVisible(false); 
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
 case "tmap_img_w_h"://卫星混合 
                satelliteLayer.setVisible(true); 
                satelliteLabelLayer.setVisible(true);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(false); 
                osmLayer.setVisible(false); 
                arcgisImgLayer.setVisible(false); 
                arcgisVecLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                googleVecLayer.setVisible(false); 
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
 case "tmap_ter_w"://地形 
                satelliteLayer.setVisible(false); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(true); 
                osmLayer.setVisible(false); 
                arcgisImgLayer.setVisible(false); 
                arcgisVecLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                googleVecLayer.setVisible(false); 
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
 case "tmap_ter_w_h"://地形混合 
                satelliteLayer.setVisible(false); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(true);  
                terLayer.setVisible(true);  
                osmLayer.setVisible(false); 
                arcgisImgLayer.setVisible(false); 
                arcgisVecLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                googleVecLayer.setVisible(false); 
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
 case "osm"://OSM 
                osmLayer.setVisible(true); 
                satelliteLayer.setVisible(false); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(false);  
                arcgisImgLayer.setVisible(false); 
                arcgisVecLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                googleVecLayer.setVisible(false); 
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
 case "arcgis_img"://arcgis影像 
                arcgisImgLayer.setVisible(true); 
                osmLayer.setVisible(false); 
                satelliteLayer.setVisible(false); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(false);  
                arcgisVecLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                googleVecLayer.setVisible(false); 
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
 case "arcgis_vec"://arcgis街道 
                arcgisVecLayer.setVisible(true); 
                arcgisImgLayer.setVisible(false); 
                osmLayer.setVisible(false); 
                satelliteLayer.setVisible(false); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                googleVecLayer.setVisible(false); 
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
 case "google_img"://谷歌影像 
                googleImgLayer.setVisible(true); 
                arcgisVecLayer.setVisible(false); 
                arcgisImgLayer.setVisible(false); 
                osmLayer.setVisible(false); 
                satelliteLayer.setVisible(false); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(false);  
                googleVecLayer.setVisible(false); 
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
 case "google_vec"://谷歌影像 
                googleVecLayer.setVisible(true); 
                googleImgLayer.setVisible(false); 
                arcgisVecLayer.setVisible(false); 
                arcgisImgLayer.setVisible(false); 
                osmLayer.setVisible(false); 
                satelliteLayer.setVisible(false); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(false);  
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
 case "gaode_img"://高德影像 
                gaodeImgLayer.setVisible(true); 
                googleVecLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                arcgisVecLayer.setVisible(false); 
                arcgisImgLayer.setVisible(false); 
                osmLayer.setVisible(false); 
                satelliteLayer.setVisible(false); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(false);  
                gaodeVecLayer.setVisible(false); 
 break; 
 case "gaode_vec"://高德街道 
                gaodeVecLayer.setVisible(true); 
                gaodeImgLayer.setVisible(false); 
                googleVecLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                arcgisVecLayer.setVisible(false); 
                arcgisImgLayer.setVisible(false); 
                osmLayer.setVisible(false); 
                satelliteLayer.setVisible(false); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(false);  
 break; 
 default: 
                satelliteLayer.setVisible(true); 
                satelliteLabelLayer.setVisible(false);  
                streetLayer.setVisible(false);  
                streetLabelLayer.setVisible(false);  
                terLayer.setVisible(false);  
                osmLayer.setVisible(false); 
                arcgisImgLayer.setVisible(false); 
                arcgisVecLayer.setVisible(false); 
                googleImgLayer.setVisible(false); 
                googleVecLayer.setVisible(false); 
                gaodeImgLayer.setVisible(false); 
                gaodeVecLayer.setVisible(false); 
 break; 
        } 
    };

完整的源码demo下载在链接文章尾部：

openlayers6地图切换展示(附源码下载) － 小专栏​xiaozhuanlan.com
1eff3a67f87094e749b1263decca6fcd.png

对本专栏感兴趣的话，可以关注一波

GIS之家作品店铺：GIS之家作品店铺
GIS之家源码咨询：GIS之家webgis入门开发系列demo源代码咨询

陽光院景仁
关注
python下载谷歌地图瓦片_Python地图可视化之Folium更换地图瓦片(Map Tiles)
weixin_39684495的博客
12-11 1788
关于Folium库的基础使用，可以查看官方文档，或者很多知友、博客的分享，这里不再详述。本文主要以一个简单的示例讲解如何更换底图，以及进行坐标变换。1.坐标变换地球上同一个地理位置的经纬度，在不同的坐标系中，会有少量偏移，国内目前常见的坐标系主要分为三种：地球坐标系——WGS84：常见于GPS设备，Google地图等国际标准的坐标体系。火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体...
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
热门推荐
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
Openlayers切换底图，并保持原有矢量数据显示
11-05
在做webgis应用过程中，难免遇到使用多种地图作为底图，比如天地图、谷歌地图、高德地图等，由于各地图使用的坐标系不一致，所以在动态切换底图时，通常需要处理地图容器中已存在的矢量数据，接下来我们以天地图和谷歌地图的切换，并保持地图容器中的矢量数据正常显示为例来说明。本文仅使用HTML+JS+CSS+Openlayers进行演示。 博客介绍地址：https://blog.csdn.net/qq_27358213/article/details/109503745
openlayer实现切换底图功能
weixin_59855825的博客
03-06 538
在 OpenLayers 中，如果您想要将新添加的图层放在当前地图中的所有图层的第一个位置，可以使用 insertAt() 方法来实现。需要注意的是，insertAt() 方法的第一个参数是插入的位置，可以是任何数字，表示新的图层应该插入到当前图层集合的哪个位置。在这个示例中，我们通过 getLayers() 方法来获取当前地图中的所有图层，并使用 insertAt() 方法将新的图层对象插入到第一个位置。使用上述方法，您可以将新的图层添加到当前地图中所有图层的第一个位置，以实现切换底图的功能。
OpenLayers 图层切换器（ol-layerswitcher）使用教程
最新发布
gitblog_01134的博客
08-13 340
OpenLayers 图层切换器（ol-layerswitcher）使用教程 ol-layerswitcherLayer control for OpenLayers项目地址:https://gitcode.com/gh_mirrors/ol/ol-layerswitcher 项目目录结构及介绍 ol-layerswitcher/ ├── dist/ │ ├── ol-layerswitch...
Openlayers layer 切换底图
技术分享
03-26 2333
我的openLayers案例地址：http://cyclv.gitee.io/openlayers/ 主要记录一个地图切换 layer setSource （推荐） 设置图层源。 let google = new XYZ({ url:'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBl...
openlayers地图切换
lf_morning的博客
07-26 2305
代码：https://github.com/lixiufei/openlayers 预览：https://lixiufei.github.io/openlayers/ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>openlayers</t...
OpenLayers3（三）混合地图切换
天空影
09-17 5276
因为OpenLayers中没有提供混合地图这个api，然后项目要求需要和百度地图一样有混合地图这个功能，然后通过new ol.layer.Tile这个api找到了一些思路。 附：OpenLayers初始地图 思路 1、需要两个完整的切片图层来达到可以混合地图切换功能 2、初始化地图博客中就有new ol.layer.Tile并且是通过这个来引入街道图切片 3、new ol.layer.T...
openlayers5加载谷歌地图.zip
06-19
OpenLayers 是一个流行的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括WMS、WMTS以及谷歌地图等。在本案例中，我们讨论的是如何利用OpenLayers 5来加载谷歌地图。对于初学者来说，...
leaflet.js获取API地图代码(支持多种地图切换)
06-11
4. 层控制（Layer Control）：使用`L.control.layers()`创建一个图层控制，让用户可以在界面上自由切换地图源。例如： ```javascript var control = L.control.layers({ '谷歌地图': googleLayer, '高德地图': ...
java三维地图计算,Cesium专栏-裁剪分析（基于3dtiles模型，附源码下载）
weixin_32401075的博客
03-14 719
Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。关于裁剪裁剪在PS下大概都很熟悉，框出一个矩形选择自己想要的部分就是裁剪功能了，那么，在三维里，在Cesium中，可以模拟这种动态裁剪模型效果，查看浏览模型在某一个...
openlayers3-切换WMSsupermap服务底图
09-04
openlayers3-切换WMSsupermap服务底图 openlayers3-切换WMSsupermap服务底图 openlayers3-切换WMSsupermap服务底图
openlayers3切换wms服务底图控件
09-03
openlayers3切换wms服务底图控件
OpenLayers实现图层切换控件
10-14
主要为大家详细介绍了OpenLayers实现图层切换控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayer系列：openlayer中切换卫星图和普通地图，默认普通地图，点击切换卫星图，并且地图掩模显示部分区域
浪潮行舟_chenjin2136
06-16 1071
单击按钮时，代码将检查当前图层是普通地图图层还是卫星图层，并将其替换为另一个图层。openlayer中切换卫星图和普通地图，默认普通地图，点击切换卫星图，并且地图掩模显示部分区域。可以使用OpenLayers的VectorLayer类创建一个掩模图层，并将其添加到地图中。其中，mapLayer 是普通地图图层，satelliteLayer 是卫星地图图层。这将在地图上添加一个黑色的矩形，覆盖住纽约市的区域，从而实现了掩盖的效果。可以为切换按钮添加一个点击事件监听器，以切换地图图层。创建普通地图和卫星图层。
openlayers缩放地图切换图层
qq_41560089的博客
09-11 1574
openlayers缩放地图切换地图展示
vue openlayers——图层控制 切换底图
M__O__M的博客
08-16 2433
vue openlayers——图层控制 切换底图
openlayers3 切换底图控件
会飞的程序猿的博客
09-03 4709
效果如以下 1影像图 2.平面图 具体代码     ol.control.LayerSwitcher = function(opt_options) {         var options = opt_options || {};         var tipLabel = options.tipLabel ?         option
openlayers在线谷歌地图
07-12
要在OpenLayers中加载在线谷歌地图，可以通过使用OpenLayers的TileLayer和XYZ源来实现。以下是一个简单的示例代码： ```javascript <!DOCTYPE html> <title>OpenLayers with Google Maps ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值