Я впервые делаю ГИС-приложение с CodeIgniter, Leaflet и Ajax. Я хочу показать многоугольник над моей картой с файлом geo json, который я создал с использованием geo json .io, но многоугольник не отображается. Когда я проверяю страницу в своем браузере, она показывает сообщение об ошибке, например
Failed to load modules/jenis_hutan/...geojson/map.geojson:1
resource: the server responded with a status of 404()
Вот мой код js для отображения файла geo json.
let tnSelect = $("#tn-select");
let gisCard = $("#gis-card");
let divModal = $(".div-modal");
tnSelect.change(function () {
let $val = $(this).val();
loadPage();
setCookie("tn_value", $val, 0.0833333);
window.location.reload(true);
});
$(window).on("load", function () {
let $tn_val = getCookie("tn_value");
let gisMap;
$.ajax({
method: "GET",
url: base_url + "ajax/tn_data",
dataType: "JSON",
data: {},
success: (res) => {
console.log(res);
if ($tn_val !== null) {
for (let i = 0; i < res.length; i++) {
let data = res[i];
let name = data.tn_name;
name = name.replace(
/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g,
function (letter) {
return letter.toUpperCase();
}
);
if (data.tn_id == $tn_val) {
tnSelect.append(
'<option selected id="tn_name" value="' +
data.tn_id +
'">' +
name +
"</option>"
);
gisCard.html(
'<div class="card mb-4 gis-card">' +
'<div class="card-header py-3 text-center">' +
'<h6 class="m-0 font-weight-bold text-center">' +
name +
"</h6>" +
"</div>" +
'<div class="card-body" id="gis-map"></div>' +
"</div>"
);
gisMap = L.map("gis-map").setView([data.tn_lat, data.tn_long], 12);
mapAPI.addTo(gisMap);
} else {
tnSelect.append(
'<option value="' + data.tn_id + '">' + name + "</option>"
);
}
}
} else {
for (let i = 0; i < res.length; i++) {
let data = res[i];
let name = data.tn_name;
name = name.replace(
/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g,
function (letter) {
return letter.toUpperCase();
}
);
if (i < 1) {
tnSelect.append(
'<option selected id="tn_name" value="' +
data.tn_id +
'">' +
name +
"</option>"
);
gisCard.html(
'<div class="card mb-4 gis-card">' +
'<div class="card-header py-3 text-center">' +
'<h6 class="m-0 font-weight-bold text-center">' +
name +
"</h6>" +
"</div>" +
'<div class="card-body" id="gis-map"></div>' +
"</div>"
);
gisMap = L.map("gis-map").setView([data.tn_lat, data.tn_long], 12);
mapAPI.addTo(gisMap);
} else {
tnSelect.append(
'<option value="' + data.tn_id + '">' + name + "</option>"
);
}
}
}
//**//
$.getJSON(base_url + "modules/jenis_hutan/geojson/map.geojson", function (
data
) {
geoLayer = L.geoJson(data, {
style: function (feature) {
return {
fillOpacity: 0.5,
weight: 1,
opacity: 1,
color: "#fa7268",
};
},
onEachFeature: function (feature, layer) {
var kode = feature.properties.kode;
var info_zona = "<h5 style='text-align:left'>ZONA INTI</h5>";
info_zona += "<hr>";
info_zona +=
"<div style='width:100%;text-align:left;margin-top:10px;'><h6>Luas area: 10.475 ha</h6><br><h6>Fungsi zona: Jalur pendakian</h6></div>";
layer.bindPopup(info_zona, {
maxWidth: 260,
closeButton: true,
offset: L.point(0, -20),
});
layer.on("click", function () {
layer.openPopup();
});
},
}).addTo(map);
});
},
});
});
Что-то не так с моим кодом? Это мое задание в колледже, и крайний срок - эта пятница, поэтому, пожалуйста, все просвещают меня :( или, по крайней мере, дайте мне ссылку на какой-нибудь учебник, связанный с этой вещью :( Спасибо всем.