Openlayers显示-360到360的网格图层

最新推荐文章于 2024-06-26 19:29:10 发布

cwr888

最新推荐文章于 2024-06-26 19:29:10 发布

阅读量485

点赞数

分类专栏： JavaScript openlayers GIS 文章标签： html javascript html5 openlayer

本文链接：https://blog.csdn.net/cwr888/article/details/121147842

版权

GIS 同时被 3 个专栏收录

26 篇文章 4 订阅

订阅专栏

JavaScript

23 篇文章 0 订阅

订阅专栏

openlayers

7 篇文章 0 订阅

订阅专栏

Openlayers显示-360到360的网格图层，效果如下图：

实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Openlayers显示-360到360的网格图层</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" />
		<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js" ></script>
		<style>
			body,html,div,ul,li,iframe,p,img{
				border:none;
				padding: 0;
				margin: 0;
				font-size: 14px;
				font-family: "微软雅黑";
			}
			#map{
				height: 100%;
				width: 100%;
				position: absolute;
			}
			/*图层控件的样式设置*/
			.layerControl{
				position: absolute;
				bottom: 5px;
				min-width: 150px;
				max-height: 600px;
				right: 0px;
				top: 30px;
				z-index: 2001;
				color: #FFFFFF;
				background-color: #7B98BC;
				border-width: 10px;
				border-radius: 10px;
				border-color: #000#000#000#000;
			}
			.layerControl.title{
				font-weight: bold;
				font-size: 15px;
				margin:10px;
				
			}
			.layerTree li{
				list-style: none;
				margin: 5px 10px;
			}
			label{
				display: block;
				left: 15px;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div id="map">
			<div class="layerControl" id="layerControl">
				<div class="title">
					<label>图层列表</label>
				</div>
				<ul id="layerTree" class="layerTree"></ul>
			</div>
		</div>
		<script>
			//Map中的图层数组
			var layer=new Array();
			//图层名称数组
			var layerName=new Array();
			//图层可见属性数组
			var layerVisibility=new Array();
			function loadLayersControl(map,id){
				//图层列表容器
				var treeContent=document.getElementById(id);
				//获取地图中所有数组
				var layers=map.getLayers();
				for(var i=0;i<layers.getLength();i++){
					//获取每个图层的名称、是否可见属性
					layer[i]=layers.item(i);
					layerName[i]=layer[i].get('name');
					layerVisibility[i]=layer[i].getVisible();
					//新增li元素，用来保存图层
					var elementLi=document.createElement('li');
					//添加子节点
					treeContent.appendChild(elementLi);
					//创建复选框元素
					var elementInput=document.createElement('input');
					elementInput.type="checkbox";
					elementInput.name="layers";
					elementLi.appendChild(elementInput);
					//创建lable元素
					var elementLable=document.createElement('lable');
					elementLi.appendChild(elementLable);
					//创建图层名称
					setInnerText(elementLable,layerName[i]);
					elementLi.appendChild(elementLable);
					//设置图层默认显示状态
					if(layerVisibility[i]){
						elementInput.checked=true;
					}
					//为checkbox添加变更事件
					addChangeEvent(elementInput,layer[i]);
				}
			}
			/*
			 为checkbox绑定变更事件
			 * */
			function addChangeEvent(element,layer){
				element.onclick=function(){
					if(element.checked){
						//显示图层
						layer.setVisible(true);
					}else{
						//不显示图层
						layer.setVisible(false);
					}
				};
			}
			/*
			 动态设置元素文本内容（兼容）
			 * */
			function setInnerText(element,text){
				if(typeof element.textContent=="string"){
					element.textContent=text;
				}else{
					element.innerText=text;
				}
			}

			var tileLayer = new ol.layer.Tile({
			  name:"OSM",
			  extent:[-180.0, -90.0, 180.0, 90.0],
			  source: new ol.source.OSM(),
			  wrapX:true
			});
			
			//设置地图投影
			var projection = new ol.proj.Projection({
				code: 'EPSG:4326',
				units: 'degrees',
				axisOrientation: 'neu',
				extent:[-360.0, -90.0, 360.0, 90.0],//范围
				worldExtent:[-360.0, -90.0, 360.0, 90.0],//范围
			});

			//网格地图
			var graticule = new ol.layer.Graticule({
				name:"地图网格",
				opacity:1,//透明度，默认为1
				visible:true,//是否显示，默认true
				zIndex:1,//图层渲染的Z索引,默认按加载顺序叠加
				extent:[-360.0, -90.0, 360.0, 90.0],
				targetSize:100,//单元格像素大小,默认100
				showLabels:true,//为每条刻度线绘制一个带有各自纬度/经度的标签,默认true
				strokeStyle: new ol.style.Stroke({//用于绘制刻度线的样式
					color: 'rgba(255,0,0,1)',//线条颜色
					width: 2,//线条宽度
					lineDash: [4]//虚线模式，默认值为null，无虚线
				}),
				wrapX:true
			});
			
			//实例化map对象
			var map=new ol.Map({
				//地图容器div的ID
				target:'map',
				//在地图中加载的图层
				layers:[tileLayer,graticule],
				//地图视图设置
				view:new ol.View({
					//地图中心点
					//center:[13576194,4788260],
					center: [104,33],
					projection: projection,
					//地图初始显示级别
					zoom:3,
					//resolutions: resolutions,//resolutionsWay,
					minZoom:0,
					maxZoom:21,
					//multiWorld:true,
					constrainResolution:true
				}),
				controls:ol.control.defaults().extend([
					new ol.control.MousePosition({
						target:document.getElementById('mouse-position')
					})
				])
			});
			//加载图层列表的数据
			loadLayersControl(map,"layerTree");
		</script>
	</body>
</html>