如何将带有geojson的数字标记放在传单上 [英] How put numered marker with geojson on leaflet

问题描述

忘了一切，直到这里，我花了很长时间尝试，看看我是否可以继续前进，我会解释.我有一张地图，需要枚举1到15个标记.标记是正确的，仅标记1、15次的问题.这是我的json:

Forget everything until here, I spent the dawn trying, to see if I could move forward, I'll explain. I have a map and I need to enumerate the 1 to 15 markings. The markings are correct, the problem that marks only 1, 15 times. This is my json:

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

简单的json，没什么

simple json, nothing much

我的代码是:

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，

This code does not show any error message, it just shows all my points being numbered all with 1. I just wanted them to be numbered from 1 to 15, according to the amount in json

推荐答案

pointToLayer函数选项被称为每个标记一次(确切地说，是每个"Point"类型功能).每个函数调用都有一个单个 latlng值.

The pointToLayer function option is called once per marker (per "Point" type feature to be exact). You have a single latlng value per function call.

因此，您将了解尝试循环到您的paradas.features.length是没有意义的.

Therefore you will understand that it is pointless trying to loop up to your paradas.features.length.

此外，循环return在其第一次迭代时，这就是为什么您只看到带有"1"枚举的图标的原因.

Furthermore, your loop returns at its first iteration, that is why you see only icons with "1" enumeration.

由于您希望L.geoJSON工厂每次调用pointToLayer函数时都增加枚举，因此只需要将计数器保留在外部作用域中即可:

Since you want the L.geoJSON factory to increment your enumeration each time it calls your pointToLayer function, you just need to hold the counter in an outer scope:

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>

这篇关于如何将带有geojson的数字标记放在传单上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！