Мой полигон geo json не отображается на карте ajax -Laflet - PullRequest
0 голосов
/ 07 апреля 2020

Я впервые делаю ГИС-приложение с 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()

error message

Вот мой код 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);
      });
    },
  });
});

Что-то не так с моим кодом? Это мое задание в колледже, и крайний срок - эта пятница, поэтому, пожалуйста, все просвещают меня :( или, по крайней мере, дайте мне ссылку на какой-нибудь учебник, связанный с этой вещью :( Спасибо всем.

...