Как нанести нумерованный маркер с геойсоном на листовку - PullRequest
Новая
       46

Как нанести нумерованный маркер с геойсоном на листовку

0 голосов
/ 06 июня 2018

Забудьте все до тех пор, пока я не провел рассвет, пытаясь понять, смогу ли я двигаться вперед, я объясню.У меня есть карта, и мне нужно перечислить от 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. Я просто хотел, чтобы они были пронумерованы от 1 до 15, в соответствии с суммой в json

1 Ответ

0 голосов
/ 06 июня 2018

Параметр функции pointToLayer вызывается один раз для маркера (для точной характеристики типа "Point").У вас есть одиночное latlng значение для каждого вызова функции.

Поэтому вы поймете, что бессмысленно пытаться выполнить цикл до вашего paradas.features.length.

Кроме того,ваш цикл return s на первой итерации, поэтому вы видите только значки с перечислением «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>
...