【WebGIS初学到入职】（四）实现底图切换（附：常用在线瓦片地图服务链接）

最新推荐文章于 2024-07-29 14:40:26 发布
最新推荐文章于 2024-07-29 14:40:26 发布
阅读量1.6k 收藏 12
点赞数 3
分类专栏： 【WebGIS初学到入职】 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ReBeX/article/details/120531100
版权

一、前言

从上一条博客【WebGIS初学到入职】（三）从Web地图实例出发 ，我们成功得在网页上展示了一张OSM的地图。那么今天，我们依靠修改所展示图层的方式，在OpenLayers来完成底图切换的功能。并且我会在章末收集汇总展示我们常用的在线瓦片底图服务的URL。

二、实现方法

有很多方法可以实现底图（图层）的切换，而这里我介绍最简单的一种：
利用OpenLayers提供的addLayer()和removeLayer()来添加和移除图层。

下面这个例子就是实现天地图、OSM、Stamen三者的切换
请添加图片描述

主要思路

其实就是通过点击某个按钮之后，删除自己不要的图层，留下自己想展示的图层就好了。

然后附上代码：
在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGIS平台</title>
    <link rel="stylesheet" href="/css/ol.css">
    <link rel="stylesheet" href="/css/map.css">
    <script src="/js/ol.js"></script>
    <script src="/js/layerset.js"></script>
    <script src="/js/map.js"></script>
    <script src="/js/layerchange.js"></script>
    <script type="text/javascript">
        window.onload = function () {map();}
    </script>
</head>
<body>
    <!-- 这里是Map容器，放地图的 -->
    <div id="map"></div>
    <!-- 这里放底图图标的 -->
    <div class="basemap" id="basemap0">
        <a id="tianditu" title="天地图" href="javascript:;" onclick="tiandituO()"></a>
        <a id="osm" title="OpenStreetMap" href="javascript:;" onclick="osmO()"></a>
        <a id="stamen" href="javascript:;" onclick="stamenO()"></a>
        <span>当前底图</span>
    </div>    
</body>
</html>

map.css

#map{
    position: fixed;
    width: 100%;
    height: 100%;
}

.basemap{
    flex-direction: row-reverse;
    justify-content: flex-end;
    z-index: 999;
    position: fixed;
    width: 100px;
    height: 80px;
    right: 1rem;
    bottom: 1rem;
    transition: all .1s;
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
    -ms-transition: all .1s;
    -o-transition: all .1s;
    overflow: hidden;
    background-image: url(/img/tianditu.png);
    background-repeat: no-repeat;
    background-position: right;
}
.basemap:hover{
    width: 620px;
}
.basemap span{
    position: fixed;
    right: 55px;
    bottom: 110px;
    color: white;
    background-color: rgba(0, 0, 0, 0.445);
    opacity: 0;
    cursor: default;
}
.basemap:hover span{
    opacity: 1;
}

.basemap a{
    float: right;
    right: 120px;
    position: relative;
    width: 100px;
    height: 80px;
}


.basemap a:nth-child(1){
    background: url(/img/tianditu.png) no-repeat;
    background-position: center;
    background-size: contain;
}
.basemap a:nth-child(2){
    background: url(/img/osm.png) no-repeat;
    background-position: center;
    background-size: contain;
}
.basemap a:nth-child(3){
    background: url(/img/stamen.png) no-repeat;
    background-position: center;
    background-size: contain;
}
.basemap a:nth-child(4){
    background: url(/img/gaode.png) no-repeat;
    background-position: center;
    background-size: contain;
}

.basemap a:hover{
    box-shadow:inset 0 0 0 2000px rgba(255,0,150,0.3);
}

layerset.js （天地图要自己去申请Key，个人使用的话流程简单、免费）

/*  
*   设置图层信息
*/
let td_vec, td_cva, td_img, td_cia;
let osm,stamen;

function layerSet(){
     td_vec = new ol.layer.Tile({
        title: "天地图矢量图层注记",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=这里放你的KEY",
            attributions: "使用天地图",
            wrapX: false
        }),
        preload: Infinity
    });
     td_cva = new ol.layer.Tile({
        title: "天地图矢量图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=这里放你的KEY",
            wrapX: false
        }),
        preload: Infinity
    });
     td_img = new ol.layer.Tile({
        name: "天地图影像图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=这里放你的KEY",
            wrapX: false
        })
    });
     td_cia = new ol.layer.Tile({
        name: "天地图影像注记图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=这里放你的KEY",
            wrapX: false
        })
    });

    osm = new ol.layer.Tile({
        title: "开发街道地图",
        source: new ol.source.OSM()
    });
    
    stamen = new ol.layer.Tile({
        title: "Stamen地图",
        source: new ol.source.Stamen({ layer: 'watercolor' }),
    });
};

map.js

