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頁面，引入ol.js文件，然后在body中創(chuàng)建一個(gè)div標(biāo)簽，用來作為地圖加載的容器；
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ì)在頁面中看見每張瓦片的網(wǎng)格信息，每張瓦片上都有三個(gè)參數(shù)，這三個(gè)參數(shù)分別表示地圖的縮放級(jí)別、行號(hào)和列號(hào)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)顏色漸變的方法
這篇文章介紹了javascript實(shí)現(xiàn)顏色漸變的方法，有需要的朋友可以參考一下2013-10-10
Cookie就是這樣的一種機(jī)制。它可以彌補(bǔ)HTTP協(xié)議無狀態(tài)的不足。在Session出現(xiàn)之前，基本上所有的網(wǎng)站都采用Cookie來跟蹤會(huì)話。下面通過本文給大家介紹JS中cookie的使用及缺點(diǎn)，需要的朋友參考下吧2017-05-05
本文主要介紹了HBuilderX開發(fā)小程序的一些問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02 
javascript使用alert實(shí)現(xiàn)一個(gè)精美的彈窗
其實(shí)最初使用alert還是一個(gè)常態(tài)，包括現(xiàn)在很多B端平臺(tái)還在直接使用alert，本文主要介紹了javascript使用alert實(shí)現(xiàn)一個(gè)精美的彈窗，感興趣的可以了解一下
2023-02-02 
javascript+mapbar實(shí)現(xiàn)地圖定位
地圖定位 圖吧地圖定位 附j(luò)avascript源碼每行都有注釋
2010-04-04 
layui點(diǎn)擊按鈕頁面會(huì)自動(dòng)刷新的解決方案
今天小編就為大家分享一篇layui點(diǎn)擊按鈕頁面會(huì)自動(dòng)刷新的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10 
這篇文章主要給大家介紹了關(guān)于微信小程序瘦身的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-05-05 
本文主要介紹了原生js實(shí)現(xiàn)可拖拽效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02 
javascript 常用驗(yàn)證函數(shù)總結(jié)
隨著做項(xiàng)目數(shù)量的越來越越多，其中用到j(luò)s的地方很多相同，這里自己整理了一些常用表單驗(yàn)證的js方法，雖然和其他js驗(yàn)證框架有一定的差距，但是畢竟是自己總結(jié)的一些東西，在此與紀(jì)錄分享一下。
2016-06-06