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'

# 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']

# 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 %}

しかし、マップやりますテンプレートには表示されませんが、空の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

は、だから私はそれがJavaScriptをロードしないことを考えています。あるいは、ウィジェットの属性に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で

は、テンプレートのheadセクションでメディアをレンダリングします。

<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では、フィールドのウィジェットをウィジェットのクラスプロパティで指定する必要があります。

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

大変ありがとうございます。あなたは聖人です。 {{form.media}}は華麗です。私はjs/OLMapWidget.jsをdjango/contrib/gis/static/gis/js/OLMapWidget.jsから静的ディレクトリにコピーし、それをテンプレートから直接リンクした場合にのみ動作します。 –

OSMWidget - マップがテンプレートに表示されない - ReferenceError：olが定義されていません

答えて

関連する問題