• 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);                      
  • 相关阅读:
    Sonar代码分析实战(2)——1.1.1 Sonar安装环境要求
    无法在Mac Os下通过Gem安装Mysql
    HBase replication 代码分析
    ThinkPHP报js错误:Uncaught ReferenceError: out is not defined
    在Linux用tar归档压缩文件时忽略某些文件和目录
    mysql errno: 150 错误 外键
    2012年最经典的HyperV精品文章60篇
    三届(2012、2011、2009)KDD Cup内容、数据源和论文
    CVS安装及用户配置
    flex>MXML语法 小强斋
  • 原文地址:https://www.cnblogs.com/TTonly/p/10349947.html
Copyright © 2020-2023  润新知