React.jsに次のMapboxマップレイヤを書き込むにはどうすればよいですか？

Question

ReactMapboxGlを使用してマップボックスマップ上にポリゴンレイヤーを作成しようとしています。私はReact.jsに次のMapbox JavaScriptコードを変換したい：

Line 29: 'type' is not defined no-undef 
Line 30: 'data' is not defined no-undef 

私はreact-mapbox-glから種類やデータをインポートしようとした：私は次のエラーを取得しています

map.on('load', function() { 
 

 
    map.addLayer({ 
 
     'id': 'maine', 
 
     'type': 'fill', 
 
     'source': { 
 
      'type': 'geojson', 
 
      'data': { 
 
       'type': 'Feature', 
 
       'geometry': { 
 
        'type': 'Polygon', 
 
        'coordinates': [[[-67.13734351262877, 45.137451890638886], 
 
         [-66.96466, 44.8097], 
 
         [-68.03252, 44.3252], 
 
         [-69.06, 43.98], 
 
         [-70.11617, 43.68405], 
 
         [-70.64573401557249, 43.090083319667144], 
 
         [-70.75102474636725, 43.08003225358635], 
 
         [-70.79761105007827, 43.21973948828747], 
 
         [-70.98176001655037, 43.36789581966826], 
 
         [-70.94416541205806, 43.46633942318431], 
 
         [-71.08482, 45.3052400000002], 
 
         [-70.6600225491012, 45.46022288673396], 
 
         [-70.30495378282376, 45.914794623389355], 
 
         [-70.00014034695016, 46.69317088478567], 
 
         [-69.23708614772835, 47.44777598732787], 
 
         [-68.90478084987546, 47.184794623394396], 
 
         [-68.23430497910454, 47.35462921812177], 
 
         [-67.79035274928509, 47.066248887716995], 
 
         [-67.79141211614706, 45.702585354182816], 
 
         [-67.13734351262877, 45.137451890638886]]] 
 
       } 
 
      } 
 
     }, 
 
     'layout': {}, 
 
     'paint': { 
 
      'fill-color': '#088', 
 
      'fill-opacity': 0.8 
 
     } 
 
    }); 
 
});

しかし、それは動作しません。任意の助けをいただければ幸いです

import ReactMapboxGl, {Layer, Feature } from "react-mapbox-gl"; 
 

 
class MapBoxCustom extends React.Component { 
 
    render() { 
 
    return (
 
     <Map 
 
     style="mapbox://styles/mapbox/streets-v9" 
 
     center={[-114.090194,51.066226]} 
 
     containerStyle={{ 
 
      height: "100vh", 
 
      width: "100vw" 
 
     }}> 
 
     <Layer 
 
      id = 'Polygon' 
 
      type= 'fill' 
 
      source= { 
 
      type = 'geojson', 
 
      data = { 
 
       'type': 'Feature', 
 
       'geometry': { 
 
       'type': 'Polygon', 
 
       'coordinates': [[[-67.13734351262877, 45.137451890638886], 
 
       [-66.96466, 44.8097], 
 
       [-68.03252, 44.3252], 
 
       [-69.06, 43.98], 
 
       [-70.11617, 43.68405], 
 
       [-70.64573401557249, 43.090083319667144], 
 
       [-70.75102474636725, 43.08003225358635], 
 
       [-70.79761105007827, 43.21973948828747], 
 
       [-70.98176001655037, 43.36789581966826], 
 
       [-70.94416541205806, 43.46633942318431], 
 
       [-71.08482, 45.3052400000002], 
 
       [-70.6600225491012, 45.46022288673396], 
 
       [-70.30495378282376, 45.914794623389355], 
 
       [-70.00014034695016, 46.69317088478567], 
 
       [-69.23708614772835, 47.44777598732787], 
 
       [-68.90478084987546, 47.184794623394396], 
 
       [-68.23430497910454, 47.35462921812177], 
 
       [-67.79035274928509, 47.066248887716995], 
 
       [-67.79141211614706, 45.702585354182816], 
 
       [-67.13734351262877, 45.137451890638886]]] 
 
      } 
 
      } 
 
     } 
 
     paint={{ "fill-color": "#81D8D0", "fill-opacity": 0.5 }}/> 
 
     </Map> 
 
    ); 
 
    } 
 
}

：私の現在のバージョンは次のようになります。

Answer 1

のでsource: { { yourData } }

  <Layer 
       id = 'Polygon' 
       type= 'fill' 
       source= {{ //missing a bracket here 
       type = 'geojson', 
       data = { 
        'type': 'Feature', 
        'geometry': { 
        'type': 'Polygon', 
        'coordinates': [[[-67.13734351262877, 45.137451890638886], 
        [-66.96466, 44.8097], 
        [-68.03252, 44.3252], 
        [-69.06, 43.98], 
        [-70.11617, 43.68405], 
        [-70.64573401557249, 43.090083319667144], 
        [-70.75102474636725, 43.08003225358635], 
        [-70.79761105007827, 43.21973948828747], 
        [-70.98176001655037, 43.36789581966826], 
        [-70.94416541205806, 43.46633942318431], 
        [-71.08482, 45.3052400000002], 
        [-70.6600225491012, 45.46022288673396], 
        [-70.30495378282376, 45.914794623389355], 
        [-70.00014034695016, 46.69317088478567], 
        [-69.23708614772835, 47.44777598732787], 
        [-68.90478084987546, 47.184794623394396], 
        [-68.23430497910454, 47.35462921812177], 
        [-67.79035274928509, 47.066248887716995], 
        [-67.79141211614706, 45.702585354182816], 
        [-67.13734351262877, 45.137451890638886]]] 
       } 
       } 
      }} // and here 

Answer 2

あなたにGeoJSONが有効でないようにあなたは、ソースの小道具にブラケットを欠けています。すべての機能にはpropertiesオブジェクトが必要です。したがって、あなたは次のように追加することができます：

data = { 
       'type': 'Feature', 
       'properties': {}, 
       'geometry': { 

私はそれが問題の原因であるかどうかはわかりません。