//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. python学习之内置函数(一)

    4.7 内置函数 4.7.1 内置函数(1) eval 执行字符串类型的代码,并返回最终结果. eval('2 + 2') # 4 n=81 eval("n + 4") # 85 ...

  2. LeetCode.961-2N数组中N次重复的元素(N-Repeated Element in Size 2N Array)

    这是悦乐书的第365次更新,第393篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第227题(顺位题号是961).在大小为2N的数组A中,存在N+1个唯一元素,并且这些元 ...

  3. <数据结构系列3>队列的实现与变形(循环队列)

    数据结构第三课了,今天我们再介绍一种很常见的线性表——队列 就像它的名字,队列这种数据结构就如同生活中的排队一样,队首出队,队尾进队.以下一段是百度百科中对队列的解释: 队列是一种特殊的线性表,特殊之 ...

  4. Python 命令行解析模块 —— argparse

    argparse是python标准库里面用来处理命令行参数的库,基本使用步骤如下: 1.import argparse    导入模块 2.parser = argparse.ArgumentPars ...

  5. 深入理解java:2.3.4. 并发编程concurrent包 之容器ConcurrentLinkedQueue(非阻塞的并发队列---循环CAS)

    1.    引言 在并发编程中我们有时候需要使用线程安全的队列. 如果我们要实现一个线程安全的队列有两种实现方式:一种是使用阻塞算法,另一种是使用非阻塞算法. 使用阻塞算法的队列可以用一个锁(入队和出 ...

  6. Akka系列(六):Actor解决了什么问题?

    前言..... 文档来源于  : What problems does the actor model solve? Actor解决了什么问题? Akka使用Actor模型来克服传统面向对象编程模型的 ...

  7. AKKA学习(一)

    AKKA简介 什么是AKKA Akka是一个由Scala编写的,能兼容Sacala和JAVA的,用于编写高可用和高伸缩性的Actor模型框架.它基于了事件驱动的并发处理模式,性能非常的高,并且有很高的 ...

  8. MyBatis Mapper XML 详解

    MyBatis Mapper XML 详解 MyBatis 真正的力量是在映射语句中.这里是奇迹发生的地方.对于所有的力量,SQL 映射的 XML 文件是相当的简单.当然如果你将它们和对等功能的 JD ...

  9. ubuntu中用命令创建数据库

    # switch to postgres account sudo su postgres # create a new postgres login: jetty; and set the pass ...

  10. 洛谷 P3919 可持久化线段树 题解

    题面 这题好水的说~很明显就是主席树的大板子 然而我交了3遍才调完所有的BUG,开好足够的数组,卡掉大大的常数: 针对与每次操作,change()会创建新节点,而ask()虽然也会更新左右儿子的节点编 ...