我有一个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: '© <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 %}
型
1条答案
按热度按时间w41d8nur1#
我相信你必须在脚本部分直接调用“geo_json”,类似于:
字符串
然后将geo_json传递给:
型
就像你已经在你的代码中一样。