OSMWidget -지도가 템플릿에 표시되지 않습니다. ReferenceError : ol이 정의되지 않았습니다.

OSMWidget을 일반 CreateVIew 템플릿을 사용하는 양식으로 표시하려고합니다.OSMWidget -지도가 템플릿에 표시되지 않습니다. ReferenceError : ol이 정의되지 않았습니다.

# models.py 
class Building(models.Model): 
    point = PointField('kort markør', null=True) 
    country = models.CharField('land', max_length=100, blank=True, null=True, default='Danmark') 
    city = models.CharField('by', max_length=100, blank=True, null=True)

# views.py 
from django.contrib.auth.mixins import LoginRequiredMixin 
from django.urls import reverse_lazy 
from django.views.generic import ListView, CreateView, UpdateView, DeleteView, DetailView 
from django.contrib.gis import forms 

from .forms import BuildingForm 
from .models import Building 

class BuildingCreateView(LoginRequiredMixin, CreateView): 
    form_class = BuildingForm 
    template_name = 'cms/building_form.html'

# buildings_form.html 
{% block content %} 

    <form enctype="multipart/form-data" method="post" action=""> 
     {% csrf_token %} 
     <ul> 
      {{ form.as_ul }} 
     </ul> 
     <input type="submit" value="Submit"/> 
    </form> 

{% endblock %}

# forms.py 

from django.contrib.gis.forms import OSMWidget, PointField, ModelForm 

from .models import Building 


class BuildingForm(ModelForm): 
    point = PointField(
     widget=OSMWidget(
      attrs={'map_width': 600, 
        'map_height': 400, 
        'template_name': 'gis/openlayers-osm.html', 
        'default_lat': 57, 
        'default_lon': 12})) 

    class Meta: 
     model = Building 
     fields = ['city', 'country', 'point']

그러나지도 할 템플릿에 표시되지 않지만 빈 div로 표시됩니다. 요소를 검사하면 이걸 볼 수 있습니다.

# web inspector 

    <script type="text/javascript"> 
    var map_options = {}; 

    var base_layer = new ol.layer.Tile({source: new ol.source.OSM()}); 

    var options = { 
     base_layer: base_layer, 
     geom_name: 'Point', 
     id: 'id_point', 
     map_id: 'id_point_map', 
     map_options: map_options, 
     map_srid: 3857, 
     name: 'point' 
    }; 

    options['default_lon'] = 12; 
    options['default_lat'] = 57; 
    options['default_zoom'] = 12; 

    var geodjango_point = new MapWidget(options); 
</script>

그리고 콘솔 출력이 오류 :

ReferenceError: ol is not defined 그래서 나는 그것이 자바 스크립트를로드하지 않는 것을 생각하고있다. 또는 위젯 속성에 js가 어디에 있는지 구체적으로 설명해야합니다. 그러나 나는 문서에서 아무것도 찾을 수 없습니다.

은 또한 다음과 같은 시도 : 그것은 cloudflare에서 자원을로드를하지만 ReferenceError: MapWidget is not defined

# building_form.html 
{% block extra_css %} 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css"> 
{% endblock %} 

{% block extra_js %} 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js"></script> 
{% endblock %}

과를 던지는 JS를 양식 미디어 클래스에이를 추가,하지만 트리거하지 않습니다 및 템플릿의 head 섹션에 CSS를하고 ReferenceError: ol is not defined

class BuildingForm(ModelForm): 
    point = PointField(
     widget=OSMWidget(
      attrs={'map_width': 600, 
        'map_height': 400, 
        'template_name': 'gis/openlayers-osm.html', 
        'default_lat': 57, 
        'default_lon': 12})) 

    class Meta: 
     model = Building 
     fields = ['project', 'description', 'point'] 

    class Media: 
     css = { 
      'all': (
       'https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css', 
       'gis/css/ol3.css', 
      ) 
     } 
     js = (
      'https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js', 
      'gis/js/OLMapWidget.js', 
     )

을 발생하지만 콘솔의 모든 미디어의 내용을 테스트하는 경우 괜찮습니다 :

w = BuildingForm() 
>>> print(w.media) 
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" type="text/css" media="all" rel="stylesheet" /> 
<link href="/static/gis/css/ol3.css" type="text/css" media="all" rel="stylesheet" /> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js"></script> 
<script type="text/javascript" src="/static/gis/js/OLMapWidget.js"></script>

아무도 도와 줄 수 있습니까? 나는 혼란 스럽다. 감사합니다. .

출처

2017-12-11 quench mahogany

변화의 몇 여기에서있다 : buildings_form.html에서

는, 템플릿의 머리 부분에 미디어를 렌더링합니다.

<html> 
<head> 
    {{ form.media }} 
</head> 

<body> 
    <div id="map"> 
     <form enctype="multipart/form-data" method="post" action=""> 
      {% csrf_token %} 
       {{ form.as_p }} 
      <input type="submit" value="Submit"/> 
     </form> 
    </div> 
</body> 
</html>

당신이 가지고있는 것처럼 ModelForm 서브 클래스, 사용자 정의 CreateView에서 폼 클래스로 설정 할 필요가있다.

class MapCreateView(CreateView): 
    form_class = MapForm 
    template_name = 'buildings_form.html'

또한 사용자 정의 ModelForm에서 필드의 위젯은 widgets 클래스 특성으로 지정되어야합니다.

class BuildingForm(ModelForm): 
    class Meta: 
     model = Building 
     fields = ('point',) 
     widgets = { 
      'point': gis_forms.OSMWidget(
       attrs={ 
        'map_width': 800, 
        'map_height': 500, 
       } 
      ) 
     }

출처

2017-12-12 12:25:03

고맙습니다. @oluwafemi_sule은 성자입니다. {{form.media}}가 훌륭합니다. django/contrib/gis/static/gis/js/OLMapWidget.js에서 js/OLMapWidget.js를 내 정적 디렉토리에 복사 한 다음 템플릿에서 직접 링크를 복사 한 경우에만 작동합니다. –

OSMWidget -지도가 템플릿에 표시되지 않습니다. ReferenceError : ol이 정의되지 않았습니다.

답변

관련 문제