カスタムフィルター デモ

✨ カスタムフィルター効果

  • SVGフィルター: createCustomFilter APIを使用した独自エフェクトの定義
  • フィルター要素: ベベル効果、テクスチャ、変位マップ、カラーマトリックスの組み合わせ
  • 適用方法: GeojsonLayerのattr属性でfilter: "url(#customFilter)"を指定
  • 効果の特徴: 立体的な質感と複雑な視覚効果を地図要素に追加

地図表示

実装サンプル

GeojsonLayerの使用例

// カスタムフィルター効果を作成
const customFilter = Thematika.createCustomFilter('customFilter', 
     //ここにsvg filterを書く
);


const map = new Thematika.Map({
    container: '#map',
    width: width,
    height: height,
    projection: projection,
     defs:[customFilter]
});


// GeojsonLayerインスタンスを作成
const worldLayer = new Thematika.GeojsonLayer({
    data: geojson,                
    attr: { 
        "fill": (d, i) => i % 2 === 0 ? "#8b5cf6" : "#ec4899",
        "filter": "url(#customFilter)",
        "stroke": '#ffffff',
        "stroke-width": 0.5,
        "opacity": 0.8,
        "cursor": "pointer"
    },
});