传单PointToLayer样式的AJAX加载GeoJson数据



我在我的传单地图上固定默认点样式有点困难,目前通过ajax加载后,点出现在正确的位置。

但是当前的代码并没有改变样式,我留下了默认的浅蓝色圆圈样式的点:

function addressStyle(feature) {
return {
color: '#000',
fillColor: '#199900',
fillOpacity: 0.5,
radius: 100,
};
}

var address_points = new L.geoJson('', {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, addressStyle);
},
onEachFeature: function (feature, layer) {
layer.bindPopup('<h1>'+feature.properties.address+'</h1>');
},
});
address_points.addTo(map);
$.ajax({
dataType: "json",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url:  "{{url('/addresses/geojson')}}",
success: function(data) {
$(data.features).each(function(key, data) {
address_points.addData(data);
});
},
error: function(data){
}
});

有更好的方法来处理这个问题吗?我只是进入AJAX加载相关的GeoJSON数据,但我卡住了如何继续这个功能的样式,当我没有困难与我的其他层不是点。

如果您想将样式应用于所有图层(除了标记),则更改代码为:

var address_points = new L.geoJson('', {
style: addressStyle,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng);
},
onEachFeature: function (feature, layer) {
layer.bindPopup('<h1>'+feature.properties.address+'</h1>');
},
});

当你只想将样式应用于CircleMarker时,你需要将样式作为对象而不是函数传递。

你可以简单地调用addressStyle函数:

var address_points = new L.geoJson('', {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, addressStyle());
},
onEachFeature: function (feature, layer) {
layer.bindPopup('<h1>'+feature.properties.address+'</h1>');
},
});

或定义addessStyle为对象:

var addressStyle = {
color: '#000',
fillColor: '#199900',
fillOpacity: 0.5,
radius: 100,
};
var address_points = new L.geoJson('', {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, addressStyle);
},
onEachFeature: function (feature, layer) {
layer.bindPopup('<h1>'+feature.properties.address+'</h1>');
},
});

最新更新