ティソーの指標図 デモ

📚 ティソーの指標図とは

Tissot's Indicatrix（ティソーの指標図）は、地図投影による歪みを可視化するための手法です。
地球上の同じサイズの円を様々な場所に配置し、投影によってどのように変形されるかを示します。

  • Mercator投影: 緯度が高くなるほど円が大きくなる
  • Equal Area投影: 円の面積が保たれる
  • Orthographic投影: 地球の端で楕円化が進む
300

地図表示

実装サンプル

Tissot's Indicatrixの実装例 (d3.geoCircle)

// Tissot円生成関数 (d3.geoCircleでkm単位の半径を扱う)
function generateTissotCircles(radiusInKm, gridSpacing) {
    const features = [];
    const earthCircumference = 6371 * Math.PI * 2;
    const radiusInDegrees = (radiusInKm / earthCircumference) * 360;
    const circle = d3.geoCircle().radius(radiusInDegrees).precision(10);

    for (let lat = -80; lat <= 80; lat += gridSpacing) {
        for (let lon = -180; lon < 180; lon += gridSpacing) {
            const polygon = circle.center([lon, lat])();
            features.push({
                type: 'Feature',
                properties: { lat, lon, radius: radiusInKm },
                geometry: polygon
            });
        }
    }
    return { type: "FeatureCollection", features: features };
}

// Tissot円を生成
const tissotCircles = generateTissotCircles(300, 30); // 半径300km, 30度間隔

// 地図を作成
const map = new Thematika.Map({
    container: '#map',
    width: 800,
    height: 600,
    projection: d3.geoMercator()
});

// Tissot円レイヤーを追加
const tissotLayer = new Thematika.GeojsonLayer({
    data: tissotCircles,
    attr: {
        "fill": 'rgba(239, 68, 68, 0.3)',
        "stroke": '#dc2626',
        "stroke-width": 1.5,
        "opacity": 0.8
    }
});

map.addLayer('tissot', tissotLayer);