地图传单标记
[英]Map leaflet markers
问题描述
我尝试开发一个在传单地图上显示服务的应用程序：
是否可以根据“属性” 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>
2 个解决方案
解决方案1
2 2017-06-16 16:42:25
您可以在onEachFeature方法中使用图层实例，检查它是否是标记并设置为图标：
new L.GeoJSON(null ,{
onEachFeature: function (feature, layer) {
if (layer instanceof L.Marker) {
layer.setIcon(new L.Icon(...));
}
}
})
解决方案2
0 2017-06-23 01:04:05
您可以使用圆形标记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,
});
}
(...)
您可以在此处看到使用圆形标记的示例。 （请记住检查源代码）。
基于标记的中心传单地图
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.