Openlayers加载在线地图

最新推荐文章于 2025-07-06 23:39:56 发布

hujianghua2012New

最新推荐文章于 2025-07-06 23:39:56 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： GIS 文章标签： GIS Openlayers

本文链接：https://blog.youkuaiyun.com/hjhandhf/article/details/51648603

GIS 专栏收录该内容

5 篇文章

订阅专栏

本文档介绍了如何使用Openlayers库在网页中加载在线GIS地图。通过展示html（map.html和test.html）和js（test.js）代码片段，详细说明了实现这一功能的步骤和技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码一map.html：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Map</title>	
    <script type="text/javascript" src="js/OpenLayers-2.13.1/OpenLayers.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="js/test.js"></script> 
  </body>
</html>

html代码二test.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load map</title>
<script type="text/javascript">
	function init(){
		var subframe = document.getElementById("subframe");
		subframe.contentWindow.initMap();
	}
</script>   
</head>
<body onload="init()">
<iframe id="subframe" src="map.html" ></iframe>
</body>
</html>

js代码test.js

function initMap(){
    Map = new OpenLayers.Map('map');
    Map.addLayers(getGaodeMap());
    //Map.addLayers(getGoogleMap());
    Map.zoomTo(1);
}
function getGaodeMap(){
    var gdlayer = new OpenLayers.Layer.XYZ("高德地图", [  
    "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",  
    "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",  
    "http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",  
    "http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}"  
	], {  
	    isBaseLayer: true,  
	    visibility: true,  
	    displayInLayerSwitcher: true  
	});
	return [gdlayer];
}