前提・実現したいこと
OpenLayersでOpenStreetMapを描画しています。
地図を描画しているdivの角の経緯度を取得したいです。
発生している問題・エラーメッセージ
まず、画面上の座標(0, 0)の緯度経度を取得するために、以下のコードを試してみました。
javascript
1 var pixel = new OpenLayers.Pixel(0, 0); 2 var lonlat = map.getLonLatFromPixel(pixel); 3 lonlat.lon = lonlat.lon / 20000000 * 180; 4 lonlat.lat = (lonlat.lat + 20000000) / 40000000 * 170 - 85; 5 console.log(monmat, pixel);
このコードだと、経度は適切に取得できるのですが、緯度がどうもうまく取得できません。
というのも、地図自体はメルカトル図法になっているため、緯度が大きくなるにつれて距離と値が比例しなくなってしまいます。
そのため、単純な計算式((lonlat.lat + 20000000) / 40000000 * 170 - 85)ではズレが生じてしまうのです。
計算などせずに、getCenterのような形で簡単に指定した座標の緯度経度を取得する方法はないでしょうか?
全体
javascript
1<!DOCTYPE html> 2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<script src="http://www.openlayers.org/api/OpenLayers.js"></script> 6<script type="text/javascript"> 7 8 // 座標系の設定 9 var projection3857 = new OpenLayers.Projection("EPSG:3857"); 10 var projection4326 = new OpenLayers.Projection("EPSG:4326"); 11 12 var map = null; 13 var cross_control = null; 14 15 function init_map(fx,fy,izoom,imaxZoomLevel){ 16 17 // マップの生成 18 map = new OpenLayers.Map({ 19 div: "map", 20 projection: projection3857, 21 // map表示用プロジェクション 22 displayProjection: projection4326, 23 }); 24 25 // レイヤーの生成 26 map.addLayer(new OpenLayers.Layer.OSM()); 27 28 // マップの中心を設定 // LonLatクラス:地図座標点を定義 29 map.setCenter(new OpenLayers.LonLat( 30 fx, // X:経度 31 fy // Y:緯度 32 // 投影系の間に座標変換を行う(source -> dest) 33 ).transform(projection4326, projection3857),// 座標系 34 izoom // デフォルトズームレベル 35 ); 36 // 緯度経度変更イベントの登録 // register:引数のようにしてイベントを呼び出す 37 map.events.register("moveend" , map, onMapChange); 38 } 39 40 function onMapChange() { 41 // 画面中央の座標を取得 42 var lonLat = this.getCenter().transform(projection3857,projection4326); 43 var pixel = new OpenLayers.Pixel(window.innerWidth / 2, 350 / 2); 44 var monmat = map.getLonLatFromPixel(pixel); 45 monmat.lon = monmat.lon / 20000000 * 180; 46 monmat.lat = (monmat.lat + 20000000) / 40000000 * 170 - 85; 47 console.log(monmat, pixel, extent); 48 49 // 切捨て 50 lonLat.lat = Math.round(lonLat.lat*1000000)/1000000; 51 lonLat.lon = Math.round(lonLat.lon*1000000)/1000000; 52 53 document.getElementById("msg").innerHTML = '<br />' + 54 '緯度:' + lonLat.lat + '<br />' + // 緯度 55 '経度:' + lonLat.lon + '<br />' + // 経度 56 'ズーム:' +map.getZoom(); 57 } 58 59 // onloadイベント 60 window.onload = function() { 61 // マップの生成(経度、緯度、倍率、最大倍率) 62 init_map(138.731388,35.362222,10,18); 63 } 64 65</script> 66<style>body {padding: 0; margin: 0}</style> 67</head> 68<body> 69 70<!-- マップの表示エリア --> 71<div id="map" style="height: 350px; width: 100%;"></div> 72 73<!-- メッセージ --> 74<div id="msg"><br />ここにデータが表示されます。</div> 75 76</body> 77</html>
こちらを参考にしました↓
https://www.petitmonte.com/javascript/openlayers_map_example7.html
つたない質問ではありますが、ご回答・アドバイスをお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。