メルカトル図法 (緯度/経度) の左下と右上の座標がわかっている画像があります。
としてGoogleマップに追加しましたgoogle.maps.GroundOverlay。これにより、正しい結果が得られます
画像の左上 (緑)、右上 (赤)、右下 (シアン)、左下 (赤) の各コーナーにカラー マーカーを追加しました。
d3ははるかに軽量で、Googleマップの機能は必要ないため、topojsonを使用してGoogleマップからd3に移行したいことを除いて、これはすべて問題ありません。
画像のコーナーのマーカーを含む d3 ベースのマップを作成しました。これが結果です。
2 つのウィンドウ (Google マップ マップを含むブラウザーと d3 マップを含むブラウザー) を重ね合わせると、国の境界線とコーナー ポイントを非常に正確に重ねることができます。
これは、Google マップ マップ ブラウザの上に d3-map ブラウザを重ねたアニメーション GIF です。d3-map ブラウザ ウィンドウの透明度は、ツールを使用して変更されています。完全に不透明から完全に透明になり、完全に不透明に戻ります。国名の画像はGoogleマップのものです。
ご覧のとおり、ポイントと国境は非常にうまく一致していますが、レーダー画像は一致していません。d3 イメージを少し下に移動すると問題は緩和されますが、正しい解決策ではありません。Google マップで表示されているのが であることは知っています。
私がやっていること: d3 マップで、投影を作成しています
projection = d3.geo.mercator().scale(scale).translate([width / 2, width / 2]).center(center);
次に、提供された画像の緯度経度コーナーの境界ボックスを作成します。
bb = {
east: 16.0,
west: 4.0,
north: 56.0,
south: 46.0,
}
そして、それらを緯度経度空間からキャンバスの x、y 座標に投影します。
p_ur = projection([bb.east, bb.north]).map(function(x) { return x; })
p_ll = projection([bb.west, bb.south]).map(function(x) { return x; })
p_ul = projection([bb.west, bb.north]).map(function(x) { return x; })
p_lr = projection([bb.east, bb.south]).map(function(x) { return x; })
円を描くと、位置が Google マップの位置と非常に正確に一致します。これは、投影が機能していることを意味します。
circle = svg.append("svg:circle").attr('cx',p_ll[0]).attr('cy',p_ll[1]).attr('r', 2).attr("class", "ll")
circle = svg.append("svg:circle").attr('cx',p_ur[0]).attr('cy',p_ur[1]).attr('r', 2).attr("class", "ur")
circle = svg.append("svg:circle").attr('cx',p_ul[0]).attr('cy',p_ul[1]).attr('r', 2).attr("class", "ul")
circle = svg.append("svg:circle").attr('cx',p_lr[0]).attr('cy',p_lr[1]).attr('r', 2).attr("class", "lr")
円を描く前に、topojson の国境を描いています。
path = d3.geo.path().projection(projection);
countries = svg.append("g");
// ...fetching the data from the web...
countries.selectAll('.country')
.data(topojson.feature(data, data.objects.europe).features)
.enter()
.append('path')
.attr('class', 'country')
.attr('d', path);
ここで問題が発生します。非常に「安い」方法で画像を適用しています。左上の緯度経度をキャンバスの x、y 空間に投影し、それを の x、y 原点として使用しsvg:imageます。これらのポイントは、上記のカラー サークルに対して既に計算されているため、ここで再利用します。
image = svg.append("svg:image")
.attr('x', p_ul[0])
.attr('y', p_ul[1])
.attr('width', (p_lr[0] - p_ul[0]))
.attr('height', (p_lr[1] - p_ul[1]))
.attr('preserveAspectRatio', 'none')
.attr("xlink:href","http://.../current.png")
どういうわけか、コーナーを使用して画像をマップの上に固定するだけで、画像の個々のピクセルデータの射影変換をスキップしています。
画像の各 x、y 位置を緯度/経度の位置として扱い、メルカトル図法を介して各ピクセルをマップに投影する必要があると想定しています。
しかし、私はそれを行う方法についての手がかりがありません。何か案は？d3.geo に似た単純なオーバーレイ プラグインはありgoogle.maps.GroundOverlayますか?