Mapbox Leaflet Добавить всплывающее окно в GeoJson - PullRequest
Новая
       7

Mapbox Leaflet Добавить всплывающее окно в GeoJson

0 голосов
/ 15 февраля 2020

Я установил карту листовки со стилем mapbox, которая загружает внешний Geo Json. Это прекрасно работает, за исключением того, что не импортирует какие-либо параметры стиля из Geo Json, такие как цвет маркера. Например: 

   "properties": {
    "marker-color": "#4de21b",
    "marker-size": "medium",

По умолчанию отображается в виде синего цвета 'i sh сразу после импорта. Итак, это первая проблема. И я думаю, что моя вторая (и более важная) проблема связана с этим. Я хотел бы добавить всплывающее окно для каждого маркера на основе гео Json. Это возможно и как?

Спасибо за совет заранее!

Мой веб-код: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script>
// Add AJAX request for data
    var counties = $.ajax({
      url:"https://myurl.net/wp-content/uploads/2020/02/geojson-example2.geojson",
      dataType: "json",
      success: console.log("County data successfully loaded."),
      error: function (xhr) {
        alert(xhr.statusText)
      }
    })
    // Specify that this code should run once the county data request is complete
    $.when(counties).done(function() {
        var map = L.map('map')
            .setView([51.1656914, 10.4515257], 5);
            var basemap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses            /by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/dark-v10',
            accessToken: 'mytoken'}).addTo(map);
        // Add requested external GeoJSON to map
        var kyCounties = L.geoJSON(counties.responseJSON).addTo(map);
    });
</script>

Geo Json

{  "type": "FeatureCollection",  "features": [
{
  "type": "Feature",
  "properties": {
    "marker-color": "#4de21b",
    "marker-size": "medium",
    "marker-symbol": "",
    "icon":"purpleIcon"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      10.52490234375,
      51.631657349449995
    ]
  }
},
{
  "type": "Feature",
  "properties": {
    "marker-color": "#af2ecf",
    "marker-size": "medium",
    "marker-symbol": ""
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      9.47021484375,
      52.17393169256849
    ]
  }    }  ]}

1 Ответ

1 голос
/ 15 февраля 2020

Вы можете использовать L.geoJSON pointToLayer & onEachFeature соответственно для достижения желаемого поведения, передавая цвет в качестве аргумента для возврата нужного значка маркера и снова проверяя свойства объекта geo json на создать всплывающее окно маркера. Ниже вы можете найти демонстрацию, иллюстрирующую вышеупомянутое, имитируя ложный асин c вызов для получения гео json, как в вашем случае. 

<!DOCTYPE html>
<html>

<head>
  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

</head>

<body>
  <div id="mapid" style="height: 100vh;"></div>
  <script>
    var map = L.map("mapid").setView([51.1656914, 10.4515257], 7);

    L.tileLayer(
      "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw", {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
          '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
          'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: "mapbox/streets-v11",
        tileSize: 512,
        zoomOffset: -1
      }
    ).addTo(map);

    const geojson = {
      type: "FeatureCollection",
      features: [{
          type: "Feature",
          properties: {
            "marker-color": "#4de21b",
            "marker-size": "medium",
            "marker-symbol": "",
            icon: "purpleIcon"
          },
          geometry: {
            type: "Point",
            coordinates: [10.52490234375, 51.631657349449995]
          }
        },
        {
          type: "Feature",
          properties: {
            "marker-color": "#af2ecf",
            "marker-size": "medium",
            "marker-symbol": ""
          },
          geometry: {
            type: "Point",
            coordinates: [9.47021484375, 52.17393169256849]
          }
        }
      ]
    };

    const simulateAsyncCall = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(geojson);
        }, 1000);
      });
    };

    function onEachFeature(feature, layer) {
      const popupContent = `I have marker color <b>${
          feature.properties["marker-color"]
        }</b>, and marker size <b>${feature.properties["marker-size"]}</b>`;

      if (feature.properties && feature.properties.popupContent) {
        popupContent += feature.properties.popupContent;
      }

      layer.bindPopup(popupContent);
    }

    const icon = color =>
      new L.Icon({
        iconUrl: `https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${
            color === "#af2ecf" ? "violet" : "green"
          }.png`,
        shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
      });

    simulateAsyncCall().then(geojson => {
      console.log(geojson);
      L.geoJSON(geojson, {
        pointToLayer: function(feature, latlng) {
          const color = feature.properties["marker-color"];
          return L.marker(latlng, {
            icon: icon(color)
          });
        },
        onEachFeature
      }).addTo(map);
    });
  </script>
</body>

</html>
...