在Django模板中显示PostgreSQL数据库中WKB POINT字段的传单Map坐标

vmjh9lq9  于 2023-11-18  发布在  PostgreSQL
关注(0)|答案(1)|浏览(122)

我对GEO的所有东西都是新手。我在PostgreSQL数据库中有一个WKB POINT字段,用于存储位置。我在Django模板上也有一个传单Map,添加了硬编码的lat和long,它在我的前端显示了一个工作Map。
POINT示例:0101000020E610000051954507C62C1FC0144708B9E6784840
有人能建议我如何解码点字段,并插入纬度和经度到我的模板,使Map将更新到正确的位置从数据库?
如果你还需要模特之类的东西,请告诉我。任何帮助都很感激。

模板.html

<div style="padding-top: 280px">
    <h3 style="padding-bottom: 20px;">Location</h3>
     <script>
      function map_init_basic (map, options) {
        
          L.marker([11.5, 20.5]).addTo(map);
          map.panTo(new L.LatLng(11.737, 20.923));
        
      }
     </script>

{% leaflet_map "mymap" callback="window.map_init_basic" %}

字符串

h9vpoimq

h9vpoimq1#

如果你的数据存储在PostgreSQL数据库中,并且你有一个Django模型来表示它,你应该将纬度和经度传递给你的模板,并在视图中进行WKB解码。
你的models.py文件应该有这个代码

from django.contrib.gis.db import models

    class YourModel(models.Model):
        location = models.PointField()

字符串
views.py文件应该包含此代码

from django.shortcuts import render
from django.contrib.gis.geos import GEOSGeometry

def your_view(request):
    # Assuming you have a queryset that retrieves the data from your database
    queryset = YourModel.objects.all()

    # Extracting latitude and longitude from the POINT field
    location_data = []
    for instance in queryset:
        # Decode WKB and extract coordinates
        point = GEOSGeometry(instance.location.wkb)
        lat, lon = point.y, point.x

        # Append latitude and longitude to the location_data list
        location_data.append({'lat': lat, 'lon': lon})

    context = {'location_data': location_data}
    return render(request, 'your_template.html', context)


现在可以通过更新your_template. html中的JavaScript代码来使用提取的纬度和经度。
下面是template.html文件的更新代码

<div style="padding-top: 280px">
    <h3 style="padding-bottom: 20px;">Location</h3>
    <script>
        function map_init_basic(map, options) {
            {% for location in location_data %}
                L.marker([{{ location.lat }}, {{ location.lon }}]).addTo(map);
            {% endfor %}
            
            // You may want to adjust the center based on your data
            map.panTo(new L.LatLng({{ location_data.0.lat }}, {{ location_data.0.lon }}));
        }
    </script>

    {% leaflet_map "mymap" callback="window.map_init_basic" %}
</div>


希望能成功:)

相关问题