Openlayers顯示瓦片網(wǎng)格信息的方法

更新時間：2020年09月28日 11:50:14 作者：桃李不言_下自成蹊

這篇文章主要為大家詳細介紹了Openlayers顯示瓦片網(wǎng)格信息，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Openlayers顯示瓦片網(wǎng)格信息的具體代碼，供大家參考，具體內(nèi)容如下

1、新建一個html頁面，引入ol.js文件，然后在body中創(chuàng)建一個div標簽，用來作為地圖加載的容器；

2、代碼實現(xiàn)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <script src="../lib/ol/ol.js"></script>
 <script type="text/javascript">
 window.onload = function () {
  //實例化OSM圖層數(shù)據(jù)源對象
  var osmSource = new ol.source.OSM();
  //實例化地圖對象
  var map = new ol.Map({
  //目標容器
  target: 'map',
  //圖層
  layers: [
   //加載OSM瓦片圖層
   new ol.layer.Tile({
   //OSM數(shù)據(jù)源
   source:osmSource
   }),
   //加載瓦片網(wǎng)格圖層
   new ol.layer.Tile({
   //瓦片網(wǎng)格數(shù)據(jù)源
   source: new ol.source.TileDebug({
    //投影
    projection: 'EPSG:3857',
    //獲取瓦片網(wǎng)格信息
    tileGrid:osmSource.getTileGrid()
   })
   })
  ],
  //實例化視圖對象
  view: new ol.View({
   //視圖中心
   center: [12000000, 3000000],
   //視圖縮放等級
   zoom:10
  })
  });
 };
 </script>
</head>
<body>
 <div id="map"></div>
</body>
</html>

3、結(jié)果展示

地圖加載完畢后會在頁面中看見每張瓦片的網(wǎng)格信息，每張瓦片上都有三個參數(shù)，這三個參數(shù)分別表示地圖的縮放級別、行號和列號

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

javascript實現(xiàn)圖片上傳前臺頁面
這篇文章主要介紹使用javascript實現(xiàn)圖片上傳并在前臺頁面顯示，代碼很簡單，需要的朋友可以參考下
2015-08-08
js和jquery批量綁定事件傳參數(shù)一(新豬豬原創(chuàng))
js綁定事件傳參,javascript綁定事件傳參數(shù),jquery綁定事件傳參數(shù)
2010-06-06
JS返回頂部實例代碼
這篇文章主要為大家詳細介紹了JS返回頂部實例代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
JS實現(xiàn)的3des+base64加密解密算法完整示例
這篇文章主要介紹了JS實現(xiàn)的3des+base64加密解密算法,結(jié)合完整實例形式分析了JavaScript實現(xiàn)的3des+base64加密解密算法簡單使用技巧,需要的朋友可以參考下
2018-05-05
新手入門帶你學習JavaScript引擎運行原理
這篇文章主要介紹了新手入門帶你學習JavaScript引擎運行原理,JavaScript引擎是一個專門處理JavaScript腳本的虛擬機，一般會附帶在網(wǎng)頁瀏覽器之中。下面我們來詳細了解一下吧
2019-06-06
學習使用bootstrap3柵格系統(tǒng)
這篇文章主要教會大家學習使用bootstrap3柵格系統(tǒng)，bootstrap開發(fā)環(huán)境搭建，還介紹了柵格系統(tǒng)的類型，感興趣的小伙伴們可以參考一下
2016-04-04
javascript 內(nèi)存回收機制理解
javascript語言是一門優(yōu)秀的腳本語言.其中包含腳本語言的靈活性外還擁有許多高級語言的特性.
2011-01-01
Javascript實現(xiàn)圖片輪播效果(二)圖片序列節(jié)點的控制實現(xiàn)
這篇文章主要介紹了Javascript實現(xiàn)圖片輪播效果(二)圖片序列節(jié)點的控制實現(xiàn)的相關資料,需要的朋友可以參考下
2016-02-02
微信小程序?qū)崙?zhàn)之自定義模態(tài)彈窗（8）
這篇文章主要為大家詳細介紹了微信小程序?qū)崙?zhàn)之自定義模態(tài)彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
JavaScript實現(xiàn)全選與反選功能
這篇文章主要為大家詳細介紹了如何分別使用Vue和JavaScript實現(xiàn)全選與反選功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-04-04