なんちゃって☆めも >> Yahoo! 地図 APIで、あそ~ぶ。

Yahoo!地図APIで円を描きたい(JavaScript版地図「旧地図Web API」対応版)

このページの内容は古いです。今の時代は new Y.Circle() でokです。
マウスだけでなんとかしたい場合には、地図上に好きな半径の円を描けます。(Yahoo! JavaScriptマップ API版)をご利用ください。

Webサービス by Yahoo! JAPAN
 基本的な考え方は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という違いが…。

測地系がデフォルトで日本測地系(TOKYO97)

 定数類に注意。コンストラクタの引数でYDatumType.WGS84を指定すれば世界測地系に。
 YahooMapsCtrl.getDatum()は、ドキュメント非掲載ですが…。

<html>にxmlns:v="urn:schemas-microsoft-com:vml"は不要。

 逆につけてると、IEでは表示されませんでした…。

既知の問題