React.js에서 다음 Mapbox 맵 레이어를 작성하려면 어떻게해야합니까?

ReactMapboxGl을 사용하여지도 상자 맵 위에 다각형 레이어를 만들려고합니다. 나는 React.js에 다음 Mapbox 자바 스크립트 코드를 변환 할 :React.js에서 다음 Mapbox 맵 레이어를 작성하려면 어떻게해야합니까?

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

: 내 현재 버전은 다음과 같이 보인다.

출처

2017-11-18 Basim Sahaf

업데이트 : 위의 문제가 수정되었으며지도가 표시됩니다. 그러나 Polygon은지도에 나타나지 않습니다. 어떤 생각이 잘못 됐어? –

당신은 너무 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

출처

2017-11-18 22:05:12 WilomGfx

고마워, 내가 얻던 오류를 수정했다. 지도가 나타나더라도 폴리곤은 표시되지 않습니다. 왜 그런가? –

귀하의 GeoJSON 같은 소스 소품에 브래킷을 누락하는 것은 유효하지 않습니다. 모든 기능에는 properties 개체가 있어야합니다. 따라서 다음을 추가 할 수 있습니다 :

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

나는 이것이 문제의 원인인지 확실치 않습니다.

출처

2017-12-04 03:58:38

React.js에서 다음 Mapbox 맵 레이어를 작성하려면 어떻게해야합니까?

답변

관련 문제