Openlayers顯示瓦片網格資訊的方法
阿新 • • 發佈:2020-09-30
本文例項為大家分享了Openlayers顯示瓦片網格資訊的具體程式碼,供大家參考,具體內容如下
1、新建一個html頁面,引入ol.js檔案,然後在body中建立一個div標籤,用來作為地圖載入的容器;
2、程式碼實現
<!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圖層資料來源物件 var osmSource = new ol.source.OSM(); //例項化地圖物件 var map = new ol.Map({ //目標容器 target: 'map',//圖層 layers: [ //載入OSM瓦片圖層 new ol.layer.Tile({ //OSM資料來源 source:osmSource }),//載入瓦片網格圖層 new ol.layer.Tile({ //瓦片網格資料來源 source: new ol.source.TileDebug({ //投影 projection: 'EPSG:3857',//獲取瓦片網格資訊 tileGrid:osmSource.getTileGrid() }) }) ],//例項化檢視物件 view: new ol.View({ //檢視中心 center: [12000000,3000000],//檢視縮放等級 zoom:10 }) }); }; </script> </head> <body> <div id="map"></div> </body> </html>
3、結果展示
地圖載入完畢後會在頁面中看見每張瓦片的網格資訊,每張瓦片上都有三個引數,這三個引數分別表示地圖的縮放級別、行號和列號
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。