🧩

turfのFeatureをTerraDrawのFeaturesに追加する方法

に公開
Vue 3
Turf.js
terradraw
tech

本編

turfの関数で出力したFeature<Polygon>(GeoJSONのFeature)は、
そのままではTerraDrawのFeaturesに追加できないです。

なので、下記のプロパティを追加します。

  • properties.mode
  • id

STEP1

TerraDraw側でidを発行する。

<script setup lang="ts">
// TerraDrawのインスタンスを作成
const draw = new TerraDraw({
  (略)
  modes: [
    // 必須
    new TerraDrawPolygonMode(),
  ],
});

// id発行
const id = draw.getFeatureId()
</script>

取得しているのではなく生成している点に注意です。
drawのFeatureIdを取得しているわけでない。

参考: 2.STORE.md

STEP2

Feature<Polygon>を改造する。

/**
 * FeatureをTerraDraw向けに変換
 * @param feature turfで出力したFeature
 * @returns 変換後のFeature
 */
const convertFeature = (feature: Feature<Polygon>,featureId:string|number) => {
  // IDがない場合
  if (!feature.id) {
    feature = {
      ...(feature || {}),
      // 発行したIDを付与
      id: featureId,
    };
  }
  if(!feature.properties || !feature.properties.mode){
    // プロパティにmodeがないので追加
    feature.properties = { 
        ...(feature.properties || {}),
        // 追加先のTerraDrawインスタンスのmodesにTerraDrawPolygonMode()がないとエラーが出る
        //自身でmodeNameを決めていれば、そちらを使うこと
        mode: "polygon", 
    };
  }
  return feature;
};

STEP3

変換後のFeatureをTerraDrawのFeaturesに追加する

<script setup lang="ts">
// convertedはconvertFeatureの出力結果
const result = draw.addFeatures([converted]);
// 検証に合格しなかったFeatureのリストを作成
const invalidFeatures = result.filter(({ valid }: any) => !valid);

invalidFeatures.forEach(({ reason }: any) => {
// コンソールにエラー内容を出力
console.error("invalid Features Reason=", reason);
});
</script>

STEP4

コンソールにエラーが出ていれば、対処する。
エラーが出ないようであれば、invalidFeaturesは削除して構いません。

余談

下記のページにGeoJSONのFeatureを使う時の注意点が書いてあります。

terra-draw/guides/4.MODES.md at main · JamesLMilner/terra-draw · GitHub

Discussion