Question

我已经设置了具有mapbox样式的传单地图，该地图正在加载外部GeoJson。效果很好，只是它不会从GeoJson导入任何样式参数，例如marker-color。像f.e. ：

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

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

Answer 1

您可以分别使用L.geoJSON的{{1}}和pointToLayer通过将颜色作为参数返回所需的标记图标，并再次有条件地检查geojson来实现所需的行为要素属性以生成标记弹出窗口。在下面，您可以通过模拟一个伪造的异步调用来检索您的案例中的geojson，来演示上述内容。

onEachFeature

Mapbox传单将弹出窗口添加到GeoJson

1 个答案: