这个数据的格式是什么？ Mapbox Javascript 个问题

Question

我一直在尝试使用 javascript.

创建像这样的 Mapbox 图：https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/)

我正在尝试使用来自 psql 的数据（具有包括纬度和经度的特征列）通过 Python（烧瓶）后端传递到我的 html 文件中来创建它。我可以让 linked 绘图工作，但看不到如何在其中获取我自己的数据。我已经尝试 map.addSource 使用 GeoJSON 文件的功能，但我无法让它工作。我觉得如果我可以复制他们使用的 link 中的数据，我可以绘制它，但我看不到数据！

任何想法都会很棒！我是 JS 的新手，所以虽然我阅读了文档，但我可能遗漏了一些信息。

代码如下：

<!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.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.0.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>
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = '<your access token here>';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      zoom: 12,
      center: [-122.447303, 37.753574]
    });

    map.on('load', function() {
      /* Sample feature from the `examples.8fgz4egr` tileset:
      {
      "type": "Feature",
      "properties": {
      "ethnicity": "White"
      },
      "geometry": {
      "type": "Point",
      "coordinates": [ -122.447303, 37.753574 ]
      }
      }
      */
      map.addSource('ethnicity', {
        type: 'vector',
        url: 'mapbox://examples.8fgz4egr'
      });
      map.addLayer({
        'id': 'population',
        'type': 'circle',
        'source': 'ethnicity',
        'source-layer': 'sf2010',
        '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://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
          'circle-color': [
            'match', ['get', 'ethnicity'],
            'White',
            '#fbb03b',
            'Black',
            '#223b53',
            'Hispanic',
            '#e55e5e',
            'Asian',
            '#3bb2d0',
            /* other */
            '#ccc'
          ]
        }
      });
    });
  </script>

</body>

</html>

Answer 1

Mapbox GL JS 支持 GeoJSON 源或 Vector 源来显示矢量数据。即没有其他选择来显示数据。这里有一些选项。

矢量瓦片集生成 Vector tileset 操作有点繁重，但对于客户端性能来说是一个不错的选择

1-1。托管在 Mapbox 上：使用 MTS 管理托管在 Mapbox 服务器上的矢量瓦片集。 1-2。在您的服务器上托管：使用 tippecanoe 工具在您的服务器上创建矢量切片集并在您的服务器上托管。

GeoJSON 通常，您将创建一个 returns 从数据库生成的完整 GeoJSON 的端点。如果 GeoJSON 的大小很大，那么实现采用坐标和 returns 附近数据的端点是个不错的主意。

在这种情况下，我最终在 Python 中使用 geojson 从 SQLAlchemy 数据创建 json 文件，然后从后端传递它并通过使用 jinja2.html 文件。

然后我做了：

var data = JSON.parse(‘{{ json_data | tojson }}’)

然后将这些数据导入我的地图！！！

尝试了一下，但这似乎是将 SQLAlchemy 数据放到 mapbox 上的最流畅的方法。处理超过 200 行数据时，速度可能会变慢，但这是目前的一个很好的解决方案！

这个数据的格式是什么？ Mapbox Javascript 个问题

What is the format of this data? Mapbox Javascript issues

javascript

geojson

mapbox