Django 未捕获的TypeError:$.ajax不是函数L.TileLayer.BetterWMS函数_Django_Leaflet_Geoserver

Django 未捕获的TypeError:$.ajax不是函数L.TileLayer.BetterWMS函数

django leaflet

Django 未捕获的TypeError:$.ajax不是函数L.TileLayer.BetterWMS函数,django,leaflet,geoserver,Django,Leaflet,Geoserver,我试图为我的wms显示onclick弹出窗口，但出现以下错误：未捕获的TypeError:$.ajax不是函数我按照说明从这个站点下载了jquery-3.3.1.js：并将其与位于同一目录下的L.TileLayer.BetterWMS.js一起粘贴到我的静态文件夹中，但我仍然看不到line层的属性。这是我的代码： index.html {% extends 'workorders/base.html' %} {% block jumbotron2 %} <div class="jumb

我试图为我的wms显示onclick弹出窗口，但出现以下错误：

未捕获的TypeError:$.ajax不是函数

我按照说明从这个站点下载了jquery-3.3.1.js：并将其与位于同一目录下的L.TileLayer.BetterWMS.js一起粘贴到我的静态文件夹中，但我仍然看不到line层的属性。这是我的代码：

index.html

{% extends 'workorders/base.html' %}
{% block jumbotron2 %}
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</div>
{% endblock %}

{% block content %}
<!DOCTYPE html>
<html>
{% load static %}
{% load leaflet_tags %}
<head>
  {% leaflet_js %}
  {% leaflet_css %}
  <title>Map</title>
  <style type="text/css">
      #gis {width: 100%;height:600px;}
  </style>
     <style type="text/css">
       #map {
        width: 100%;height:600px;
      }
    </style>
  <link rel="stylesheet" type="text/css" href="{% static 'dist/leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.min.css' %}">
  <script type="text/javascript" src="{% static 'dist/leaflet.ajax.js' %}" > </script>
  <script type="text/javascript" src="{% static 'dist/leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.min.js' %}" > </script>
  <script type="text/javascript" src="{% static 'L.TileLayer.BetterWMS.js' %}" > </script>
</head>
<body>

<div id="map"></div>
<script type="text/javascript" src="{% static 'jquery-3.3.1.min.js' %}"></script>

<script type="text/javascript">


      var map = L.map('map', {
        center: [42,21],
        zoom: 7
      });


      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        var datasets = L.tileLayer.wms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_ww_manholes',
        format: 'image/png',
        transparent: true
        });

      var lines = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_ww_lines',
        transparent: true,
        format: 'image/png'
      });

        datasets.addTo(map);
        lines.addTo(map);


       var basemaps = {
          OSM: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
          })
      };

        var groupedOverlays = {
          "Layers": {
            "ww_manholes": datasets,
            "ww_lines": lines
          }

        };

        L.control.groupedLayers(basemaps, groupedOverlays).addTo(map);   

</script>

</body>
</html>
{% endblock %}

      L.TileLayer.BetterWMS.js

L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({

  onAdd: function (map) {
    // Triggered when the layer is added to a map.
    //   Register a click listener, then do all the upstream WMS things
    L.TileLayer.WMS.prototype.onAdd.call(this, map);
    map.on('click', this.getFeatureInfo, this);
  },

  onRemove: function (map) {
    // Triggered when the layer is removed from a map.
    //   Unregister a click listener, then do all the upstream WMS things
    L.TileLayer.WMS.prototype.onRemove.call(this, map);
    map.off('click', this.getFeatureInfo, this);
  },

  getFeatureInfo: function (evt) {
    // Make an AJAX request to the server and hope for the best
    var url = this.getFeatureInfoUrl(evt.latlng),
        showResults = L.Util.bind(this.showGetFeatureInfo, this);
    $.ajax({
      url: url,
      success: function (data, status, xhr) {
        var err = typeof data === 'string' ? null : data;
        showResults(err, evt.latlng, data);
      },
      error: function (xhr, status, error) {
        showResults(error);  
      }
    });
  },

  getFeatureInfoUrl: function (latlng) {
    // Construct a GetFeatureInfo request URL given a point
    var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
        size = this._map.getSize(),

        params = {
          request: 'GetFeatureInfo',
          service: 'WMS',
          srs: 'EPSG:4326',
          styles: this.wmsParams.styles,
          transparent: this.wmsParams.transparent,
          version: this.wmsParams.version,      
          format: this.wmsParams.format,
          bbox: this._map.getBounds().toBBoxString(),
          height: size.y,
          width: size.x,
          layers: this.wmsParams.layers,
          query_layers: this.wmsParams.layers,
          info_format: 'text/html'
        };

    params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
    params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;

    return this._url + L.Util.getParamString(params, this._url, true);
  },

  showGetFeatureInfo: function (err, latlng, content) {
    if (err) { console.log(err); return; } // do nothing if there's an error

    // Otherwise show the content in a popup, or something.
    L.popup({ maxWidth: 800})
      .setLatLng(latlng)
      .setContent(content)
      .openOn(this._map);
  }
});

