如何在地图上显示空间场? [英] How to display a spatial field on a map?
问题描述
我的Django模型中有一个空间字段.我想在地图上显示此字段.怎么做?在带有Django内置OSMWidget和OpenLayers的Django Admin中，它工作得很好.
I have a spatial field in my Django model. I want to display this field on a map. How to do it? It works just fine in Django Admin with Django built-in OSMWidget and OpenLayers.
如果我尝试访问模板中的空间字段，则其格式如下:
If I try to access the spatial field in my template it is of this format:
SRID=4326;GEOMETRYCOLLECTION (POLYGON ((54.57842969715517 23.34800720214843, 54.53144199643833 23.29547882080078, 54.52964902093564 23.38096618652343, 54.57444978782305 23.40499877929688, 54.57842969715517 23.34800720214843)))
推荐答案
格式为WKT(众所周知的文本)，使用OL，您只需使用 ol.format.WKT 即可读取全部或单个功能( OL API-WKT格式).
The format is WKT (Well Known Text), and with OL you just need to use ol.format.WKT to read all or individual features (OL API - WKT format).
我根据OL例子 OL例子-WKT 为您提供了这个例子一个>.我想展示一种特殊性或 GEOMETRYCOLLECTION ，它可以包含不同类型的几何图形，并非总是需要巫婆.
I put this example for you, based on OL example OL Examples - WKT. I wanted to show a particularity or GEOMETRYCOLLECTION that it can contain different types of geometry, witch is not always wanted.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<title>WKT Geometry</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
const wkt = 'GEOMETRYCOLLECTION('+
'MULTIPOINT(-2 3 , -2 2),'+
'LINESTRING(5 5 ,10 10),'+
'POLYGON((-7 4.2,-7.1 5,-7.1 4.3,-7 4.2)))';
const format = new ol.format.WKT();
const features = format.readFeatures(wkt, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
const vector = new ol.layer.Vector({
source: new ol.source.Vector({
features
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ff3333',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ff3333'
})
})
})
});
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
view: new ol.View({
center: ol.proj.fromLonLat([0, 5]),
zoom: 5
})
});
</script>
</body>
</html>这篇关于如何在地图上显示空间场?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
