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的联 ...
随机推荐
- nanomsg安装和测试
最近在构建一个中间层的通信架构,本来想用dbus,在实验过程中发现dbus对于国产系统支持版本比较低,安装比较麻烦,今天无意中看中了nanomsg,尽管没有dbus那么强悍的生态,但基本能满足需求. ...
- LeetCode.1021-删除最外面的括号(Remove Outermost Parentheses)
这是小川的第380次更新,第408篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第242题(顺位题号是1021).有效的括号字符串为空(""),&qu ...
- 奉献pytorch 搭建 CNN 卷积神经网络训练图像识别的模型,配合numpy 和matplotlib 一起使用调用 cuda GPU进行加速训练
1.Torch构建简单的模型 # coding:utf-8 import torch class Net(torch.nn.Module): def __init__(self,img_rgb=3,i ...
- 【Qt开发】QImage设置为8-bit灰度图
项目中用到大量基础图像处理知识,其中灰度图的生成是很重要的一环. 先补充一些基础知识: -------------------------------------------------------- ...
- win10序列号 2019年10月测试
win10序列号 N3415-266GF-AH13H-WA3UE-5HBT4 win10序列号 NPK3G-4Q81M-X4A61-D553L-NV68D win10序列号 N617H-84K11-6 ...
- mysql——触发器——示例
数据准备: ), d_id ), name ), age ), sex ), homeadd ) ); ,,,'nan','beijing'); ,,,'nv','hunan'); ,,,'nan', ...
- java操作ElasticSearch(es)进行增删查改操作
有时间是要了解一下ES这个东西的~ ---------------------------------------------------------------------------------- ...
- 分位数回归及其Python源码
分位数回归及其Python源码 天朗气清,惠风和畅.赋闲在家,正宜读书.前人文章,不得其解.代码开源,无人注释.你们不来,我行我上.废话少说,直入主题.o( ̄︶ ̄)o 我们要探测自变量 与因变量 的关 ...
- Ubuntu下软件打开时状态图标与原始图标不重合问题解决
问题描述 如下图书所示,pycharm打开时,运行的pycharm图标与原始的在收藏夹中的图标不重合.而其他软件不会这样,运行软件的图标与原始图标会重合, 解决办法 把鼠标悬浮在打开的pycharm上 ...
- openlayers 添加标记点击弹窗 定位图标闪烁
环境vue3.0 ,地图为公用组件,将添加图标标记的方法放在公共地图的初始化方法里 同一时间弹窗和定位标识都只有一个,因而我把弹窗和定位标记的dom预先写好放到了页面 //矢量标注样式设置函数,设置i ...