javascript - 如何在传单上放置带有 geojson 的数字标记

Question

忘记一切，直到这里，我花了整个黎明尝试，看看我是否可以前进，我会解释。我有一张 map ，我需要枚举 1 到 15 的标记。标记正确，标记只有1、15次的问题。这是我的 json:

https://github.com/eltonsantos/analise_integrada/blob/master/path.js

简单的json，没什么

我的代码是:

var rotas = L.geoJSON(paradas, {
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng){
        console.log("Qtd: " + paradas.features.length)
        for(var i = 1; i <= paradas.features.length; i++){
            return L.marker(latlng, {
                icon: new L.AwesomeNumberMarkers({
                    number: i,
                    markerColor: 'purple'
                })
            })
        }
    }
}).addTo(map);

这段代码没有显示任何错误消息，它只是显示我所有的点都被编号为 1。我只是希望它们根据 json 中的数量从 1 到 15 编号

Answer 1

pointToLayer 函数选项每个标记调用一次(准确地说是每个“点” 类型特征)。每个函数调用都有一个单个 latlng 值。

因此您会明白，尝试循环到您的 paradas.features.length 是没有意义的。

此外，您的循环在第一次迭代时返回，这就是为什么您只看到带有“1”枚举的图标的原因。

因为您希望 L.geoJSON 工厂在每次调用您的 pointToLayer 函数时递增您的枚举，所以您只需要在外部范围内保存计数器:

var map = L.map('map');

// Hold the counter in an outer scope.
var i = 0;

var rotas = L.geoJSON(paradas, {
  //onEachFeature: onEachFeature,
  pointToLayer: function(feature, latlng) {
    console.log("Qtd: " + paradas.features.length)
    // Increment the counter.
    i += 1;
    // No need to loop.
    //for (var i = 1; i <= paradas.features.length; i++) {
      // Directly return the Marker for the given `latlng`
      return L.marker(latlng, {
        icon: new L.AwesomeNumberMarkers({
          number: i,
          markerColor: 'purple',
        }),
      });
    //}
  }
}).addTo(map);

map.fitBounds(rotas.getBounds());

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.AwesomeNumberMarkers assets -->
<link rel="stylesheet" href="https://rawgit.com/Zahidul-Islam/Leaflet.awesome-numbered-marker/f7b5b594e9fc451cd006ee345220a86390eb1cf1/src/leaflet_awesome_number_markers.css" />
<script src="https://rawgit.com/Zahidul-Islam/Leaflet.awesome-numbered-marker/f7b5b594e9fc451cd006ee345220a86390eb1cf1/src/leaflet_awesome_number_markers.js"></script>

<!-- your GeoJSON data that defines the `paradas` global variable -->
<script src="https://rawgit.com/eltonsantos/analise_integrada/8b771bed3bd0bbfe1da3d02ce09b37630a637a0c/path.js"></script>

<div id="map" style="height: 180px"></div>