zoukankan      html  css  js  c++  java
  • 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);                      
  • 相关阅读:
    公司的OA系统基础框架系统(光标办公平台)
    通用权限控制系统--系统设计
    聘.Net软件工程师(昆明)
    对AgileFramework的思考
    iTextSharp.text.Rectangle 使用方法说明
    Castle Aspect# 难倒只支持一个拦截器?
    聘云南昆明地区的.Net工程师
    招聘云南软件销售人员
    给vncviewer 添加调用函数 GIS
    分享一个c++ 加密算法 ,在百度贴吧找的,比较好玩 GIS
  • 原文地址:https://www.cnblogs.com/TTonly/p/10349947.html
Copyright © 2011-2022 走看看