使用传单 ajax 将外部 geojson 文件加载到传单地图中

Question

我正在尝试使用传单 ajax 加载外部 geojson。 我认为geojson的结构是真的。这是它的link。 这是我基于HERE所做的：

在头脑中：

<script src="../external/js/leaflet.js"></script>
<script src="../external/js/leaflet.functionaltilelayer.js"></script>  
<script src="../external/js/leaflet.ajax.min.js"></script> 

在javascript中：

var mymap = L.map('mapid',{ center: new L.LatLng(the_center_splitted[0],the_center_splitted[1]),maxZoom: 17, minZoom:11, zoom: 14}); //creating the map

var gs = new L.TileLayer('../external/maps/qom/gs/gs_{x}_{y}_{z}.jpg', {opacity:    1,scheme: 'TMS'}).addTo(mymap); //loading image layer

var geojsonLayer = new L.GeoJSON.AJAX("../external/map/qom/geojson/qom.geojson");

geojsonLayer.addTo(mymap);

但是 geojson 文件没有显示，我得到这个错误： naught TypeError: L.GeoJSON.AJAX 不是构造函数
如果有人可以提供帮助，我将不胜感激。 谢谢你。

Answer 1

什么是“functionaltilelayer.js”？在代码片段中，您不需要它。 并且var gs = new L.tileLayer 具有较低的 t - 更改它并再试一次！

<script src="../external/js/leaflet.js"></script> 
<script src="../external/js/leaflet.ajax.min.js"></script> 

var mymap = L.map('mapid',{ center: new L.LatLng(the_center_splitted[0],the_center_splitted[1]),maxZoom: 17, minZoom:11, zoom: 14}); //creating the map

var gs = new L.TileLayer('../external/maps/qom/gs/gs_{x}_{y}_{z}.jpg', {opacity:    1,tms: true}).addTo(mymap); //loading image layer

var geojsonLayer = new L.GeoJSON.AJAX("../external/map/qom/geojson/qom.geojson");

geojsonLayer.addTo(mymap);

Answer 2

您的代码似乎没问题 - 您导入了吗

<script src='leaflet-ajax.js'></script>

如果是，请出示您的完整代码！

Answer 3

通过 AJAX 导入文件有点棘手。 首先请记住，您提供 AJAX() 方法的相对路径应该是您的 Geojson 文件应该是从传单-ajax 脚本文件的位置开始的路径。 （因为它在那里完成了 AJAX 调用）。

我会推荐一种不同的方法（没有 AJAX 调用）：

您的 GeJson 文件（将其重命名为 gejson.js）应如下所示：

var json = { "type": "FeatureCollection",
             "features": [{ 
             ...

在您的传单 ajax 代码之前导入此文件：

<script src="../../geojson.js" type="text/javascript"></script>

这将使您能够访问一个名为 json 的变量，然后您可以使用该变量在您的层中导入 json 对象：

var geojsonLayer = L.geoJSON().addTo(mymap);
geojsonLayer.addData(json);