OpenLayers 獲取地圖狀態

注：當前使用的是 ol 5.3.0 版本，天地圖使用的key請到天地圖官網申請，并替換為自己的key

地圖狀態信息包括中心點、當前縮放級別、比例尺以及當前鼠標移動位置信息等，在WebGIS開發中，地圖狀態可以方便快捷的向用戶展示基本地圖信息，有利于增強與用戶的交互。本節主要介紹地圖狀態。

1. 獲取地圖縮放級別

通過監聽地圖渲染完成事件postrender獲取地圖縮放級別。

const zoomEle = document.querySelector(".zoomValue")
map.on('postrender', evt => {const view = map.getView()zoomEle.textContent = parseInt(view.getZoom())
})

2. 獲取地圖坐標

通過監聽地圖鼠標移動事件pointermove獲取經緯度坐標，保留六位小數精度。

const lngEle = document.querySelector(".lngValue")
const latEle = document.querySelector(".latValue")
map.on('pointermove', evt => {const coords = evt.coordinatelngEle.textContent = coords[0].toFixed(6)latEle.textContent = coords[1].toFixed(6)
})

3. 獲取地圖比例尺

在地圖中記載比例尺控件獲取當前地圖比例尺。

const scaleControl = new ol.control.ScaleLine({units: 'metric', // 'degrees-度', 'imperial-英制單位', 'nautical-海里', 'metric-米', 'us',默認值'metric'className: 'custome-scale-line',// 自定義css類樣式名// minWidth: 200,// 最小寬度target: document.querySelector(".custome-scale-line"),// 放置比例尺控件的目標容器
})
map.addControl(scaleControl)

4. 完整代碼

其中libs文件夾下的包需要更換為自己下載的本地包或者引用在線資源。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>熱力圖</title><meta charset="utf-8" /><script src="../../libs/js/ol-5.3.3.js"></script><script src="../../libs/js/jquery-2.1.1.min.js"></script><link rel="stylesheet" href="../../libs/css//ol.css"><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微軟雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;top: 50px;bottom: 0;width: 100%;}#top-content {position: absolute;width: 100%;height: 50px;line-height: 50px;/* background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066); */background: linear-gradient(225.55deg, #5f006f 0%, #5b0085 100%);color: #fff;}h2 {text-align: center;font-size: 20px;}h2 span {margin: 0 20px;font-size: 20px;}.state {position: absolute;bottom: 10px;line-height: 30px;background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);color: #fff;display: flex;justify-content: space-between;justify-items: center;height: 30px;left: 10%;right: 10%;border-radius: 5px;}.state-item {width: 100%;text-align: center;font-size: 16px;font-weight: bold;}#custome-scale-line {position: absolute;margin: 0 auto;bottom: 13px;right: 120px;width: 200px;text-align: center;color: #fff;border-radius: 5px;}.custome-scale-line-inner {margin: 1px;color: #eee;font-size: 14px;text-align: center;will-change: contents, width;}</style>
</head><body><div id="map" title="地圖顯示"></div><div id="top-content"><h2><span>地</span><span>圖</span><span>狀</span><span>態</span></h2></div><div class="state"><div class="state-item zoom-state"><label for="">縮放級別：</label><span class="zoomValue"></span></div><div class="state-item lnglat-state"><label for="">經度：</label><span class="lngValue"></span><label for="">緯度：</label><span class="latValue"></span></div><div class="state-item scale-state"><label for="">比例尺：</label><span class="scaleValue"></span></div></div><div class="custome-scale-line" id="custome-scale-line"></div>
</body></html><script>//地圖投影坐標系const projection = ol.proj.get('EPSG:3857');//==============================================================================////============================天地圖服務參數簡單介紹==============================////================================vec：矢量圖層==================================////================================img：影像圖層==================================////================================cva：注記圖層==================================////======================其中：_c表示經緯度投影，_w表示球面墨卡托投影================////==============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地圖影像圖層",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地圖注記描述",crossOrigin: "anoymous",wrapX: false})})const TDTImgCvaLayer = new ol.layer.Tile({title: "天地圖影像注記圖層",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地圖注記描述",crossOrigin: "anoymous",wrapX: false})})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [104.0635986160487, 30.660919181071225],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,projection: "EPSG:4326"}),layers: [TDTImgLayer, TDTImgCvaLayer],// 鼠標控件：鼠標在地圖上移動時顯示坐標信息。controls: ol.control.defaults().extend([// 加載鼠標控件// new ol.control.MousePosition()])})map.on('click', evt => {console.log(evt.coordinate)})const scaleControl = new ol.control.ScaleLine({units: 'metric', // 'degrees-度', 'imperial-英制單位', 'nautical-海里', 'metric-米', 'us',默認值'metric'className: 'custome-scale-line',// 自定義css類樣式名// minWidth: 200,// 最小寬度target: document.querySelector(".custome-scale-line"),// 放置比例尺控件的目標容器})map.addControl(scaleControl)const lngEle = document.querySelector(".lngValue")const latEle = document.querySelector(".latValue")map.on('pointermove', evt => {const coords = evt.coordinatelngEle.textContent = coords[0].toFixed(6)latEle.textContent = coords[1].toFixed(6)})const zoomEle = document.querySelector(".zoomValue")map.on('postrender', evt => {const view = map.getView()zoomEle.textContent = parseInt(view.getZoom())})
</script>

OpenLayers示例數據下載，請回復關鍵字：ol數據

全國信息化工程師－GIS 應用水平考試資料，請回復關鍵字：GIS考試

【GIS之路】 已經接入了智能助手，歡迎關注，歡迎提問。

歡迎訪問我的博客網站-長談GIS：http://shanhaitalk.com

都看到這了，不要忘記點贊、收藏 + 關注哦！

本號不定時更新有關?GIS開發 相關內容，歡迎關注?!

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/83198.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/83198.shtml
英文地址，請注明出處：http://en.pswp.cn/web/83198.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！