如何使用flask和jinja2在mapbox gl中渲染自定义多多边形

Question

我又问了一个地图盒问题

我了解了如何使用jinja2在mapbox地图上显示自定义多边形。现在我想更进一步。我正在python flask应用程序中创建多边形列表。列表中的每个项目都具有以下结构：

poly = {
    'type': 'Feature',
    'geometry': {
        'type': 'Polygon',
        'coordinates': []
        }
    }

坐标添加到应用程序中，如下所示：

[ [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], 
[-70.11617, 43.68405], [-70.64573, 43.09008], [-70.75102, 43.08003], [-70.79761, 43.21973],
[-70.98176, 43.36789], [-70.94416, 43.46633], [-71.08482, 45.30524], [-70.66002, 45.46022], 
[-70.30495, 45.91479], [-70.00014, 46.69317], [-69.23708, 47.44777], [-68.90478, 47.18479],
[-68.2343, 47.35462], [-67.79035, 47.06624], [-67.79141, 45.70258], [-67.13734, 45.13745] ] ]

输出列表与下面的示例完全相同： https://docs.mapbox.com/mapbox-gl-js/example/multiple-geometries/

所以有一个dict列表，每个dict都包含poly

hmtl如下所示：

<script>
  var features = {{ layers }}

  mapboxgl.accessToken = 'TOKEN';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [12.940985, 54.063782],
    zoom: 10
  });

  if (features.length > 0) {
  map.addSource('iso', {
      'type': 'geojson',
      'data': {
          'type': 'FeatureCollection'
          'features': 
              features
      }
  });

  map.addLayer({
      'id': 'iso',
      'type': 'fill',
      // Use "iso" as the data source for this layer
      'source': 'iso',
      'layout': {},
      'paint': {
          // The fill color for the layer is set to a light purple
          'fill-color': '#088',
          'fill-opacity': 0.8
       }
  });
  } 
});
</script>

但是当我运行程序时，贴图不会渲染。我甚至没看到地图。如果列表为空，如何使用jinja2可视化多多边形或显示地图

{{layers | tojson}}引发类型错误

这并不能解决我的问题，因为我没有得到SyntaxError：

JavaScript raises SyntaxError with data rendered in Jinja template

奖励：有没有简单的方法为每个多边形生成新颜色

编辑：

layers在flask app server.py中定义：

@app.route('/<path:subpath>', methods=['POST', 'GET'])
def show_subpath(subpath):
    poly = {
    'type': 'Feature',
    'geometry': {
        'type': 'Polygon',
        'coordinates': []
        }
    }
    if request.method == 'POST':
        try:
            data = request.form
            layers = []
            for key in data:
                if key == 'schulen':
                    poly['geometry']['coordinates'] = coords1
                    layers.append(poly)
                if key == 'boulderhallen':
                    poly['geometry']['coordinates'] = coords2
                    layers.append(poly)
            return render_template('/map.html', layers=layers)
    return render_template(subpath)

coords1和coords2看起来像上面提到的