时间戳

首页 > 解决方案 > Mapbox Leaflet 将弹出窗口添加到 GeoJson

javascript - Mapbox Leaflet 将弹出窗口添加到 GeoJson

问题描述

我已经设置了一个带有 mapbox 样式的传单地图，它正在加载一个外部 GeoJson。这很好用，除了它不从 GeoJson 导入任何样式参数，例如标记颜色。喜欢 fe ：

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

导入后以默认的蓝色标记颜色显示。所以这是第一个问题。我想我的第二个（也是更重要的）问题与此有关。我想为基于 geoJson 的每个标记添加一个信息框弹出窗口。这可能吗？怎么做？

提前感谢您的建议！

我的网页代码：

<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>

地球仪

{  "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
    ]
  }    }  ]}

标签： javascriptjqueryjsonleafletgeojson

解决方案

您可以分别使用L.geoJSON's pointToLayer&onEachFeature来实现所需的行为，方法是将颜色作为参数传递以返回所需的标记图标，并再次通过有条件地检查 geojson 功能属性以生成标记弹出窗口。您可以在下面找到一个演示，通过模拟一个假异步调用来检索您的案例中的 geojson 来说明上述内容。

<!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>

推荐阅读