L.tileLayer.betterWms = function (url, options) {
  return new L.TileLayer.BetterWMS(url, options);  
};

{%extends'workorders/base.html%}
{%block jumbotron2%}
导航栏示例
此示例是一个快速练习，用于说明顶部对齐导航栏的工作原理。滚动时，此导航栏将保持在其原始位置，并随页面的其余部分一起移动
{%endblock%}
{%block content%}
{%load static%}
{%加载传单\标签%}
{%传单_js%}
{%传单\u css%}
地图
#gis{宽度：100%；高度：600px；}
#地图{
宽度：100%；高度：600px；
}
var map=L.map（'map'{
中心：[42,21]，
缩放：7
});
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'）.addTo（map）；
var数据集=L.tileLayer.wms（'http://localhost:8080/geoserver/geodjango/wms', {
图层：“geodjango:layer_ww_人孔”，
格式：'image/png'，
透明：正确
});
var lines=L.tileLayer.betterWms（'http://localhost:8080/geoserver/geodjango/wms', {
图层：“geodjango:layer_ww_lines”，
透明：是的，
格式：'image/png'
});
数据集。添加到（地图）；
行。添加到（地图）；
变量基本映射={
OSM:L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；”
})
};
var groupedOverlays={
“层”：{
“ww_人孔”：数据集，
“ww_线”：线
}
};
L.control.groupedLayers（底图、groupedOverlays）.addTo（地图）；
{%endblock%}
L.TileLayer.BetterWMS.js
L.TileLayer.BetterWMS=L.TileLayer.WMS.extend({
onAdd：函数（映射）{
//将图层添加到地图时触发。
//注册一个click侦听器，然后执行所有上游WMS操作
L.TileLayer.WMS.prototype.onAdd.call（this，map）；
map.on（'click'，this.getFeatureInfo，this）；
},
onRemove：函数（映射）{
//从地图中删除图层时触发。
//取消注册click侦听器，然后执行所有上游WMS操作
L.TileLayer.WMS.prototype.onRemove.call（this，map）；
map.off（'click'，this.getFeatureInfo，this）；
},
getFeatureInfo:函数（evt）{
//向服务器发出AJAX请求，希望一切顺利
var url=this.getFeatureInfoUrl（evt.latlng），
showResults=L.Util.bind（this.showGetFeatureInfo，this）；
$.ajax({
url:url，
成功：功能（数据、状态、xhr）{
var err=typeof data=='string'？null:数据；
显示结果（err、evt.latlng、数据）；
},
错误：函数（xhr、状态、错误）{
显示结果（错误）；
}
});
},
getFeatureInfoUrl:函数（latlng）{
//构造一个给定点的GetFeatureInfo请求URL
var point=this.\u map.latLngToContainerPoint（latlng，this.\u map.getZoom（）），
size=this.\u map.getSize（），
参数={
请求：“GetFeatureInfo”，
服务：“WMS”，
srs:‘EPSG:4326’，
样式：this.wmsParams.styles，
透明：this.wmsParams.transparent，
版本：this.wmsParams.version，
格式：this.wmsParams.format，
bbox:this.\u map.getBounds（）.toBBoxString（），
身高：尺码.y，
宽度：size.x，
图层：this.wmsParams.layers，
查询层：this.wmsParams.layers，
信息格式：“文本/html”
};
params[params.version=='1.3.0'？'i'：'x']=point.x；
params[params.version=='1.3.0'？'j'：'y']=point.y；
返回此。_url+L.Util.getParamString（params，this。_url，true）；
},
showGetFeatureInfo:函数（错误、板条、内容）{
if（err）{console.log（err）；return；}//如果出现错误，则不执行任何操作
//否则，在弹出窗口中显示内容或其他内容。
L.popup（{maxWidth:800}）
.setLatLng（latlng）
.setContent（content）
.openOn（这张地图）；
}
});
L.tileLayer.betterWms=函数（url，选项）{
返回新的L.TileLayer.BetterWMS（url，选项）；
};

您必须从所有

导入顶部的

js/

文件夹导入

<script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/L.TileLayer.BetterWMS.js' %}"></script>

您确定所有Javascript导入都正常工作吗？在Chrome/Firefox中打开网络集开发者

F12

Network

Ctrl+F5

L.TileLayer.BetterWMS.js:21未捕获类型错误：$。ajax不是e.getFeatureInfo（L.TileLayer.BetterWMS.js:21）在e.fire（传单.js:5）在e._fireDOMEvent（传单.js:5）在e._handleDOMEvent（传单.js:5）在HTMLDivelment.r（传单.js:5）的函数，试试这个：

var wmsLayer=L.tileLayer.wms（'https://demo.boundlessgeo.com/geoserver/ows?“，{layers:'ne:ne'}）.addTo（map）jquery-3.3.1我想这不重要，我解决了它。JQuery也被导入到另一个模板中，这就是为什么它不能工作的原因。谢谢你的帮助！