Mapboxgl.js 및 GeoJSON의 '원색'데이터 기반 스타일링을 사용하는 중에 오류가 발생하지만 기본 색상으로 잘 작동합니다.

Question

GeoJSON 및 Mapbox를 사용하여 데이터 포인트를 작성하려고합니다. 모든 포인트에 대해 기본 색상 코드를 사용할 때 제대로 작동하지만 데이터 유도 스타일링을 사용하여 다른 속성 값에 다른 색상을 지정하면 오류가 발생합니다. mapboxgl.js를 사용하고 있습니다.

나는 크롬에서 다음과 같은 오류가 검사받을 :

net::ERR_INTERNET_DISCONNECTED 
exports.getJSON @ ajax.js:33 
evented.js:111 Error 
at XMLHttpRequest.r.onerror (ajax.js:18) 

도와주세요! 내 GeoJSON 및 HTML 파일은 다음과 같습니다.

mapboxgl.accessToken = 'pk.eyJ1Ijoicml0YW1iaGFyYSIsImEiOiJjajZuNGZjNHUwNHgxMzNwc29hZ2ZkbmRvIn0.4kTuXEpbJBeoN3jCp3pfwQ'; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/dark-v9', 
    center: [-121.403732, 40.492392], 
    zoom: 10 
}); 
map.on("load", function() { 
    map.addSource('pH', { 
     'type': 'geojson', 
     'data': 'test.json' 
    }); 
    map.addLayer({ 
     id: 'heat-map', 
     type: 'circle', 
     source: 'pH', 
     paint: { 
      // 'circle-color': '#f1f075', 
      'circle-color': { 
       property: 'value', 
       stops: [ 
        [6, '#f1f075'], 
        [10, '#e55e5e'] 
       ]   
      }, 
      "circle-radius": 6, 
      'circle-opacity': 0.8 
     }, 
    }); 
}); 

GeoJSON 파일 :

{ 
    "type": "FeatureCollection", 
    "features": [{ 
     "type": "Feature", 
     "properties": { "value": "7" }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [-121.415061, 40.506229] 
     } 
    }, { 
     "type": "Feature", 
     "properties": { "value": "8" }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [-121.505184, 40.488084] 
     } 
    }, { 
     "type": "Feature", 
     "properties": { "value": "9" }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [-121.354465, 40.488737] 
     } 
    }] 
} 

Answer 1

나는 문제가 인해 value의이 문자열이 아닌 숫자로 geojson에 있다는 사실을 믿습니다. 나는 당신의 예제 코드를 다음과 같이 번호로 변경하면 나를 위해 일한

{ 
    "type": "FeatureCollection", 
    "features": [{ 
     "type": "Feature", 
     "properties": { "value": 7 }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [-121.415061, 40.506229] 
     } 
    }, { 
     "type": "Feature", 
     "properties": { "value": 8 }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [-121.505184, 40.488084] 
     } 
    }, { 
     "type": "Feature", 
     "properties": { "value": 9 }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [-121.354465, 40.488737] 
     } 
    }] 
} 

당신은 여전히 ​​당신이 로컬 서버를 실행해야 할 수도 있습니다 AJAX 오류가 발생하면 (당신은 당신의 프로젝트 폴더에 python -m SimpleHTTPServer이 작업을 수행 한 후로드 할 수 있습니다 브라우저에서 localhost:8000/path/to/index.html)