将geoJSON tileet添加为Mapbox GL-JS中的图层 [英] Adding geoJSON tileset as a layer in Mapbox GL-JS

问题描述

我想将geoJSON tileet作为图层添加到我的地图中.(这是天气雷达数据 - 随着数据每隔几分钟刷新一次，它将托管在我的服务器上.)我如何做到这一点并为其设置样式?也许这似乎是一个愚蠢的问题，但我已经四处搜寻，但没有解决方案.我看到了

解决方案

如果您的意思是"GeoJSON源"而不是"GeoJSON磁贴集"，那么它很简单:

 map.on('load'，function(){map.addSource('mysource'，{类型:"geojson"，网址:"http://example.com/mycode.geojson"});map.addLayer({'id':'mylayer'，'type':'line'，'source':'mysource'，});}); 

I am wanting to add a geoJSON tileset to my map as a layer. (This is weather radar data- it will be hosted on my server as the data refreshes every few minutes.) How do I do this and style it? Maybe this seems like a dumb question but I have searched far and wide without a solution. I see this Mapbox GL-JS vector tileset example but it does not show how to make a vector tileset from geoJSON.

All I would like to do is add the layer and style it by color.

The closest example code I can find from Mapbox is:

   map.on('load', function() {
    map.addSource('mapbox-terrain', {
        type: 'vector',
        url: 'mapbox://mapbox.mapbox-terrain-v2'
    });
    map.addLayer({
        'id': 'terrain-data',
        'type': 'line',
        'source': 'mapbox-terrain',
        'source-layer': 'contour',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#ff69b4',
            'line-width': 1
        }
    });
});

However, no matter how I try to edit it, I don't understand how to change the source to geoJSON. (I have tried changing type to geoJSON, and changing the URL to my .JSON file, for example. The only result is that nothing is displayed, even with their default styling.

Here is how my data is arranged, and how I want to style :

   {
    "type": "Feature",
    "geometry": {      "type": "Polygon",
      "coordinates": [
        [
          [-98.04771180146541, 29.69276273017396],
          [-98.04989507423406, 29.691557294069924],
          [-98.05007422056916, 29.691808116379576],
          [-98.04787303016978, 29.69298847287841],
          [-98.04771180146541, 29.69276273017396]
        ]
      ]
     },
     "properties": {
        "sweep": 1,
        "sweepTime": "2017-02-20T04:40:19Z",
        "elevAngle": 0.519104,
        "value": 21.0, //  << this value determines color of polygon styling (0-70)
        "radialAng": 238.16986,
        "begGateRan": 2249.9092,
        "endGateRan": 2499.8992,
        "heightRel": 20.683022,
        "heightASL": 213.62143
     }
   }

I hope I am not confused, but in this Stack Overflow answer, Steve Bennett explains to someone on a related topic :

To the best of my knowledge, Mapbox-GL-JS uses GeoJSON-VT to automatically convert client-side-loaded GeoJSON files into vector tiles within the browser

So it seems this is possible to do - but how? Most of the documentation is for using Mapbox Studio, and I am just trying to do it through Javascript. Any help is appreciated as this has been an issue for a long time and I am now dedicating all of my time to tackling it.

As a final visual, this is what I what I am trying to accomplish over the map :

解决方案

If what you mean is a "GeoJSON source" rather than a "GeoJSON tileset", it's as simple as:

map.on('load', function() {
    map.addSource('mysource', {
        type: 'geojson',
        url: 'http://example.com/mycode.geojson'
    });
    map.addLayer({
        'id': 'mylayer',
        'type': 'line',
        'source': 'mysource',
    });
});

这篇关于将geoJSON tileet添加为Mapbox GL-JS中的图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！