时间戳

首页 > 解决方案 > AJAX 加载的 GeoJson 数据上的传单 PointToLayer 样式

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

问题描述

我在修复传单地图上的默认点样式时遇到了一些困难，目前这些点在通过 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 数据，但是当我对其他不是点的图层没有任何困难时，我被困在如何进行此功能的样式设置上。

标签： ajaxleafletgeojson

解决方案

如果要将样式应用于所有图层（标记除外），请将代码更改为：

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>');
        },
    });

推荐阅读