※ 最近のブラウザでは HTTPS なサイトでないと Geo Location の取得が許可されない
ol.Geolocation †
- 基本的には HTML5 の window.navigator.geolocation.getCurrentPosition? のラッパークラス cf. Javascript センサー
- http://openlayers.org/en/latest/apidoc/ol.Geolocation.html
- コンストラクタ
| argument | default | note |
| projection | | 測地系。map.getView().getProjection() がいいだろう |
| tracking | false | 位置を追跡するかどうかのフラグ。true にしないとまともに計測できない |
| trackingOptions | | window.navigator.geolocation.getCurrentPosition? のオプション。詳細はコードを見てね |
- 取得できる位置情報 (機器が対応していない場合は undefined が返る)
| accessor | type | note |
| getAccuracy() | number | 測位精度(m) |
| getAccuracyGeometry?() | ol.geom.Geometry | 現在位置を表す円 |
| getAltitude() | number | 高度(m) |
| getAltitudeAccuracy?() | number | 高度の精度(m) |
| getHeading() | number | 北方向(rad) |
| getPosition() | ol.Coordinate | 現在位置 |
| getProjection() | ol.proj.Projection | 測地系 |
| getRevision() | number | 測位した回数 |
| getSpeed() | number | 速度(m/sec) |
- イベント
- スマホのブラウザで全領域表示させるには CSS に工夫が必要
- サンプルプログラム
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/ol.css" type="text/css"/>
<link rel="stylesheet" href="css/sample.css" type="text/css"/>
<style>
body {
padding : 0;
margin : 0;
}
</style>
<title>OpenLayers 3 example 29 Geo Location</title>
</head>
<body>
<div id="map" class="full-map"></div>
<script src="js/ol-debug.js"></script>
<script type="text/javascript">
var featureArray = new ol.Collection();
var vectorSource = new ol.source.Vector({
features: featureArray
});
var vectorLayer = new ol.layer.Vector({
source : vectorSource
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: ol.proj.transform([0, 51], 'EPSG:4326', 'EPSG:3857'),
zoom: 18
}),
});
var geolocation = new ol.Geolocation({
// take the projection to use from the map's view
projection: map.getView().getProjection(),
tracking: true,
trackingOptions: {
// raw html5 geolocation options
// see https://www.w3.org/TR/geolocation-API/#position_options_interface
enableHighAccuracy: true,
timeout: 5000, // timeout (millisec) -> TIMEOUT Error
maximumAge: 1000 // cache life time of location (millisec)
}
});
// listen to changes in position
geolocation.on('change', function(evt) {
map.getView().setCenter(geolocation.getPosition());
var heading = geolocation.getHeading();
if (heading) {
// some smart-phones and PCs has no heading information
map.getView().rotate(geolocation.getHeading());
}
featureArray.clear();
featureArray.push(new ol.Feature(geolocation.getAccuracyGeometry()));
});
geolocation.on('error', function(e) {
switch(e.code) {
case 1 :
alert('Error 1 : PERMISSION_DENIED');
break;
case 2 :
alert('Error 2 : POSITION UNAVAILABLE');
break;
case 3 :
alert('Error 3 : TIMEOUT');
break;
default :
alert('Error ' + e.code + ' : UNKNOWN ERROR');
break;
}
});
</script>
</body>
</html>
.map {
width: 100%;
background-color: ghostwhite;
border: 1px gray;
}
.full-map {
width: 100%;
height: 100%;
position:fixed
}
.ol-full-screen {
position: fixed;
top: 10px;
right: 50px;
}
.ol-mouse-position {
top: 10px;
right: 100px;
font-size: 13px;
color: white;
background-color: rgba(0,60,136,0.5);
padding: 2px 10px;
border-radius: 5px;
}
ol.DeviceOrientation? †
- スマホの傾きを検知するAPI これも HTML5 の deviceorientation イベントのラッパー
- http://openlayers.org/en/latest/apidoc/ol.DeviceOrientation.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>OpenLayers 3 example 30 Device Orientation</title>
</head>
<body>
<input id="track" name="track_checkbox" type="checkbox"/><label for="track">track changes</label>
<table>
<tbody>
<tr><td>alpha</td><td>: <span id="alpha"></span></td></tr>
<tr><td>beta</td><td>: <span id="beta"></span></td></tr>
<tr><td>gamma</td><td>: <span id="gamma"></span></td></tr>
<tr><td>heading</td><td>: <span id="heading"></span></td></tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/ol-debug.js"></script>
<script type="text/javascript">
var deviceOrientation = new ol.DeviceOrientation();
$('#track').on('change', function() {
deviceOrientation.setTracking(this.checked);
});
// listen to changes in orientation
deviceOrientation.on('change', function(evt) {
$('#alpha').html(deviceOrientation.getAlpha() + ' [rad]');
$('#beta').html(deviceOrientation.getBeta() + ' [rad]');
$('#gamma').html(deviceOrientation.getGamma() + ' [rad]');
$('#heading').html(deviceOrientation.getHeading() + ' [rad]');
});
</script>
</body>
</html>
GIS
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
