Point Text Layer デモ

📝 PointTextLayer機能

  • データ: examples/geojson/world.geojson(世界地図データ)
  • 機能: GeoJSONデータからテキストラベル表示
  • 対応: ポイント・ポリゴン・ラインの中心点計算
  • 制御: 豊富なテキストスタイリングオプション(フォント・位置・回転)
16px
0
0
0°

地図表示

実装サンプル

PointTextLayerの使用例

// PointTextLayer の使用例

// 都市データ(GeoJSON形式)
const cityData = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            geometry: { type: "Point", coordinates: [139.6917, 35.6895] },
            properties: { text: "東京", population: 13960000 }
        },
        {
            type: "Feature", 
            geometry: { type: "Point", coordinates: [135.5023, 34.6937] },
            properties: { text: "大阪", population: 2691000 }
        }
    ]
};

// テキストレイヤーを作成
const textLayer = new Thematika.PointTextLayer({
    data: cityData,
    textProperty: 'text',  // テキスト取得元プロパティ
    dx: 5,                 // X方向オフセット
    dy: -10,               // Y方向オフセット
    "font-size": 14,          // フォントサイズ
    "font-weight": 'bold',    // フォントウェイト
    "text-anchor": 'start',   // テキストアンカー
    attr: {
        "fill": '#333',      // テキスト色
        "stroke": '#fff',    // アウトライン色
        "stroke-width": 2     // アウトライン幅
    }
});

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