OpenLayers3實現滑鼠移動顯示座標
本文例項為大家分享了OpenLayers3實現滑鼠移動顯示座標的具體程式碼，供大家參考，具體內容如下
1. 前言
滑鼠移動顯示座標，OpenLayers 3 框架提供了滑鼠移動顯示座標的控制元件（ol.control.MousePosition）,預設顯示在地圖的右上角，其樣式可以自定義。在這個例子中，我們通過前面的載入 OSM 載入瓦片圖層，實現在地圖容器的左下角顯示座標點的資訊。
2. 實現思路
（1）新建一個網頁，參考前面的載入 OSM 瓦片地圖，實現載入瓦片地圖。
（2）在地圖容器中新建一個 div 用於顯示座標資訊，並設定其樣式，通過設定 z-index 讓其顯示到地圖上面。
（3）例項化一個滑鼠位置控制元件（ol.control.MousePosition），可以根基實際的需求設定其，引數，例如座標系（projection）、座標值的顯示格式（coordinateFormat）、關聯顯示滑鼠位置座標點的目標容器（target）等。
3. 實現程式碼如下：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑鼠移動顯示座標資訊</title>
<link rel="stylesheet" href="css/bootstrap.min.css" >
<link rel="stylesheet" href="css/ol.css" >
<link rel="stylesheet" href="css/ZoomSlider.css" >
<script src="js/ol.js"></script>
<script src="js/MousePosition.js"></script>
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
}
#mouse-position {
float: left;
position: absolute;
bottom: 5px;
width: 200px;
height: 20px;
/* 將z-index設定為顯示在地圖上層 */
z-index: 2000;
}
/* 顯示滑鼠資訊的自定義樣式設定 */
.custom-mouse-position {
color: red;
font-size: 16px;
font-family: "微軟雅黑";
}
</style>
</head>
<body onload="init()">
<div id="map">
<div id="mouse-position"></div>
</div>
</body>
</html>程式碼解析：
在地圖容器中建立一個 div 用於顯示座標資訊，並設定其樣式，這個 div 層是是滑鼠位置控制元件的最外層容器，它所包含的內層為滑鼠資訊文字標籤，預設類名為 ol-mouse-position，可以自行定義。例如我們修改了他的字型大小以及顏色等。
js程式碼:
function init() {
// 例項化滑鼠位置控制元件
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),//座標格式
projection: 'EPSG:4326',//地圖投影座標系
className: 'custom-mouse-position',//座標資訊顯示樣式
// 顯示滑鼠位置資訊的目標容器
target: document.getElementById('mouse-position'),undefinedHTML: ' ' //未定義座標的標記
});
// 例項化Map物件載入地圖
var map = new ol.Map({
target: 'map',//地圖容器div的id
layers: [ //地圖容器載入的圖層
new ol.layer.Tile({ //載入瓦片圖層資料
source: new ol.source.OSM() //資料來源，載入OSM資料
})
],view: new ol.View({
center: [102,35],zoom: 3
}),// 載入控制元件到地圖容器中
// 載入滑鼠位置控制元件
controls: ol.control.defaults().extend([mousePositionControl])
});
}程式碼解析
（1）coordinateFormat：座標值的顯示格式。
（2）projection：投影座標系，將當前滑鼠位置的座標點設定為當前座標系下的相應值進行顯示。
（3）target：關聯顯示其座標點資訊的目標容器，即最外層容器元素，就是我們建立的 id 為mouse-position 的 div 元素。
（4）className：座標資訊採用的顯示樣式的類名即座標值文字的樣式類名，就是我們自定義的樣式類名 custom-mouse-position 。
實現效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。