![0fd44a3701ac6be713dfbd643cdf890f.png](https://i-blog.csdnimg.cn/blog_migrate/ef1db049d9a6b3a5db2c665b6ed68c4c.jpeg)
前言
leaflet-webpack 入门开发系列环境知识点了解:
node 安装包下载
webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址
webpack 配置介绍文档
详细的 webpack 文档配置介绍,适合新手查看,我也是边看边学
![083d59ed687fe12768aa600916c453b6.png](https://i-blog.csdnimg.cn/blog_migrate/0b858ad8c16eded009dc59eef6bdd429.jpeg)
vscode 安装包下载,我这边用 vscode工具编译开发前端项目,个人觉的这款工具还不错
leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
leaflet 在线例子
leaflet 插件,leaflet 的插件库,非常有用
内容概览
leaflet 矢量瓦片
源代码 demo 下载
效果图如下:
![8316f88d5a55652fde6aa95d15265222.png](https://i-blog.csdnimg.cn/blog_migrate/41d9ba098f66fc9ad6153c23a5766f12.jpeg)
![a78742f3dba2c4d61cacdce542e386f5.png](https://i-blog.csdnimg.cn/blog_migrate/0d2863290302d1fcb81d64cbd65dd201.jpeg)
本篇主要利用 leaflet 的插件 leaflet.vectorgrid 实现两种不同数据源的矢量瓦片渲染加载效果:
调用 geoserver 发布的 pbf 矢量瓦片服务
加载 geojson 数据源渲染矢量瓦片
leaflet.vectorgrid 插件 github 地址: https:// github.com/Leaflet/Leaf let.VectorGrid
- 实现方式1:调用 geoserver 发布的 pbf 矢量瓦片服务
- geoserver 安装矢量瓦片插件,用来拓展支持发布矢量瓦片服务,具体可以参考以下资料:
![c4c3a85790ad0223419f203891abea82.png](https://i-blog.csdnimg.cn/blog_migrate/bf3bb8efbcedb22480a2a78e402a679b.png)
- geoserver 安装好矢量瓦片以及发布矢量瓦片服务之后,可以利用 leaflet.vectorgrid 插件来调用矢量瓦片服务渲染加载
//加载Pbf形式矢量瓦片函数
function loadVectorPbfLayer() {
// var localUrl = "http://localhost:8080/geoserver/gwc/service/wmts?" +
// "REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=ZKYGIS:bs_spot_t" +
// "&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&" +
// "FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}";
var localUrl = "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/ZKYGIS:bs_spot_t@EPSG:900913@pbf/{z}/{x}/{-y}.pbf";
var localVectorTileOptions = {
rendererFactory: L.canvas.tile,//渲染方式 canvas
interactive: true,//设置true,允许鼠标交互事件
getFeatureId: function (f) {
return f.properties.map_num;
},
//rendererFactory: L.svg.tile,
vectorTileLayerStyles: getSpotVectorStyles("bs_spot_t"),//设置矢量渲染的样式符号
};
……
更多详情见下面链接:
leaflet-webpack 入门开发系列六矢量瓦片(附源码下载) - 小专栏xiaozhuanlan.com![3090f1fe44d1efdecd11417a71eec0ef.png](https://i-blog.csdnimg.cn/blog_migrate/eac22b3a6fb9ce54e1cdb09ba5c014c4.jpeg)
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
GIS之家店铺:GIS之家
GIS之家源码咨询:GIS之家webgis入门开发系列demo源代码咨询