Openlayers顯示瓦片網(wǎng)格信息的方法
更新時(shí)間：2020年09月28日 11:50:14 作者：桃李不言_下自成蹊
這篇文章主要為大家詳細(xì)介紹了Openlayers顯示瓦片網(wǎng)格信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Openlayers顯示瓦片網(wǎng)格信息的具體代碼，供大家參考，具體內(nèi)容如下
1、新建一個(gè)html頁(yè)面，引入ol.js文件，然后在body中創(chuàng)建一個(gè)div標(biāo)簽，用來(lái)作為地圖加載的容器；
2、代碼實(shí)現(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 () {
//實(shí)例化OSM圖層數(shù)據(jù)源對(duì)象
var osmSource = new ol.source.OSM();
//實(shí)例化地圖對(duì)象
var map = new ol.Map({
//目標(biāo)容器
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()
})
})
],
//實(shí)例化視圖對(duì)象
view: new ol.View({
//視圖中心
center: [12000000, 3000000],
//視圖縮放等級(jí)
zoom:10
})
});
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
3、結(jié)果展示
地圖加載完畢后會(huì)在頁(yè)面中看見(jiàn)每張瓦片的網(wǎng)格信息，每張瓦片上都有三個(gè)參數(shù)，這三個(gè)參數(shù)分別表示地圖的縮放級(jí)別、行號(hào)和列號(hào)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)圖片上傳前臺(tái)頁(yè)面
這篇文章主要介紹使用javascript實(shí)現(xiàn)圖片上傳并在前臺(tái)頁(yè)面顯示，代碼很簡(jiǎn)單，需要的朋友可以參考下2015-08-08
js和jquery批量綁定事件傳參數(shù)一(新豬豬原創(chuàng))
js綁定事件傳參,javascript綁定事件傳參數(shù),jquery綁定事件傳參數(shù)2010-06-06
這篇文章主要為大家詳細(xì)介紹了JS返回頂部實(shí)例代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
JS實(shí)現(xiàn)的3des+base64加密解密算法完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的3des+base64加密解密算法,結(jié)合完整實(shí)例形式分析了JavaScript實(shí)現(xiàn)的3des+base64加密解密算法簡(jiǎn)單使用技巧,需要的朋友可以參考下2018-05-05
新手入門帶你學(xué)習(xí)JavaScript引擎運(yùn)行原理
這篇文章主要介紹了新手入門帶你學(xué)習(xí)JavaScript引擎運(yùn)行原理,JavaScript引擎是一個(gè)專門處理JavaScript腳本的虛擬機(jī)，一般會(huì)附帶在網(wǎng)頁(yè)瀏覽器之中。下面我們來(lái)詳細(xì)了解一下吧2019-06-06
學(xué)習(xí)使用bootstrap3柵格系統(tǒng)
這篇文章主要教會(huì)大家學(xué)習(xí)使用bootstrap3柵格系統(tǒng)，bootstrap開發(fā)環(huán)境搭建，還介紹了柵格系統(tǒng)的類型，感興趣的小伙伴們可以參考一下2016-04-04
javascript語(yǔ)言是一門優(yōu)秀的腳本語(yǔ)言.其中包含腳本語(yǔ)言的靈活性外還擁有許多高級(jí)語(yǔ)言的特性.2011-01-01
Javascript實(shí)現(xiàn)圖片輪播效果(二)圖片序列節(jié)點(diǎn)的控制實(shí)現(xiàn)
這篇文章主要介紹了Javascript實(shí)現(xiàn)圖片輪播效果(二)圖片序列節(jié)點(diǎn)的控制實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-02-02
微信小程序?qū)崙?zhàn)之自定義模態(tài)彈窗（8）
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)之自定義模態(tài)彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
JavaScript實(shí)現(xiàn)全選與反選功能
這篇文章主要為大家詳細(xì)介紹了如何分別使用Vue和JavaScript實(shí)現(xiàn)全選與反選功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04