var map1;
/*  
*   主图设置
*/
function map(){
  layerSet()
map1 = new ol.Map({
    target: 'map', //地图容器div的id
    loadTilesWhileInteracting: true,
    layers: [],
    view: new ol.View({
        center: [12622513, 2636878], //地图初始中心点
        zoom: 15,  //地图初始显示级别
        // minZoom: 1,
        maxZoom: 18
    }),
    controls: ol.control.defaults({attribution:false,zoom:false}).extend([])
});

// 加入初始显示的图层
map1.addLayer(td_cva);
map1.addLayer(td_vec);
map1.addLayer(td_img);
map1.addLayer(td_cia);
};

layerchange.js

function tiandituO(){
    map1.removeLayer(osm);
    map1.removeLayer(stamen);
    map1.addLayer(td_cva);
    map1.addLayer(td_vec);
    map1.addLayer(td_img);
    map1.addLayer(td_cia);
    document.getElementById('basemap0').style.background = 'url(/img/tianditu.png) no-repeat right'
  };
  
  function osmO(){
    map1.removeLayer(stamen);
    map1.removeLayer(td_cva);
    map1.removeLayer(td_vec);
    map1.removeLayer(td_img);
    map1.removeLayer(td_cia);
    map1.addLayer(osm);
    document.getElementById('basemap0').style.background = 'url(/img/osm.png) no-repeat right'
  };

  function stamenO(){
    map1.removeLayer(osm);
    map1.removeLayer(td_cva);
    map1.removeLayer(td_vec);
    map1.removeLayer(td_img);
    map1.removeLayer(td_cia);
    map1.addLayer(stamen);
    document.getElementById('basemap0').style.background = 'url(/img/stamen.png) no-repeat right'
  };

LOGO

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

三、关于代码的说明

其实地图切换是一个很简单的功能，但是我分了这么多个文件出来，其实就是为了方便自己学习，
而且方便自己管理。（好吧，其实主要原因还是自己学习前端的时间太短，不知道规范，啥都不懂）
反正我就是这么做了（双手叉腰），虽然工作的时候肯定不能这么整，但是要知道现在我还处于学习阶段，怎么做能更适合我自己学习那才是硬道理。
当然，如果能有大佬提出建议就更好了，我一定听，我一定学。

四、其他的切换图层的思路

  1. 通过visible:false来控制图层是否显示，将各个数据源的url放在一个总的数据源对象里。
  2. 通过事件委托，在单击切换底图的按钮时，配合switch语句来setVisible(true)

五、常用在线瓦片地图服务

以ol.source.XYZ方式直接请求：

   // 例子：
   var googleMap = new ol.layer.Tile({
        title: "谷歌地图",
        source: new ol.source.XYZ({
            url: "http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z} ",
            wrapX: false
            visible: true
        })
    });

  • 天地图：天地图API

  • 高德地图：url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',

  • ChinaOnlineStreetPurplishBlue：url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',

  • 谷歌地图（中国）：url: "http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z} ",

推荐看看这个博客，超级全： https://www.cnblogs.com/amadoGrowers/p/13631127.html

