webgis openlayers入门

最新推荐文章于 2025-05-13 15:11:40 发布

FrankHuang888

最新推荐文章于 2025-05-13 15:11:40 发布

阅读量87

点赞数 3

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/qq_33323974/article/details/146018607

版权

HTML5 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>第一次Openlayers显示地图</title>

    
   
   

    </script>
    <link rel="stylesheet" href="./js/openlayers/ol.css" type="text/css">
    <script src="./js/openlayers/ol.js"></script>
    <style>
          .map {
            width: 100%;
            height: 100%;
          }
          
          
        </style>
    
    
</head>
<body>
    
        <div id="map" class="map" tabindex="0"></div>
       <div id="mouse-position" style="float:left;position:absolute;bottom:5px;width:200px;height:20px"></div>
    
       
    <script>
	  //实例化鼠标位置控件
      var mousePositionControl = new ol.control.MousePosition({
	     coordinateFormat:ol.coordinate.createStringXY(4),
		 projection:'EPSG:4326',
		 className:'custom-mouse-position',
		 target:document.getElementById('mouse-position'),
		 undefinedHTML:'&nbsp;'
	  });
     //实例化比例尺控件
	 var scaleLineControl = new ol.control.ScaleLine({
	    units:'metric'
	 });
      
      
      
      const map = new ol.Map({
          target: 'map',
          layers: [
			  new ol.layer.Tile({
			                      source: new ol.source.XYZ({
			                          url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', // 高德地图瓦片服务URL，需要替换为你的API密钥和样式ID
			                          attributions: '© <a href="https://lbs.amap.com/">Amap</a>'
			                      })
			                  })
		  ],
          view: new ol.View({
			                center: [0, 0], 
		                    zoom: 2,
							}),// EPSG:3857坐标
		  controls:
		    ol.control.defaults().extend([mousePositionControl,scaleLineControl,new ol.control.FullScreen()])
		
			
      }); 
      
    </script>
</body>
</html>

第一次写webgis openlayers代码，加载高德地图，添加控件。