OpenLayers 3マウス移動表示座標を実現します。
3452 ワード
本論文の例では、OpenLayers 3のマウス移動表示座標を実現するための具体的なコードを共有します。
1.はじめに
マウス移動表示座標は、OpenLayers 3フレームがマウス移動表示座標のコントロール（ol.ntrol.Mouse Position）を提供し、デフォルトでは地図の右上隅に表示され、そのスタイルはカスタマイズできます。この例では，前のローディングOSIによってタイル層をローディングし，地図容器の左下隅に座標点の情報を表示することを実現した。
2.考え方を実現する
（1）新しいウェブページを作成し、前のOSI瓦地図を参考にして、瓦のロードマップを実現します。
（2）地図容器に座標情報を表示するためのdivを新設し、その様式を設定し、Z-indxを設定することにより地図上に表示させる。
（3）マウス位置コントロール（ol.co ntrol.MousePosition）を実装することにより、実際の需要に基づいて、座標系、座標値の表示形式、マウス位置の座標点を表示するターゲットコンテナなどのパラメータを設定することができます。
（4）地図容器に地図容器に載せる。実際の地図コンテナMapのコードでは、controllasパラメータを設定してマウスの位置コントロールをロードすることもできますし、mapオブジェクトのaddControlメソッドを呼び出してコントロールをロードすることもできます。
3.実現コードは以下の通りです。
html数:
地図コンテナで座標情報を表示するためのdivを作成し、そのスタイルを設定します。このdiv層はマウスの位置コントロールの最外層の容器です。これに含まれる内部層はマウス情報テキストラベルで、デフォルトクラスはol-mouse-positionと呼ばれています。自分で定義できます。例えば彼のフォントサイズや色などを変更しました。
jsコード:
（1）coordinate Format：座標値の表示形式。
（2）projection：射影座標系で、現在のマウス位置の座標点を現在の座標系の値に設定して表示します。
（3）target：その座標点情報を表示するターゲットコンテナ、すなわち最外層の容器要素に関連して、私達が作成したidはmouse-positionのdiv元素です。
（4）クラスName：座標情報で使用されている表示スタイルのクラス名である座標値テキストのスタイル類名は、私たちがカスタマイズしたスタイルの名前であるcustom-mouse-positionです。
実現効果は以下の通りです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
1.はじめに
マウス移動表示座標は、OpenLayers 3フレームがマウス移動表示座標のコントロール（ol.ntrol.Mouse Position）を提供し、デフォルトでは地図の右上隅に表示され、そのスタイルはカスタマイズできます。この例では，前のローディングOSIによってタイル層をローディングし，地図容器の左下隅に座標点の情報を表示することを実現した。
2.考え方を実現する
（1）新しいウェブページを作成し、前のOSI瓦地図を参考にして、瓦のロードマップを実現します。
（2）地図容器に座標情報を表示するためのdivを新設し、その様式を設定し、Z-indxを設定することにより地図上に表示させる。
（3）マウス位置コントロール（ol.co ntrol.MousePosition）を実装することにより、実際の需要に基づいて、座標系、座標値の表示形式、マウス位置の座標点を表示するターゲットコンテナなどのパラメータを設定することができます。
（4）地図容器に地図容器に載せる。実際の地図コンテナMapのコードでは、controllasパラメータを設定してマウスの位置コントロールをロードすることもできますし、mapオブジェクトのaddControlメソッドを呼び出してコントロールをロードすることもできます。
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）coordinate Format：座標値の表示形式。
（2）projection：射影座標系で、現在のマウス位置の座標点を現在の座標系の値に設定して表示します。
（3）target：その座標点情報を表示するターゲットコンテナ、すなわち最外層の容器要素に関連して、私達が作成したidはmouse-positionのdiv元素です。
（4）クラスName：座標情報で使用されている表示スタイルのクラス名である座標値テキストのスタイル類名は、私たちがカスタマイズしたスタイルの名前であるcustom-mouse-positionです。
実現効果は以下の通りです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。