ReBeX
关注
专栏目录
全功能瓦片地图下载（百度、高德、谷歌、腾讯、微软等等）
02-12
全功能瓦片地图下载（百度、高德、谷歌、腾讯、微软等等），亲测可用
全球在线瓦片底图服务分享WMTS/MapServer
gis收藏家的博客
12-11 2092
以大家最常用的ArcMap添加在线地图服务为例：ArcMap中的地图服务指通过ArcMap软件访问在线或本地的地图数据，并在ArcMap中显示这些地图数据的功能。其中包含高德(AMap)、OSM、OCM、Google、Esri、USGS、天地图(Tianditu)等多家地图服务厂商的影像、街道、地形在线底图服务。目前，谷歌地图和百度地图是最常用的在线地图服务。在线地图服务的原理是通过互联网技术，将地图数据存储在服务器上，用户通过浏览器或地图客户端软件访问地图服务器，获取地图数据，并在本地显示地图。
5个ArcGIS图源分享
最新发布
07-29 430
10米等高线地图这是一个有10米等高线和山体阴影的地形图数据，该图源专注于地形展示，通过10米等高线和山体阴影的精确绘制，为地理学者、地质勘探人员以及户外爱好者提供了详尽的地形信息。高德大字体地图是在高德电子的基础上，通过放大标注字体，使得这些用户能够更加方便地浏览地图信息，提高了地图的可访问性和包容性。高德路网，只是提取了高德电子的路网，可以与其他卫星地图进行叠加，为用户在规划路线、分析交通状况等方面提供了有力的支持。本文为你分享了5个ArcGIS图源，以及各个图源的出处与风格介绍。数据是GIS的血液。
WEBGIS切换地图底图BasemapToggle(在底图之间切换)
shankedixin的博客
09-11 556
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ch
WebGIS 之 ol实现图层切换
2302_78438891的博客
06-07 154
在这个例子中，地图有两个图层：OpenStreetMap和Bing Map。通过HTML中的复选框，用户可以控制这两个图层的显示和隐藏。当用户选中某个复选框时，相应的图层变为可见；当用户取消选中时，相应的图层变为隐藏。
瓦片服务: 地图切片链接
hugoandpig的专栏
08-23 3021
google地图 　　| mt0~mt3 　　|--普通图 --- > http://mt3.google.cn/vt/lyrs=m@177000000&hl=zh-CN&gl=cn&src=app&x=1687&y=776&z=11&s=Galil 　　| 　　|--地形图 --- > http://mt3.google.cn/vt/lyrs=t@128,r@177000000&hl
开源 WebGIS：地图发布与地图服务_v2.pdf
03-14
开源WebGIS是通过使用开源软件来实现地图的发布和地图服务的技术。MapServer和Leaflet是当前流行的开源WebGIS应用，MapServer擅长于地图服务的发布，Leaflet则是一种基于HTML5的轻量级地图前端展示库。在开源WebGIS...
WebGIS教程：地图发布与地图服务.zip
05-18
总的来说，WebGIS教程中的“地图发布与地图服务”涵盖了从数据处理到服务部署、客户端应用开发的全过程，学习这些内容有助于理解如何构建和维护一个高效、互动的在线地图系统。通过深入理解和实践，你可以为各类应用...
必应地图卫星影像瓦片（0-10级）
03-13
【必应地图卫星影像瓦片】是WebGIS领域中一种常用的数据资源，它是由必应地图服务提供的全球卫星影像切片。这些切片按照特定的网格系统和层级结构组织，通常用于构建交互式地图应用，使得用户可以在网页上查看高清的...
WebGIS 瓦片地图引擎实现之——地图瓦片加载计算原理介绍
07-26 2389
在地图瓦片技术使用之前，用户使用在线地图，一般都是客户端把将要显示的地理范围传送到服务端，服务器端将地理范围内的地理数据都查询出来，然后在服务端按照预先定义的专题地图的配置样式渲染成地图图片，再返回给客户端浏览，这也就是 OGC（地理信息联盟）标准的 WMS（Web Map Service）服务。...
webgis 行政图报错_开源WebGIS：地图发布与地图服务
weixin_34355977的博客
02-22 493
前言第1章 WebGIS 的概念与技术介绍1.1 从地图到 WebGIS1.1.1 地图与数字地图1.1.2 数字地图的特点1.1.3 WebGIS 的起源和发展1.1.4 WebGIS 技术现状1.1.5 WebGIS 的未来展望1.2 WebGIS 的概念与特点1.2.1 WebGIS 的概念1.2.2 WebGIS 的特征1.2.3 WebGIS能和应用1.2.4 W...
Google 瓦片地图 浏览
05-18
一个GoogleMap瓦片地图浏览工具，能够显示瓦片编号，浏览后的瓦片自动存在Tiles目录中。工具在不断完善中，有需要源码的联系本人。软件版本信息中哦
全国地图瓦片下载器.rar
08-08
这是有一款全国下载器，非常强大，可以制作离线地图，用于开发，瓦片地址。
Tilehut.js：简单而温馨的在线地图瓦片服务器
gitblog_00070的博客
06-16 261
Tilehut.js：简单而温馨的在线地图瓦片服务器 tilehut A modest, but cozy home for your map tiles 项目地址: https://gitcode.com/gh_mirrors/ti/tilehut ...
关于WebGIS开源解决方案的探讨
weixin_34041003的博客
12-26 242
 文章版权由作者李晓晖和博客园共有，若转载请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/。 1.背景 公司目前的多数项目采用的是ArcGIS产品+Oracle+WebLogic/Tomcat/APUSIC/WebShpere这样的架构。由于公司从事的是政府项目，甲方单位普遍均采购有以上产品，所以很多时候忽略购买以上产品所需要的费用。并且很多项目的推广，A...
CesiumJS【Basic】- #002 加载在线瓦片地图数据
AlanL的专栏
06-16 319
cesiumjs 加载各类在线地图数据
瓦片地图的URL解读
热门推荐
a345203172的专栏
03-05 1万+
之前在做百度地图应用时候一直没弄明白瓦片地图的坐标跟URL是如何挂钩的，官网提供的API里面也没详细的解说，我一直没弄明白原理，今天无意间再把这个加载魔兽地图的demo翻出来看看，后面自己动手做了一下，才明白其中的关系，这个仅适用于像我这样基础不好的初学者，这个问题虽然不难，但是容易困惑，记下来引以为戒。 我是看JS的API。 先看原demo <!DOCTYPE html> &l...
webgis图层操作
weller_84195的专栏
11-05 907
 以下是针对图层设置其是否显示的代码，这些代码可以结合treeview控件来实现对地图图层的整体控制功能：public void setLayerVisible(int LayerId,PictureBox PictureBox,Boolean m_bVisible)        {            String m_sDataFrame = map.GetDefaultMapName()
百度地图API-实现底图切换
weixin_45602368的博客
07-30 1407
底图切换 下一期项目有一项优化叫做底图切换，客户可以自己选择看不看见街道图这个东西，研究了一下，简单基本实现demo。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值