Чтение локального файла geojson с Mapbox - PullRequest
Новая
       27

Чтение локального файла geojson с Mapbox

0 голосов
/ 12 сентября 2018

В настоящее время я пытаюсь сделать простую визуализацию, используя Mapbox, которая основана на дополнительных данных, предоставленных локальным файлом geojson.Я не могу загрузить этот файл в Mapbox и хотел бы сохранить его локальным.

Я использовал этот базовый код из Mapbox , который я изменил, чтобы включить локальный файл geojson, который имеет такую ​​структуру: 

{"features": [{"geometry": null, "location": {"coordinates": [40.730610, -73.935242], "type": "Point"}, "properties": {"X": "1", "group": "1"}, "type": "Feature"},...}

Я изменил пример кода из Mapbox, чтобы он стал таким: 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Style circles with a data-driven property</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibG9ubmliZXNhbmNvbiIsImEiOiJjamxjaWNpOHQwMHV0M3FwaHhneGhvY2l2In0.7GxI8W_dnTKITNF4hEvZeQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 12,
    center: [-73.935242, 40.730610],
    pitch: 20,
});


var url = "GeoObs.json.json"

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

    var layers = map.getStyle().layers;

    var labelLayerId;
    for (var i = 0; i < layers.length; i++) {
        if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
            labelLayerId = layers[i].id;
            break;
        }
    }

     map.addSource("my_data", {
        type: "geojson",
        data: url //"./GeoObs.json",
        /*cluster: true,
        clusterMaxZoom: 15, // Max zoom to cluster points on
        clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)*/
    });


    map.addLayer({
        'id': 'population',
        'type': 'circle',
        source: 'my_data',
        'source-layer': 'my_data',
        'paint': {
            // make circles larger as the user zooms from z12 to z22
            'circle-radius': {
                'base': 1.75,
                'stops': [[12, 2], [22, 180]]
            },
            // color circles by ethnicity, using a match expression
            // https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
            'circle-color': [
                'match',
                ['get', 'group'],
                '1', '#fbb03b',
                '2', '#223b53',
                '3', '#e55e5e',
                '4', '#3bb2d0',
                /* other */ '#ccc'
            ]
        }
    });

    map.addLayer({
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
            'fill-extrusion-color': '#aaa',

            // use an 'interpolate' expression to add a smooth transition effect to the
            // buildings as the user zooms in
            'fill-extrusion-height': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "height"]
            ],
            'fill-extrusion-base': [
                "interpolate", ["linear"], ["zoom"],
                10, 0,
                15.05, ["get", "min_height"]
            ],
            'fill-extrusion-opacity': .6
        }
    }, labelLayerId);
});

</script>

</body>
</html>

Я получаю следующую ошибку: 

Error: Source layer "my_data" does not exist on source "my_data" as specified by style layer "population"
    at i._validateLayer (style.js:274)
    at i.addLayer (style.js:576)
    at o.addLayer (map.js:1175)
    at o.<anonymous> (index3.html:52)
    at o.L.fire (evented.js:115)
    at o._render (map.js:1619)
    at map.js:1683

Может кто-нибудьукажи мне в направлении возможной ошибки здесь и, надеюсь, как это исправить.Вы можете использовать пример geojson, который я вам дал, чтобы опробовать этот пример.Просто скопируйте и вставьте его в файл с именем: GeoObs.json, если вы хотите, чтобы код сразу выдавал ту же ошибку.

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Как гласит ошибка, ваш источник GeoJSON не имеет исходного слоя. Таким образом, вы можете удалить свойство 'source-layer' из вызова map.addLayer.

Ваш GeoJSON также необходимо изменить на правильную коллекцию FeatureCollection: 

{
  "type": "FeatureCollection",
  "features": [
    {
      "geometry": {
        "type": "Point",
        "coordinates": [
          -73.935242,
          40.730610
        ]
      },
      "properties": {
        "X": "1",
        "group": "1"
      },
      "type": "Feature"
    }
  ]
}
0 голосов
/ 12 сентября 2018

Для слоя населения закомментируйте строку, потому что у вас нет такого слоя: 

'source-layer': 'my_data',

И, возможно, у вас есть дополнительный «.json» в URL: 

GeoObs.json.json

[https://jsfiddle.net/c5nauwgx/]

...