使用 Leaflet 在 GeometryCollection 类型中设置几何样式

Question

I work on web based GIS system where customers have many layers (sometimes overlaps each other) they can add/edit/delete elements geometry or properties from some layer. In back-end the system is 100% restful api based and have heavy administration structure. Each layer have 4 tables (1 for properties, 1 for geometry, 1 for dynamic data and 1 relation table with other service attributes like custom type, date create, date edit, active, etc.) The layers is saved in different servers. DB is MySQL and PostgreSQL(PostGIS) and MySQL. When we start this project we agree to allow only one type geometry in layer like point, polygon etc. but now i must create a functionality where clients can work with many types in 1 layer but this is not a problem. The real problem is that the system must supports GeometryCollection type and must style each geometries in GeometryCollection.

When i use function like this:

layer.setStyle(some_style_object);

This work for Polygons and MultiPolygons, but then i try to use function to style the icon like this:

layer.setIcon(some_style_object);

This give me a error like this:

Uncaught TypeError: layer.setIcon is not a function at Object.onEachFeature

The GeometryCollection look like this:

{
"type":"Feature","properties":{
"id":"143","DistrictID":"12145","DistrictName":"ЗОНА Б-5","DistrictTypeID":"2","SubcontractorDescription":null,"DispEmpID":"23974","SubstDispEmpID":"21976","CompanyRepEmpID":"22487","TitulCourierEmpID":"20750","TitulCourierEmpName":null,"NearByOfficeID":null,"AreaOfficeID":"110","OfficeID":"142","OfficeName":"BOZHURISHTE","DispEmpName":null,"label":null,"notes":null,"style":"#FFFF00","worker_elements":"a:2:{i:36;a:3:{i:0;i:100036000004686;i:1;i:100036000004688;i:2;i:100036000004689;}i:43;a:3:{i:3;i:100043000000154;i:4;i:100043000000160;i:5;i:100043000000187;}}","attributes_id":"143","geometry_id":"143","type_id":"64","active":"1","createdID":"2","editedID":null,"DateFrom":"2020-09-18 18:08:17","DateTo":null,"BrickID":"100042000000143","dinamic_attributes":{"id":null,"PICKUP_WAYBILLS_COUNT":null,"PICKUP_VISITS_COUNT":null,"PICKUP_COURIERPAYMENT":null,"PICKUP_TOTALINCOME":null,"PICKUP_CALCULATIONWEIGHT":null,"DELIVERY_WAYBILLS_COUNT":null,"DELIVERY_VISITS_COUNT":null,"DELIVERY_COURIERPAYMENT":null,"DELIVERY_TOTALINCOME":null,"DELIVERY_CALCULATIONWEIGHT":null},"layer_id":"42","custom_label":null},
"geometry":{
"type":"GeometryCollection",
"geometries":[
{"type":"Point","coordinates":[23.30802,42.699269]},
{"type":"Point","coordinates":[23.308673,42.698213]},
{"type":"Polygon","coordinates":[[[23.306886,42.698974],[23.307783,42.698843],[23.307511,42.697892],[23.30942,42.697617],[23.309143,42.696712],[23.308979,42.696177],[23.30757,42.696396],[23.307074,42.696472],[23.306153,42.696618],[23.305797,42.69667],[23.305268,42.696749],[23.305194,42.69648],[23.305081,42.696072],[23.304812,42.695107],[23.304593,42.694318],[23.304384,42.693726],[23.304224,42.693922],[23.303618,42.694326],[23.303328,42.694507],[23.302789,42.69485],[23.302718,42.694937],[23.302629,42.695249],[23.302477,42.695856],[23.302316,42.696499],[23.302418,42.696873],[23.302644,42.697745],[23.302289,42.697802],[23.302103,42.697833],[23.302199,42.697907],[23.302425,42.698126],[23.302548,42.69828],[23.302655,42.698464],[23.302723,42.698636],[23.30285,42.699098],[23.302997,42.699581],[23.303157,42.699555],[23.304115,42.699405],[23.305478,42.699199],[23.305966,42.699125],[23.306886,42.698974]]]},
{"type":"Point","coordinates":[23.304481,42.700175]}
]
}
}

The solution where i convert GeometryCollection to points, polygons etc. not work because they have one properties. Is it have a simple and clean way to style GeometryCollection geometries without difficult work to divide the geometries for visualization then put them together.

Answer 1

use the pointToLayer option to style markers:

geoGroup = L.geoJson(json,{
    style: {
        "color": "#ff7800",
        "weight": 5,
        "opacity": 0.65
    },
    pointToLayer: function(geoJsonPoint, latlng) {
        return L.marker(latlng, {icon: L.icon({iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-orange.png'})});
    }
}).addTo(map)

Answer 2

Finally i found a solution. I detect the type of geometry and if type of geometry is GeometryCollection i use eachLayer function to style all layers in. Then if layer have _latlng i set a icon, if not do other. I hope this can help someone like me. I don't found other solutions in web.

var layers_tmp = new L.FeatureGroup();
L.geoJson(data, {
    onEachFeature: function (features, layer){
        if(layer.feature.geometry.type == 'Polygon' || layer.feature.geometry.type == 'MultiPolygon'){                                            
            var t_style = {
                "weight":'3',
                "opacity":'1',
                "color":"#fcba03",
                "fillOpacity":'0.5',
                "fillColor":"#fcba03"
            }   
            layer.setStyle(t_style);
        }
        else if(layer.feature.geometry.type == 'Point'){                                    
            var ico = L.icon({
                iconUrl: 'https://api2.datamap.bg/images/blue_icon.png',
                iconSize: [25, 25],
                iconAnchor: [15, 15],
                popupAnchor: [-10, -10]
            });                                       
            layer.setIcon(ico);                                      
        }  
        else if(layer.feature.geometry.type == 'GeometryCollection'){ 
            layer.eachLayer(function(layer_GeometryCollection){  
                if(layer_GeometryCollection._latlng){
                    var ico = L.icon({
                        iconUrl: 'https://api2.datamap.bg/images/blue_icon.png',
                        iconSize: [25, 25],
                        iconAnchor: [15, 15],
                        popupAnchor: [-10, -10]
                    });                                          
                    layer_GeometryCollection.setIcon(ico);
                }
                else{                                          
                    var t_style = {
                        "weight":'3',
                        "opacity":'1',
                        "color":"#fcba03",
                        "fillOpacity":'0.5',
                        "fillColor":"#fcba03"
                    }   
                    layer.setStyle(t_style);
                }
            });                                          
        }           
        layers_tmp.addLayer(layer);                                
    }
});                     
layers_tmp.addTo(mymap);