openlayer 动态切换瓦片url

<!DOCTYPE html>
<html><head><title>栅格瓦片切换</title><meta charset="utf-8"><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="OpenLayers/v5.2.0-dist/ol.css" type="text/css"><style>.map {width: 100%;height: 100%;position: relative;}.buttons {position: absolute;left: 0px; top: 0px;float: left;margin: 0px;padding: 0px;}.buttons > li {background: #990033;list-style-type: none;height: 25px;color: white;padding: 5px;}body {margin: 0px;}</style></head><body><div id="map" class="map"></div><ul class="buttons"><li onclick="tileClick(this)">OpenLayers默认地图</li><li onclick="tileClick(this)">谷歌地图</li><li onclick="tileClick(this)">天地图</li><li onclick="tileClick(this)">ArcGIS影像地图</li></ul></body><script src="OpenLayers/v5.2.0-dist/ol.js"></script><script type="text/javascript">var mapSources = {OpenLayers默认地图: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",谷歌地图: "http://mt2.google.cn/vt/lyrs=m&scale=1&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}",天地图: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}",ArcGIS影像地图: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"};var layers = [];for (var l in mapSources) {let visible = false;if (l === "谷歌地图")visible = true;layers.push(new ol.layer.Tile({visible: visible,title: l,source: new ol.source.XYZ({url: mapSources[l]})}));}function tileClick(e) {for (let l = 0; l < layers.length; l++) {if (layers[l].values_.title === e.innerText)//主要是这里的一个切换layers[l].setVisible(true);elselayers[l].setVisible(false);}}var map = new ol.Map({layers: layers,target: "map",view: new ol.View({center: [0, 0],zoom: 1})});</script>
</html>

openlayer 动态切换瓦片url相关推荐

在openlayer中对瓦片地图进行平移
失踪人口回归. 这次给大家介绍的是在openlayer中对在线瓦片地图进行平移.可以解决将高德/百度瓦片地图的偏移问题. 适用的场景:当某个在线瓦片地图的坐标系与我们需要的底图坐标系不同,我们很难对每 ...
Proxool配置多数据源动态切换
2019独角兽企业重金招聘Python工程师标准>>> 前段时间遇到多数据源动态切换问题,总结一下,做个记录,以备后续之需! 首先附上proxool连接池的配置方法:http://3 ...
springboot多数据源动态切换和自定义mybatis分页插件
1.配置多数据源增加druid依赖完整pom文件数据源配置文件 route.datasource.driver-class-name= com.mysql.jdbc.Driver route.d ...
spring boot 切换 oracle 和 mysql_spring-boot多数据源动态切换
作者:码农教程出自:码农教程原文:manongjc.com/detail/14-ucsldoihyzmwcui.html 当项目中存在多数据源时,就涉及到数据源的动态切换,通过研究,特此记录一下. ...
SpringBoot+AOP实现多数据源动态切换
SpringBoot+AOP实现多数据源动态切换背景设计总体思路步骤背景系统后端需要访问多个数据库,现有的数据库连接配置写入配置文件中.后端需要从一个数据库的配置表里动态的读取其它mysql ...
Spring+Mybatis多数据源配置（四）——AbstractRoutingDataSource实现数据源动态切换
欢迎支持笔者新作:<深入理解Kafka:核心设计与实践原理>和<RabbitMQ实战指南>,同时欢迎关注笔者的微信公众号:朱小厮的博客. 欢迎跳转到本文的原文链接:https: ...
Spring-Boot + AOP实现多数据源动态切换
2019独角兽企业重金招聘Python工程师标准>>> 最近在做保证金余额查询优化,在项目启动时候需要把余额全量加载到本地缓存,因为需要全量查询所有骑手的保证金余额,为了不影响主数据 ...
Spring 配置多个数据源，并实现动态切换
1.配置两个不同的数据源,如下  <bean id="testDataSource1" class="com.alibab ...
动态切换数据源(spring+hibernate)
起因:在当前我手上的一个项目中需要多个数据源,并且来自于不同类型的数据库... 因为很多历史原因.这个项目的住数据源是MySQL,整个系统的CURD都是操作的这个数据库. 但是还有另外两个用于数据采集 ...

openlayer 动态切换瓦片url

openlayer 动态切换瓦片url相关推荐

最新文章

热门文章