django 如何在Cesium上显示GeoJSON

fjnneemd  于 2023-08-08  发布在  Go
关注(0)|答案(1)|浏览(111)

我有一个Django应用程序,可以运行空间查询,并在LeafletMap上以GeoJSON多边形的形式显示结果。
以下是我在Leaflet上的做法:我获取了存储在views.py文件中geo_json对象中的几何图形,然后通过L.geoJSON({{ geo_json | safe }}).addTo(map);将其添加到geometry.html文件中的LeafletMap中。
views.py

def GetGeometry(request, *args, **kwargs):

    try:
        x = request.GET.get('x')
        y = request.GET.get('y')
        
        connection = psycopg2.connect(database="xxx",user="xxx", password="xxx", host="xxx")
        cursor = connection.cursor()
        cursor.execute("SELECT xxx From xxx WHERE ST_Intersects(ST_PointFromText('POINT({} {})',4326), geom);".format(x, y))                             

        result=cursor.fetchone()

        geo_json={
                "type": "Feature",
                "geometry": json.loads(result)
                }

        
        return render(request ,'results/geometry.html', {'geo_json': geo_json })

    except:
        return render(request ,'results/geometry.html')

字符串
geometry.html

{% extends "base.html" %}

{% block content %}

{% load static %}
{% load leaflet_tags %}
{% leaflet_js %}
{% leaflet_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css' %}">
    <script type="text/javascript" src="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.js' %}" ></script>
    <style type="text/css">

    #gis {width: 100%;height:980px;}
    </style>        

    <script type="text/javascript">
        function our_layers(map,options){
            
            var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
                maxZoom: 20,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'    
            });
            
            var baseLayers = {
                "OSM": osm,
            };

            L.control.groupedLayers(baseLayers).addTo(map);
            L.geoJSON({{ geo_json | safe }}).addTo(map);
            map.fitBounds(L.geoJSON({{ geo_json | safe }}).getBounds(), {maxZoom: 19});

        }   
    </script>    
{% leaflet_map "gis" callback="window.our_layers" %}

        
{% endblock content %}


现在,我试图从Leaflet切换到Cesium,但我不知道如何让GeoJSON多边形出现在CesiumMap上。
我尝试过将查询字符串和geo_json放入Cesium.GeoJsonDataSource.load,但这两种方法似乎都不起作用。
geometry.html

{% extends "base.html" %}
{% block content %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.90/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.90/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

</head>
<body>
  <div id="cesiumContainer"></div>
  <script>

    Cesium.Ion.defaultAccessToken = 'xxx';

    const viewer = new Cesium.Viewer('cesiumContainer');
    viewer.dataSources.add(Cesium.GeoJsonDataSource.load(geo_json, {
      stroke: Cesium.Color.HOTPINK,
      fill: Cesium.Color.PINK,
      strokeWidth: 3,
      markerSymbol: '?'
}));

  </script>
 </div>
</body>
</html>
        
{% endblock content %}

w41d8nur

w41d8nur1#

我相信你必须在脚本部分直接调用“geo_json”,类似于:

const geo_json = {{ _SOURCE_FILE_OF_GEOJSON_DATA_|safe }};

字符串
然后将geo_json传递给:

viewer.dataSources.add(Cesium.GeoJsonDataSource.load(geo_json {...


就像你已经在你的代码中一样。

相关问题