OpenLayers 加載鼠標位置控件

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

地圖控件是一些用來與地圖進行簡單交互的工具，地圖庫預先封裝好，可以供開發者直接使用。OpenLayers具有大部分常用的控件，如縮放、導航、鷹眼、比例尺、旋轉、鼠標位置等。這些控件都是基于 ol.control.Control基類進行封裝的，可以通過Map對象的controls屬性或者調用addControl方法添加到地圖中。地圖控件通過HTML插入到Map頁面，可以利用CSS調整地圖控件樣式。OpenLayers初始化地圖時利用ol.control.default默認加載了縮放控件（ol.control.Zoom）

本節主要介紹鼠標位置控件。

1. 鼠標位置控件

鼠標位置控件用于顯示當前地圖容器中鼠標焦點處空間坐標值，方便用戶確認導航或者漫游位置。OpenLayers鼠標位置控件默認顯示在地圖右上角，可以通過自定義樣式進行調整。

1.1. 創建鼠標位置目標容器

創建鼠標位置DIV容器，并設置其CSS樣式

<body><div id="map" title="地圖顯示"></div><div class="mouse-div" id="mouse-div"></div>
</body>

設置鼠標位置控件居于地圖頂部，并居中顯示。

#mouse-div{position: relative;margin: 0 auto;top: 10px;width: 200px;height: 40px;line-height: 40px;background: #060505ba;text-align: center;color: #fff;border-radius: 5px;
}

1.2. 創建鼠標控件

創建鼠標控件需要設置坐標顯示格式、顯示坐標值的投影坐標系、自定義鼠標顯示容器類名以及顯示坐標的墓表容器等。

// 創建鼠標控件
const mousePositionControl = new ol.control.MousePosition({// 坐標格式，4表示顯示坐標值保留四位小數coordinateFormat: ol.coordinate.createStringXY(4),// 地圖投影坐標系（若未設置，則輸出默認投影坐標系的坐標）projection: "EPSG:4490",// 坐標信息容器CSS類名，默認為ol-mouse-positionclassName: 'mouse-position',// 顯示鼠標信息的目標容器target: document.getElementById('mouse-div'),// 未定義坐標的標記undefinedHTML:'&nbsp'
})

1.3. 加載鼠標位置控件

加載鼠標位置控件的方法有兩種，一種是通過Map屬性controls加載，另一種是通過Map方法addControl加載。

// 方式1
const map = new ol.Map({target: "map",view: new ol.View({center: [11444274, 12707441],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,}),// 鼠標控件：鼠標在地圖上移動時顯示坐標信息。controls: ol.control.defaults().extend([mousePositionControl])
})// 方式2
map.addControl(mousePositionControl)

2. 完整代碼

其中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: '微軟雅黑';}#map {position: absolute;width: 100%;height: 100%;}#mouse-div{position: relative;margin: 0 auto;top: 10px;width: 200px;height: 40px;line-height: 40px;background: #060505ba;text-align: center;color: #fff;border-radius: 5px;}</style>
</head>
<body><div id="map" title="地圖顯示"></div><div class="mouse-div" id="mouse-div"></div>
</body>
</html>
<script>//==============================================================================////============================天地圖服務參數簡單介紹=============================////================================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_c&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_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地圖注記描述",crossOrigin: "anoymous",wrapX: false})})// 創建鼠標控件const mousePositionControl = new ol.control.MousePosition({// 坐標格式coordinateFormat: ol.coordinate.createStringXY(4),// 地圖投影坐標系（若未設置，則輸出默認投影坐標系的坐標）projection: "EPSG:4326",// 坐標信息容器CSS類名，默認為ol-mouse-positionclassName: 'mouse-position',// 顯示鼠標信息的目標容器target: document.getElementById('mouse-div'),// 未定義坐標的標記undefinedHTML:'&nbsp'})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [11444274, 12707441],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,}),// 鼠標控件：鼠標在地圖上移動時顯示坐標信息。controls: ol.control.defaults().extend([// 加載鼠標控件// mousePositionControl])})map.addControl(mousePositionControl)map.addLayer(TDTImgLayer)map.addLayer(TDTImgCvaLayer)
</script>

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

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

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

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

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

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

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

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