我尝试开发一个应用程序来在传单地图上显示服务:
是否可以根据“属性”geojson属性使用不同的标记?
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 6.1200622,46.2106091 ]
},
"properties": {
"nom":"Cfffff Genève",
"rue":"Route des F",
"num":"11",
"npa":1203,
"localite":"Genève",
"canton":"GE",
"tel":"033 345 17 57",
"url":"www.formation-cemea.ch",
"domaine":"société "
}},
这是我的地图脚本:
我希望当你点击顶部的按钮时它只显示与属性相对应的标记(用另一种颜色)?
非常感谢你的帮助;)
<div class="btn-group">
<button type="button" id="allbus" class="btn btn-success">All</button>
<button type="button" id="others" class="btn btn-primary">Sexualité</button>
<button type="button" id="cafes" class="btn btn-danger">Mal-être</button>
<button type="button" id="cafes" class="btn btn-secondary">Santé</button>
<button type="button" id="cafes" class="btn btn-info">Drogues</button>
<button type="button" class="btn btn-warning">Société</button>
<button type="button" class="btn btn-outline-success">Internet</button>
</div>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map');
var terrainTiles = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
terrainTiles.addTo(map);
map.setView([46.5160000, 6.6328200], 10);
L.control.locate(location).addTo(map);
L.easyButton( '<strong>BE</strong>', function(){
//zoomTo.setView([55, -2], 4);
map.setView([46.95, 6.85], 12);
}).addTo(map);
L.easyButton( '<strong>FR</strong>', function(){
//zoomTo.setView([55, -2], 4);
map.setView([46.95, 6.85], 12);
}).addTo(map);
L.easyButton( '<strong>GE</strong>', function(){
//zoomTo.setView([55, -2], 4);
map.setView([46.95, 6.85], 12);
}).addTo(map)
L.easyButton( '<strong>JU</strong>', function(){
//zoomTo.setView([55, -2], 4);
map.setView([46.95, 6.85], 12);
}).addTo(map);
L.easyButton( '<strong>NE</strong>', function(){
//zoomTo.setView([55, -2], 4);
map.setView([46.95, 6.85], 12);
}).addTo(map);
L.easyButton( '<strong>VS</strong>', function(){
//zoomTo.setView([55, -2], 4);
map.setView([46.95, 6.85], 12);
}).addTo(map);
L.easyButton( '<strong>VD</strong>', function(){
//zoomTo.setView([55, -2], 4);
map.setView([46.95, 6.85], 12);
}).addTo(map);
function addDataToMap(data, map) {
var dataLayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
var popupText = "<b>" + feature.properties.nom
+ "<br>"
+ "<small>" + feature.properties.localite
+ "<br>Rue: " + feature.properties.rue + + feature.properties.num
+ "<br>Téléphone: " + feature.properties.tel
+ "<br><a href= '" + feature.properties.url + "'>Internet</a>";
layer.bindPopup(popupText); }
});
dataLayer.addTo(map);
}
$.getJSON("data.geojson", function(data) { addDataToMap(data, map); });
</script>
</body>
</html>
答案 0 :(得分:2)
您可以在onEachFeature
方法中使用图层实例,检查它是否为标记并设置它的图标:
new L.GeoJSON(null ,{
onEachFeature: function (feature, layer) {
if (layer instanceof L.Marker) {
layer.setIcon(new L.Icon(...));
}
}
})
答案 1 :(得分:0)
您可以使用圈子标记L.circleMarker
根据feature.properties.[VALUE]
区分您的点数。您也可以添加过滤器。例如,基于TotalImpct
属性:
munCustomLayer = L.geoJson(null, {
onEachFeature: {SOME FUNCTION},
filter: function (feature, layer) {
return feature.properties.TotalImpct > 10000;
},
pointToLayer: function(feature, latlng) { //Style the layer based on TotalImpact
if (feature.properties.TotalImpct < 50000){
return new L.CircleMarker(latlng, {
radius: 5,
color: "#e0e0e0",
opacity: 0.95,
weight: 1.2,
dashArray: "2,3",
fillOpacity: 0.01,
});
}
(...)
您可以使用圆圈标记here查看示例。 (记得检查源代码)。