// 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);