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);

巴特西

Leaflet使用vector tiles样式设置

最新文章

热门文章