如何在传单上放置带有 geojson 的数字标记
How put numered marker with geojson on leaflet
忘记一切,直到这里,我花了一个黎明尝试,看看我是否可以前进,我会解释。我有一张地图,我需要枚举 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 编号12=]
pointToLayer
函数选项被调用 每个标记 一次(准确地说是每个 "Point"
类型的特征)。每个函数调用有一个 单个 latlng
值。
因此你会明白,试图循环到你的paradas.features.length
是没有意义的。
此外,您的循环 return
是第一次迭代,这就是为什么您只看到带有“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: '© <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>
忘记一切,直到这里,我花了一个黎明尝试,看看我是否可以前进,我会解释。我有一张地图,我需要枚举 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 编号12=]
pointToLayer
函数选项被调用 每个标记 一次(准确地说是每个 "Point"
类型的特征)。每个函数调用有一个 单个 latlng
值。
因此你会明白,试图循环到你的paradas.features.length
是没有意义的。
此外,您的循环 return
是第一次迭代,这就是为什么您只看到带有“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: '© <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>