リーフレットのメルカトルバイアスプロット

私は、メルカトル図法のページからのこのウィキペディアの画像に触発され、リーフレットでハッキングしました。アイデアは、カーソルを大陸にインタラクティブに移動させ、それを投影に合わせて修正することでした。

ステータスの詳細については、次のJSFiddleを参照してください。

http://jsfiddle.net/cantdutchthis/NrAEL/1/

私は投影の世界では少し新しいですが、デモは緯度に対して十分に機能します。私は比較すると正距円筒とメルカトル図法をウィキペディア私にあなたがこれらの二つの突起を比較したときの投影のバイアスが唯一の「y軸」であるという印象を得ます。

最初のウィキペディアの画像のため、経度を修正していないように見えます。これをサポートしたいのですが、これを行うための最良の方法が何なのかわかりません。

現在、メルカトル図法のバイアスを表示する方法は、マウスが移動するたびに座標をマウスカーソルにシフトすることです。

map.on("mousemove", function(d){ 
    Object.keys(myLayer._layers).map(function(d){ myLayer.removeLayer( myLayer._layers[d] ) })

    var plotCoords = [];

    // green is the coordinate array for the landmass 
    var green = [ [-46.76373672, 82.62796021],... ]


    for ( i in green ) {
       // shift the landmass to where the cursor is
       var x = d.latlng.lng + green[i][0] + 40
       var y = d.latlng.lat + green[i][1] - 80
       circleCoords.push( [ x,y ] );
    }

    window.coords = plotCoords

    window.geojsonFeature = {
      "type": "Feature",
      "properties": {},
      "geometry": {
          "type": "Polygon",
          "coordinates": [coords]
      }
    };

    myLayer.addData(geojsonFeature);

});

このインタラクティブなリーフレットプロットを作成する最良の方法は、ウィキペディアに示されているように効果を示すことにもなります。

-編集！

その他の例については、私のブログを参照してください。http://koaning.com

移動可能な領域の相対緯度と相対経度の両方を変更して、同じ相対緯度にある他の領域の場合と同じように、各相対座標が歪むように見えるようにしたいと思いますか？もしそうなら、@ radouxjuは不正確であり、現在のところ半分しかありません。メルカトル図法などの正角図法の特徴の1つは、グローブ/マップ上の任意のポイントで線形スケール係数がすべての方向で一定であることです。したがって、移動中にYスケールに加えた変更は、Xスケールにも加える必要があります。