javascript - 如何使用数据库信息在 Django 框架中的 Leaflet 中进行映射？

Question

我在 Django 框架的 Leaflet 映射 (JavaScript) 中显示 SQL 查询结果时遇到问题。

我正在尝试 (1) 查询 PostgreSQL 数据库，然后 (2) 使用这些结果使用 geoJSON 格式在地图上绘制地理信息。

这显示了我如何在我的 views.py 文件中查询数据。

 qrjsScript = "CREATE TEMP VIEW agJson AS SELECT ST_AsGeoJSON(geom) FROM buildings; SELECT json_agg(ST_AsGeoJSON(ST_Transform(geom,4326))) FROM buildings;"
        print('qrjsScript was be created')
        cur.execute(qrjsScript)
        print('Executed qrjsSCript')
        qrjs = json.loads(json.dumps(cur.fetchall()).replace("'",""))
        print('Fethched qrjs')


        context = {
            "query_result10": query_result10,
            "query_result25": query_result25,
            "query_result50": query_result50,
            "query_resultall": query_resultall,
            "qrjs": qrjs,
        }
        return HttpResponse(template.render(context, request))

我的 HTML 文档显示以下代码：

<!-- MAP - https://leafletjs.com/examples/geojson/ -->


            <div id="mapid" style="width: 100%; height: 500px; border: dotted;">
                <script>

                    var mymap = L.map('mapid').setView([61.168, -149.8813], 10);
                    var q = [{"type":"MultiPolygon","coordinates":[[[[-149.72338652766,61.1241310732884],[-149.723306492926,61.1241347033877],[-149.723286765036,61.1241509286142],[-149.723242555995,61.1241529338634],[-149.723213286266,61.1241382068663],[-149.722979311586,61.1241488175764],[-149.72296258821,61.1240628206917],[-149.723128666374,61.1240552877427],[-149.723130999702,61.1240672832556],[-149.723194724409,61.1240643935417],[-149.72322540512,61.124047627999],[-149.72326448864,61.1240458554958],[-149.723294540424,61.124060479073],[-149.723372113455,61.1240569606234],[-149.72338652766,61.1241310732884]]]]},{"type":"MultiPolygon","coordinates":[[[[-149.89717999948,61.1513470000162],[-149.89693000048,61.1513489997907],[-149.89692799917,61.1512769997723],[-149.897177999458,61.1512750000028],[-149.89717999948,61.1513470000162]]]]}]
                    var n = {{ qrjs|safe }}
                    console.log(n);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                        maxZoom: 18,
                        id: 'mapbox.streets',
                    }).addTo(mymap);
                    L.geoJSON(q).addTo(mymap);
                    L.geoJSON(n).addTo(mymap);




                </script>
            </div>

当我打开我的网站时，我的地图应该显示许多多边形，但事实并非如此。

谁能帮我找出我做错了什么？

我还在下面包含了部分查询结果：

标签： javascriptpythonjsondjangoleaflet