openlayer 动态切换瓦片url
生活随笔
收集整理的這篇文章主要介紹了
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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： avast! Professional
- 下一篇： AOJ-AHU-OJ-670 Tyrio