Как отобразить GeoJSON на Cesium

У меня есть приложение Django, которое позволяет выполнить пространственный запрос и отобразить результат в виде GeoJSON-полигона на карте Leaflet.

Вот как я сделал это на Leaflet: Я взял геометрию, которая хранится в объекте geo_json в файле views.py, затем я добавил ее в карту Leaflet в файле geometry.html через L.geoJSON({{ geo_json | safe }}).addTo(map);.

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-полигон отображаться на карте Cesium.

Я пробовал вводить строку запроса и 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 %}
Вернуться на верх