Leaflet使用vector tiles样式设置

    //point style
    var myIcon = L.icon({
        iconUrl: 'css/images/dian.svg',
//      shadowUrl: 'css/images/leaf-shadow.png',
        iconSize:     [50, 50], // size of the icon
//      shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [10, 50], // point of the icon which will correspond to marker's location
//      shadowAnchor: [4, 62],  // the same for the shadow
//      popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    //样式设定
    var vectorTileStyling = {
             //layer样式,line没有fill属性
            gj:{//layername
                weight: 1,
                color: '#cf52d3',
                opacity: 0.6
            },
            //使用自定义icon
//          point:{//layername
//              
//              weight: 1,
//              icon: myIcon//自定义icon
//          },
            //点
            //方法一
            point:{//layername
                weight: 2,
                color: 'red',
                opacity: 1,
                fillColor: 'yellow',
                fill: true,
                radius: 6,
                fillOpacity: 0.7
            },
            //方法二
//          point: function(properties, zoom) {
//              return {
//                  weight: 2,
//                  color: 'red',
//                  opacity: 1,
//                  fillColor: 'yellow',
//                  fill: true,
//                  radius: 6,
//                  fillOpacity: 0.7
//              }
//          },
            //线
            line:{//layername
                weight:1,
                color: '#f2b648',//颜色
                fillColor: 'red',
                fillOpacity:0,//填充透明度
                dashArray: '5'  //设置虚线
            },
            //面     
            polygon:{//layername
                weight: 1,//边线宽度
                fillColor: '#53e033',//填充颜色
                color: 'red',//边线颜色
                fill: true,
                fillOpacity: 0.2,//填充颜色透明度
                opacity: 0.4,//边线颜色透明度
            }
        };

//vector tile pointpbflayer
        var pointUrl = "http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/test:point@EPSG:4326@pbf/{z}/{x}/{-y}.pbf";
        var pointVectorTileOptions = {
            rendererFactory: L.canvas.tile,
            vectorTileLayerStyles: vectorTileStyling,
            interactive: true,  // Make sure that this VectorGrid fires mouse/pointer events
            getFeatureId: function(f) {
//                console.log("getFeatureId:"+f.properties.ID);
                return f.properties.ID;      
            }
        };  
    }).addTo(map);                      

转载自：https://blog.csdn.net/t514263710/article/details/67634919