このページの内容は古いです。今の時代は new Y.Circle() でokです。
マウスだけでなんとかしたい場合には、地図上に好きな半径の円を描けます。(Yahoo! JavaScriptマップ API版)をご利用ください。
マウスだけでなんとかしたい場合には、地図上に好きな半径の円を描けます。(Yahoo! JavaScriptマップ API版)をご利用ください。
基本的な考え方はGoogle Maps APIで円を描くの場合と同じで、極座標形式の楕円の方程式を用いて、円に近似した多角形を描きます。
// 測地系どうしよう?
var map = new YahooMapsCtrl("map", new YLLPoint(35, 135), 4, YMapMode.MAP, YDatumType.TOKYO97);
// var map = new YahooMapsCtrl("map", new YLLPoint(35, 135), 4, YMapMode.MAP, YDatumType.WGS84);
// 中心地
var point = new YLLPoint(35, 135);
// 描く円の半径(km)
var radius = 1;
// 赤道半径(m)
var EquatorialRadius;
// 扁平率の逆数 : 1/f
var F;
if (map.getDatum() == YDatumType.TOKYO97) {
EquatorialRadius = 6377397.155;
F = 299.152813;
} else if (map.getDatum() == YDatumType.WGS84){
EquatorialRadius = 6378137;
F = 298.257223;
} else {
alert('unknown datum');
}
// 離心率の2乗
var E = ((2 * F) -1) / Math.pow(F, 2);
// 赤道半径 × π
var PI_ER = Math.PI * EquatorialRadius;
// 緯度のラジアン表記
var pLatRadians = (point.lat * Math.PI) / 180;
// 1 - e^2 sin^2 (θ)
var TMP = 1 - E * Math.pow(Math.sin(pLatRadians), 2);
// 経度1度あたりの長さ(m)
var arc_lat = (PI_ER * (1 - E)) / (180 * Math.pow(TMP, 3/2));
// 緯度1度あたりの長さ(m)
var arc_lng = (PI_ER * Math.cos(pLatRadians)) / (180 * Math.pow(TMP, 1/2));
// 半径をm単位に
var R = radius * 1000;
// 0~360°で1°ずつ頂点を求めることで360角形を生成
var points = new Array(360);
for (i = 0; i <= 360; i++) {
var rad = i / 180 * Math.PI;
var lat = (R / arc_lat) * Math.sin(rad) + point.lat;
var lon = (R / arc_lng) * Math.cos(rad) + point.lon;
points[i] = new YLLPoint(lat, lon);
}
// id
var circle_id = 'circle-id';
// popup
var circle_popup ='';
// style
var circle_style = { strokeWidth: 1, strokeColor: 'FF0000', strokeOpacity: 1 };
map.addPolyline(circle_id, points, circle_popup, circle_style);Google Maps APIで円を描くとの相違点
座標を表すクラスが GLatLng ではなく、YLLPoint
GLatLngでは GLatLng.lat() や GLatLng.lng() のようにメソッドで緯度経度を得ていたのが、YLLPointでは、YLLPoint.lat や YLLPoint.lon のようなアトリビュートで得る形に。
また、GLatLng.latRadians() のようにラジアンで得ることができないので、 YLLPoint.lat * Math.PI / 180 と、自前で変換する必要がある。
細かいところでは、経度を得る際にGLatLng.lng()とYLLPoint.lonという違いが…。
また、GLatLng.latRadians() のようにラジアンで得ることができないので、 YLLPoint.lat * Math.PI / 180 と、自前で変換する必要がある。
細かいところでは、経度を得る際にGLatLng.lng()とYLLPoint.lonという違いが…。
測地系がデフォルトで日本測地系(TOKYO97)
定数類に注意。コンストラクタの引数でYDatumType.WGS84を指定すれば世界測地系に。
YahooMapsCtrl.getDatum()は、ドキュメント非掲載ですが…。
YahooMapsCtrl.getDatum()は、ドキュメント非掲載ですが…。
<html>にxmlns:v="urn:schemas-microsoft-com:vml"は不要。
逆につけてると、IEでは表示されませんでした…。
既知の問題
- 地図上のルーラーと距離があってません・・・。
- グローバル変数 popup がないと、Firefoxのエラーコンソールにこんなん出ましたけど・・・。
