質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3983閲覧

OpenLayers 画面の角の経緯度を取得したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/04/02 14:18

前提・実現したいこと

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

つたない質問ではありますが、ご回答・アドバイスをお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

var pixel = new OpenLayers.Pixel(0, 0);
var lonlat = map.getLonLatFromPixel(pixel).transform(projection3857,projection4326);

画面の任意の座標に対応する経緯度は、たったこれだけで取得できました。
つまり、単にgetLonLatPixelで取得すると、世界測地系?として返されてしまう、ということでしょうか。

投稿2018/04/07 11:23

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問