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样式设置的更多相关文章
- Leaflet使用vector tiles 标注label设置
		
JS //简单的标注 var marker = L.marker([ 31.2, 114.5 ], { // icon:myIcon }).addTo(map) // 设置label .bindToo ...
 - js学习进阶-元素获取及样式设置
		
var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...
 - placeholder的样式设置
		
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...
 - Asp.Net中应用Aspose.Cells输出报表到Excel 及样式设置
		
解决思路: 1.找个可用的Aspose.Cells(有钱还是买个正版吧,谁开发个东西也不容易): 2.在.Net方案中引用此Cells: 3.写个函数ToExcel(传递一个DataTable),可以 ...
 - 导出Excel之Epplus使用教程2(样式设置)
		
导出Excel之Epplus使用教程1(基本介绍) 导出Excel之Epplus使用教程2(样式设置) 导出Excel之Epplus使用教程3(图表设置) 导出Excel之Epplus使用教程4(其他 ...
 - PowerDesigner的样式设置
		
原文:PowerDesigner的样式设置 PD提供了强大的配置功能,可以对生成的数据库对象命名.数据模型的展现进行设置.这里首先讲下样式的设置. 颜色和字体设置 1.单独设置某个对象的颜色和字体 1 ...
 - POI Excel导出样式设置
		
HSSFSheet sheet = workbook.createSheet("sheetName"); //创建sheet sheet.setVerticallyCente ...
 - QListWidget与QTableWidget的使用以及样式设置
		
QListWidget和QTableWidget的使用和属性,QTableWidget和QListWidget样式表的设置,滚动条的样式设置 一.QListWidget的使用 //一.QListWid ...
 - HTML+CSS样式设置——CSS一学就会
		
HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...
 
随机推荐
- Day05:访问控制 、 static和final
			
访问控制 package(包) 什么是包? 组织java文件的一个单位 为什么需要包? 将相关的java文件组织在一个包里 将项目中同名的类,方法在不同包中,不会冲突 注意: 包名全部小写,如果多个单 ...
 - Day04:继承的意义(下)
			
对象转型 向上造型 什么是向上造型? 子类对象赋给父类引用. 父类引用指向子类对象. 子类转成父类 默认进行(父类引用指向子类对象). 为什么需要向上造型? 子类对象可以放入父类类型的数组中. 父类数 ...
 - CTF—攻防练习之ssh私钥泄露
			
攻防练习1 ssh私钥泄露 靶场镜像:链接: https://pan.baidu.com/s/1xfKILyIzELi_ZgUw4aXT7w 提取码: 59g0 首先安装打开靶场机 没办法登录,也没法 ...
 - Postman接口测试动态传参——动态获取token值
			
上午刚学会jmeter动态传参,下午研究了下postman也知道怎么动态获取token了. 主要就是第1行和第2行代码,第3行加上是希望Test Results有个返回值,如果不加第3行运行成功后也看 ...
 - Zookeeper - zookeeper安装与配置
			
1.什么时Zookeeper ZooKeeper:分布式服务框架 Zookeeper -- 管理分布式环境中的数据. 2.安装 1>官网下载压缩包并解压zookeeper-3.4.14.zip ...
 - C++继承中的同名覆盖
			
1,父子间的冲突是由继承带来的,两个类之间存在了继承的关系,必然的会带来一 些问题,本文要讨论的是父子之间成员变量或成员函数的命名问题: 2,思考: 1,子类中是否可以定义父类中的同名成员? 1,可以 ...
 - python-2:爬取某个网页(虎扑)帖子的标题做词云图
			
关键词:requests,BeautifulSoup,jieba,wordcloud 整体思路:通过requests请求获得html,然后BeautifulSoup解析html获得一些关键数据,之后通 ...
 - Linux端口是否占用的方法
			
1.netstat或ss命令 netstat -anlp | grep 80 2.lsof命令 这个命令是查看进程占用哪些文件的 lsof -i:80 3.fuser命令 fuser命令和lsof正好 ...
 - hdu2444The Accomodation of Students (最大匹配+判断是否为二分图)
			
题意 首先判断所有的人可不可以分成两部分,每部分内的所有人都相互不认识.如果可以分成 则求两部分最多相互认识的对数. 解题 类似分成两组,同组互不相关,就可能使判断是否为二分图 能否分成两部分 则是判 ...
 - MySQL数据库入门多实例配置
			
MySQL数据库入门——多实例配置 前面介绍了相关的基础命令操作,所有的操作都是基于单实例的,mysql多实例在实际生产环境也是非常实用的,因为必须要掌握 1.什么是多实例 多实例就是一台服务器上开启 ...