快捷導(dǎo)航

OpenLayers3實現(xiàn)鼠標(biāo)移動顯示坐標(biāo)

更新時間：2020年09月25日 14:23:41 作者：jiegsier

這篇文章主要為大家詳細介紹了OpenLayers3實現(xiàn)鼠標(biāo)移動顯示坐標(biāo)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了OpenLayers3實現(xiàn)鼠標(biāo)移動顯示坐標(biāo)的具體代碼，供大家參考，具體內(nèi)容如下

1. 前言

鼠標(biāo)移動顯示坐標(biāo)，OpenLayers 3 框架提供了鼠標(biāo)移動顯示坐標(biāo)的控件（ol.control.MousePosition）,默認顯示在地圖的右上角，其樣式可以自定義。在這個例子中，我們通過前面的加載 OSM 加載瓦片圖層，實現(xiàn)在地圖容器的左下角顯示坐標(biāo)點的信息。

2. 實現(xiàn)思路

（1）新建一個網(wǎng)頁，參考前面的加載 OSM 瓦片地圖，實現(xiàn)加載瓦片地圖。
（2）在地圖容器中新建一個 div 用于顯示坐標(biāo)信息，并設(shè)置其樣式，通過設(shè)置 z-index 讓其顯示到地圖上面。
（3）實例化一個鼠標(biāo)位置控件（ol.control.MousePosition），可以根基實際的需求設(shè)置其，參數(shù)，例如坐標(biāo)系（projection）、坐標(biāo)值的顯示格式（coordinateFormat）、關(guān)聯(lián)顯示鼠標(biāo)位置坐標(biāo)點的目標(biāo)容器（target）等。
（4）在地圖容器中加載到地圖容器中?？梢栽趯嵗貓D容器 Map 的代碼中，通過設(shè)置 controlas 參數(shù)加載鼠標(biāo)位置控件，也可以調(diào)用 map 對象的 addControl 方法加載控件。

3. 實現(xiàn)代碼如下：

html：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>鼠標(biāo)移動顯示坐標(biāo)信息</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設(shè)置為顯示在地圖上層 */
  z-index: 2000;
 }
 /* 顯示鼠標(biāo)信息的自定義樣式設(shè)置 */

 .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>

代碼解析：

在地圖容器中創(chuàng)建一個 div 用于顯示坐標(biāo)信息，并設(shè)置其樣式，這個 div 層是是鼠標(biāo)位置控件的最外層容器，它所包含的內(nèi)層為鼠標(biāo)信息文本標(biāo)簽，默認類名為 ol-mouse-position，可以自行定義。例如我們修改了他的字體大小以及顏色等。

js代碼:

function init() {
 // 實例化鼠標(biāo)位置控件
 var mousePositionControl = new ol.control.MousePosition({
 coordinateFormat: ol.coordinate.createStringXY(4), //坐標(biāo)格式
 projection: 'EPSG:4326', //地圖投影坐標(biāo)系
 className: 'custom-mouse-position', //坐標(biāo)信息顯示樣式
 // 顯示鼠標(biāo)位置信息的目標(biāo)容器
 target: document.getElementById('mouse-position'),
 undefinedHTML: '&nbsp' //未定義坐標(biāo)的標(biāo)記
 });


 // 實例化Map對象加載地圖
 var map = new ol.Map({
 target: 'map', //地圖容器div的id
 layers: [ //地圖容器加載的圖層
  new ol.layer.Tile({ //加載瓦片圖層數(shù)據(jù)
  source: new ol.source.OSM() //數(shù)據(jù)源，加載OSM數(shù)據(jù)
  })
 ],
 view: new ol.View({
  center: [102, 35],
  zoom: 3
 }),
 // 加載控件到地圖容器中
 // 加載鼠標(biāo)位置控件
 controls: ol.control.defaults().extend([mousePositionControl])
 });
}

代碼解析

（1）coordinateFormat：坐標(biāo)值的顯示格式。
（2）projection：投影坐標(biāo)系，將當(dāng)前鼠標(biāo)位置的坐標(biāo)點設(shè)置為當(dāng)前坐標(biāo)系下的相應(yīng)值進行顯示。
（3）target：關(guān)聯(lián)顯示其坐標(biāo)點信息的目標(biāo)容器，即最外層容器元素，就是我們創(chuàng)建的 id 為mouse-position 的 div 元素。
（4）className：坐標(biāo)信息采用的顯示樣式的類名即坐標(biāo)值文本的樣式類名，就是我們自定義的樣式類名 custom-mouse-position 。

實現(xiàn)效果如下：