Openlayers顯示瓦片網格信息的方法
更新時間：2020年09月28日 11:50:14 作者：桃李不言_下自成蹊
這篇文章主要為大家詳細介紹了Openlayers顯示瓦片網格信息，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Openlayers顯示瓦片網格信息的具體代碼，供大家參考，具體內容如下
1、新建一個html頁面，引入ol.js文件，然后在body中創(chuàng)建一個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、結果展示
地圖加載完畢后會在頁面中看見每張瓦片的網格信息，每張瓦片上都有三個參數，這三個參數分別表示地圖的縮放級別、行號和列號
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章介紹了javascript實現顏色漸變的方法，有需要的朋友可以參考一下2013-10-10
Cookie就是這樣的一種機制。它可以彌補HTTP協(xié)議無狀態(tài)的不足。在Session出現之前，基本上所有的網站都采用Cookie來跟蹤會話。下面通過本文給大家介紹JS中cookie的使用及缺點，需要的朋友參考下吧2017-05-05
這篇文章主要介紹了JS排序算法之冒泡排序，選擇排序與插入排序,結合實例形式分析了冒泡排序，選擇排序與插入排序的概念、原理及實現方法,需要的朋友可以參考下2017-12-12
本文主要介紹了HBuilderX開發(fā)小程序的一些問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
其實最初使用alert還是一個常態(tài)，包括現在很多B端平臺還在直接使用alert，本文主要介紹了javascript使用alert實現一個精美的彈窗，感興趣的可以了解一下2023-02-02
地圖定位 圖吧地圖定位 附javascript源碼每行都有注釋2010-04-04
今天小編就為大家分享一篇layui點擊按鈕頁面會自動刷新的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要給大家介紹了關于微信小程序瘦身的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
本文主要介紹了原生js實現可拖拽效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
隨著做項目數量的越來越越多，其中用到js的地方很多相同，這里自己整理了一些常用表單驗證的js方法，雖然和其他js驗證框架有一定的差距，但是畢竟是自己總結的一些東西，在此與紀錄分享一下。2016-06-06