Point Text Avoid Overlap デモ

🎯 ラベル重なり回避機能

  • データ: 日本の主要都市(密集したポイントデータ)
  • 機能: Voronoi図を使用したラベル自動配置最適化
  • 接続線: 元の位置と移動後の位置を結ぶ動的スタイルライン
  • 設定: 重なり回避の有効/無効、接続線表示、Voronoiマージン調整
16px
0
0
0°
30px

地図表示

実装サンプル

ラベル重なり回避機能の使用例

// PointTextLayer のラベル重なり回避機能

// 都市データ(GeoJSON形式)
const cityData = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            geometry: { type: "Point", coordinates: [139.6917, 35.6895] },
            properties: { name: "東京", population: 13960000 }
        },
        {
            type: "Feature", 
            geometry: { type: "Point", coordinates: [139.6380, 35.4437] },
            properties: { name: "横浜", population: 3748781 }
        },
        // 他の近接した都市データ...
    ]
};

// ラベル重なり回避機能付きテキストレイヤーを作成
const textLayer = new Thematika.PointTextLayer({
    data: cityData,
    textProperty: 'name',          // テキスト取得元プロパティ
    fontSize: 14,                  // フォントサイズ
    avoidOverlap: true,            // ラベル重なり回避を有効化
    showConnectors: true,          // 接続線を表示
    voronoiMargin: 30,            // Voronoi計算のマージン
    
    // 動的な接続線スタイリング
    connectorStyle: (feature, index) => {
        const population = feature.properties.population;
        return {
            stroke: population > 2000000 ? '#ff6b6b' : '#666',
            'stroke-width': population > 2000000 ? 2 : 1,
            opacity: 0.6,
            'stroke-dasharray': population > 3000000 ? 'none' : '2,2'
        };
    },
    
    style: {
        fill: '#333',              // テキスト色
        stroke: '#fff',            // アウトライン色
        'stroke-width': 3,         // アウトライン幅
        'paint-order': 'stroke'    // アウトラインを背景に
    }
});

// 地図に追加
map.addLayer('cityLabels', textLayer);