Создание легенд для двух наборов файлов Geo JSON - PullRequest
Новая
       108

Создание легенд для двух наборов файлов Geo JSON

0 голосов
/ 21 июня 2020

Сейчас я пытаюсь построить легенду для двух слоев, наложенных на базовую карту. То, как я структурировал слои ниже, сработало, поскольку я пытался добавить всплывающие окна с маркерами только для одного из слоев. Я могу создать легенду, связанную с установленными «точками», но я не уверен, что смогу создать вторую легенду независимо, на основе способа, которым я назвал каждый из файлов geo json. Как лучше всего создать вторую легенду, чтобы она была связана со слоями с помощью переключателя. 

var mymap = L.map("map", {
  center: [44, -114.5],
  zoom: 9,
  layers: [
    L.tileLayer(
      "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
      { maxZoom: 19, attribution: "", id: "", }
    ),
  ],
});

var controlLayers = L.control.layers().addTo(mymap);

$.getJSON("LRV_NoUTEP.geojson", function (data) {
  function getColor(d) {
    return d > 50 ? "#BD0026"
      : d > 40    ? "#912304"
      : d > 30    ? "#ed9a00"
      : d > 20    ? "#bbe309"
      : d > 10    ? "#059c41"
      : d > 0.001 ? "#73FA02"
      : d > -10   ? "#00fff7"
      : d > -20   ? "#005eff"
      : d > -30   ? "#0004ff"
      : d > -40   ? "#6f02d4"
      : d > -50   ? "#d402a6"
      : d > -100  ? "#d4025a"
      : "#FFEDA0";
  }

  // add GeoJSON layer to the map once the file is loaded
  var geojsonlayer = L.geoJson(data, {
    pointToLayer: function (feature, latlng) {
      return new L.CircleMarker(latlng, {
        radius: 6,
        weight: 1,
        fillOpacity: 1,
        color: "#202224",
        fillColor: getColor(feature.properties.anomalymgals),
      });
    },

    //var marker = L.circleMarker(latlng, geojsonMarkerOptions);

    onEachFeature: function (feature, marker) {
      marker.bindPopup(
        "<b> Latitude: </b>" + feature.properties.lat + "<br/>" +
        "<b> Longitude: </b>" + feature.properties.long + "<br/>" +
        "<b> Easting: </b>" + feature.properties.easting + "<br/>" +
        "<b> Northing: </b>" + feature.properties.northing + "<br/>" +
        "<b> Elevation_meters: </b>" + feature.properties.elev + "<br/>" +
        "<b> Anomoly_mgals: </b>" + feature.properties.anomalymgals
      );
    },
  }).addTo(mymap);
  var plegend = L.control({ position: "bottomright" });

  plegend.onAdd = function (map) {
    var div = L.DomUtil.create("div", "info legend"),
      grades = [200, 50, 40, 30, 20, 10, 0.001, -10, -20, -30, -40, -50, -100],
      labels = ["Anomaly (mgals)"],
      from,
      to;

    for (var i = 0; i < grades.length; i++) {
      from = grades[i];
      to = grades[i + 1];

      labels.push(
        '<i style="background:' + getColor(from) + '"></i> ' +
          to + (to ? " to " + from : "+")
      );
    }

    div.innerHTML = labels.join("<br>");
    return div;
  };

  plegend.addTo(mymap);

  controlLayers.addOverlay(geojsonlayer, "Points");
});

$.getJSON("faults.geojson", function (faults) {
  var geojsonLayer = L.geoJson(faults, {
    style: function (feature) {
      return {
        weight: 1,
        color: "red",
        fillOpacity: 0,
      };
    },
  }).addTo(mymap);

  controlLayers.addOverlay(geojsonLayer, "Faults");
});
L.control.scale().addTo(mymap);

var popup = L.popup();

function onMapClick(e) {
  popup.setLatLng(e.latlng).setContent(e.latlng.toString()).openOn(mymap);
}

mymap.on("click", onMapClick);
...