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

zrfyljdw  于 2021-07-13  发布在  Java
关注(0)|答案(0)|浏览(230)

我又问了一个Map框问题。
我知道如何使用jinja2在mapboxMap上显示自定义多边形。现在我想更进一步。我正在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>

但是当我运行程序时,Map不会呈现。我连Map都没看到。如果列表为空,如何使用jinja2可视化多多边形或显示Map?
{{layers | tojson}}引发类型错误。
这不能解决我的问题,因为我没有语法错误:
javascript使用jinja模板中呈现的数据引发语法错误
奖励:有没有简单的方法为每个多边形生成一个新的颜色?

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题