OpenLayer加载天地图

最新推荐文章于 2024-08-15 14:02:26 发布

闫先生

最新推荐文章于 2024-08-15 14:02:26 发布

阅读量255

点赞数 1

分类专栏： vue前端栈文章标签： javascript css html5 openlayer

本文链接：https://blog.csdn.net/yanmh007/article/details/117918536

版权

vue前端栈专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客展示了如何创建一个HTML文件，并利用OpenLayers库在网页中嵌入天地图服务。通过设置XYZ图层源，实现了显示影像图层（img_w）和矢量图层（cia_w），地图中心位于（104.07,30.7），初始缩放级别为5。

摘要由CSDN通过智能技术生成

登录天地图的官方网站,创建一浏览器应用，获取其中的键值，

（https://www.tianditu.gov.cn/）

创建一index.html文件并编辑，将如下代码复制到其中，保存，双击打开index.html浏览器访问

<!doctype html>  
<html lang="en">  
  <head>  
    <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.css" rel="stylesheet"> 
    <style>  
      .map {  
        height: 800px;  
        width: 100%;  
      }  
    </style>  
    <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.js"></script>
    <title>OpenLayers 3 example</title>  
  </head>  
  <body>  
    <h2>My Map</h2>  
    <div id="map" class="map"></div>  
    <script type="text/javascript">  
      var map = new ol.Map({  
        target: 'map',  
        layers: [  
          new ol.layer.Tile({  
            source: new ol.source.XYZ({url: "http://t3.tianditu.com/DataServer?T=img_w&tk=8ab56038a0e4a31f936efd99726a1573&x={x}&y={y}&l={z}"})  
          }),
		 
		  new ol.layer.Tile({  
            source: new ol.source.XYZ({url: "http://t1.tianditu.com/DataServer?T=cia_w&tk=8ab56038a0e4a31f936efd99726a1573&x={x}&y={y}&l={z}"}),
          }),
		    		  
        ],  
        view: new ol.View({
		projection: ol.proj.get("EPSG:4326"),		
           center:[104.07, 30.7],   //初始化地图中心点
          zoom: 5  
        })  
      });  
    </script>  
  </body>  
</html>