openlayer 动态切换瓦片url

最新推荐文章于 2023-03-23 19:28:16 发布

夏_克

最新推荐文章于 2023-03-23 19:28:16 发布

阅读量371

点赞数

文章标签： css javascript html

原文链接：https://blog.csdn.net/weixin_38307752/article/details/84482251

版权

<!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);
			else
				layers[l].setVisible(false);
			}
		}
		
		var map = new ol.Map({
			layers: layers,
			target: "map",
			view: new ol.View({
				center: [0, 0],
				zoom: 1
			})
		});
	</script>
</html>

夏_克

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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"> &.
复制链接

扫一扫