//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样式设置的更多相关文章

  1. Leaflet使用vector tiles 标注label设置

    JS //简单的标注 var marker = L.marker([ 31.2, 114.5 ], { // icon:myIcon }).addTo(map) // 设置label .bindToo ...

  2. js学习进阶-元素获取及样式设置

    var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...

  3. placeholder的样式设置

    在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...

  4. Asp.Net中应用Aspose.Cells输出报表到Excel 及样式设置

    解决思路: 1.找个可用的Aspose.Cells(有钱还是买个正版吧,谁开发个东西也不容易): 2.在.Net方案中引用此Cells: 3.写个函数ToExcel(传递一个DataTable),可以 ...

  5. 导出Excel之Epplus使用教程2(样式设置)

    导出Excel之Epplus使用教程1(基本介绍) 导出Excel之Epplus使用教程2(样式设置) 导出Excel之Epplus使用教程3(图表设置) 导出Excel之Epplus使用教程4(其他 ...

  6. PowerDesigner的样式设置

    原文:PowerDesigner的样式设置 PD提供了强大的配置功能,可以对生成的数据库对象命名.数据模型的展现进行设置.这里首先讲下样式的设置. 颜色和字体设置 1.单独设置某个对象的颜色和字体 1 ...

  7. POI Excel导出样式设置

    HSSFSheet sheet = workbook.createSheet("sheetName");    //创建sheet sheet.setVerticallyCente ...

  8. QListWidget与QTableWidget的使用以及样式设置

    QListWidget和QTableWidget的使用和属性,QTableWidget和QListWidget样式表的设置,滚动条的样式设置 一.QListWidget的使用 //一.QListWid ...

  9. HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...

随机推荐

  1. 1.MySQL的基本使用

    数据库的操作: 1.Windows中如何使用CMD进入MySQL数据库:     1 Windows+R  -->  输入 cmd 运行     2 C:\Users\***>D:    ...

  2. 9.Jmeter 多个threadgroup 中的配置元件会一次性进行初始化

    例如3个threadGroup,每一个threadGroup中都会定义了 一些配置原件,例如 用户定义变量,  jdbc 链接配置等.  当执行testplan(测试计划)时, 这些配置元件会一起初始 ...

  3. 2014年北京 happy matt friends(dp + 滚动数组优化)

    Happy Matt Friends Time Limit: 6000/6000 MS (Java/Others)    Memory Limit: 510000/510000 K (Java/Oth ...

  4. 利用pcl数据结构,实现RegionGrowing的复现

    这篇博客是pcl中区域增长的算法进行简介以实现重写,并添加了一些判断条件. 起初原因是在使用pcl封装的regionGrowing时,效果不太好. 于是想自己重新写一下,通过改变其中种子点的生成策略和 ...

  5. sys模块&json模块&pickle模块

    sys模块&json模块&pickle模块 sys模块 一.导入方式 import sys 二.作用 与Python解释器交互 三.模块功能 3.1 经常使用 sys.path #返回 ...

  6. 什么是 MicroPython ?它有什么优势?

    MicroPython 和 Python 都是一类 Python 的动态语言解释器. 若是在系统里安装了 Python 解释器,例如在 Windows 或者 Linux 命令行输入 python,进入 ...

  7. 088、Docker 如何支持多种日志方案 (2019-05-10 周五)

    参考https://www.cnblogs.com/CloudMan6/p/7762369.html   将容器日志发送到 STDOUT 和 STDERR 是Docker 的默认日志行为.实际上,Do ...

  8. sqlserver2008 必知必会技巧-- 快速索引对象

    对象资源管理器里面 -- 数据库 -- 表目录 ,然后按 f7 弹出 对象资源管理详细信息 , 里面有搜索栏 , 可以 使用 % 进行模糊查询 例如我们查包含 student的表 %student% ...

  9. 关于session和cookie的区别

    以前对于session和cookie的认识,就只是粗略的知道cookie保存在客户端,而session则保存在服务端. 如今查了些资料,对session和cookie也有了一个初步的认识,现在来总结一 ...

  10. Spring基础20——AOP基础

    1.什么是AOP AOP(Aspect-Oriented Programming)即面向切面编程,是一种新的方法论,是对那个传统OOP面向对象编程的补充.AOP的主要编程对象是切面(aspect),而 ...