OpenLayer 3カスタム測定コントロールMeass reTool
2631 ワード
OpenLayer 3に既存の測定ツールがないことに悩んでいましたが、歪んだ果仁が作ったレイヤーコントロールを見て、自分で公式サイトのmeasreのインスタンスと曲がった果仁のテンプレートを結合して、測定ツールコントロールを叩きました。
ダウンロード
説明
Openlayers 3によるカスタムコントロールは、測定距離と測定面積（area）とgeodesic測定をサポートします。 cssとjsファイルを読み込み、直接参照すればいいです。 JavaScriptを使用して、JQuery を導入する必要はありません。
使用効果は図の通りです。
使い方
htmlページにOpenLayer 3のcssとjsファイルを導入し、ダウンロードしたmeass retool.cssとmeass retool.jsを追加します。
注：測定ツールの中のcheckboxはgeodesicを使って測定することに選択されています。geodesicを使わない測定には選択されていません。デフォルトは未選択です。
完全な例のhtmlコード:
ダウンロード
説明
Openlayers 3によるカスタムコントロールは、測定距離と測定面積（area）とgeodesic測定をサポートします。
使用効果は図の通りです。
使い方
htmlページにOpenLayer 3のcssとjsファイルを導入し、ダウンロードしたmeass retool.cssとmeass retool.jsを追加します。
<link rel="stylesheet" href="measureTool.css" type="text/css">
<script type="text/javascript" src="measureTool.js"></script>
var MeasureTool = new ol.control.MeasureTool({
sphereradius : 6378137,//sphereradius
});
map.addControl(MeasureTool);注：測定ツールの中のcheckboxはgeodesicを使って測定することに選択されています。geodesicを使わない測定には選択されていません。デフォルトは未選択です。
完全な例のhtmlコード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="[email protected]" />
<title>ol3-MeasureTool (example)</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
<link rel="stylesheet" href="measureTool.css" type="text/css">
<script type="text/javascript" src="measureTool.js"></script>
<style>
#map{
height: 80%;
width: 90%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [11575000, 3602500],
zoom: 14
})
});
var MeasureTool = new ol.control.MeasureTool({
sphereradius : 6378137,//sphereradius
});
map.addControl(MeasureTool);
</script>
</body>
</html>