这些数据的格式是什么？ Mapbox Javascript 问题答案

【问题标题】：What is the format of this data? Mapbox Javascript issues这些数据的格式是什么？ Mapbox Javascript 问题
【发布时间】：2020-12-30 18:13:46
【问题描述】：

我一直在尝试使用 javascript 创建一个像这样的 Mapbox 图：https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/)。

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

任何想法都会很棒！我是 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>

【问题讨论】：

标签： javascript mapbox geojson

【解决方案1】：

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

矢量瓦片集生成矢量瓦片集操作有点繁重，但它是客户端性能的不错选择

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

GeoJSON 通常，您将创建一个端点，该端点返回从数据库生成的完整 GeoJSON。如果 GeoJSON 的大小很大，最好实现一个接收坐标并返回附近数据的端点。

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

然后我做了：

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

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

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

【讨论】：