Leaflet 加载Mapbox studio pbf格式矢量切片（一）

最新推荐文章于 2024-02-22 01:00:00 发布

GIS开发者

最新推荐文章于 2024-02-22 01:00:00 发布

阅读量2.4k

点赞数 1

分类专栏： Leaflet MapBox 文章标签： leaflet Mapbox 矢量切片

本文链接：https://blog.csdn.net/GISuuser/article/details/101309883

版权

MapBox 同时被 2 个专栏收录

36 篇文章 12 订阅

订阅专栏

Leaflet

12 篇文章 11 订阅

订阅专栏

矢量切片数量小，传输速度快，不受分辨率影响，可以动态调整样式，有着不可替代的优点。最近在研究如何使用Leaflet加载Mapbox studio生成的pbf格式的切片。主要用了两种方案。这里讲第一种，使用Leaflet.VectorGrid插件。

代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="lib/leaflet/leaflet.css"/>
  <link rel="stylesheet" type="text/css" href="lib/plugins/leaflet.marker.highlight.css"/>
  <link rel="stylesheet" type="text/css" href="css/map.css"/>
  <script src="lib/leaflet/leaflet.js"></script>
  <script src="lib/plugins/leaflet.ChineseTmsProviders.js"></script>
  <script src="lib/plugins/leaflet.marker.highlight.js"></script>
  <script src="lib/plugins/leaflet-tilelayer-wmts-src.js"></script>
  <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
  <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
  <title>用矢量插件加载</title>
</head>
<body>
<div id="map"></div>
<script src="js/createMap.js"></script>
<script src="js/common.js"></script>
<script src="js/interface.js"></script>
<script src="lib/jquery.js"></script>
<script>
  switchBaseLayer("谷歌","卫星图");//自己封装的加载谷歌TMS方法
  map.setView(L.latLng( 32.73563140,112.0754814),8);
  var url="http://*************/{z}/{x}/{y}.pbf";
  var vectorTileOptions = {
    layerURL: url,
    rendererFactory: L.canvas.tile,
    // tms: true,//根据自己的情况调整true还是false
    vectorTileLayerStyles: {
      'dt_zzdk': function (properties, zoom) {//dt_zzdk为切片图层名称
          return {
            weight: 2,
            color: 'red',
            opacity: 1,
            fillColor: 'yellow',
            fill: true,
            radius: 6,
            fillOpacity: 0.0
          }
      }
    },
    interactive: true,	//开启VectorGrid触发mouse/pointer事件
    getFeatureId: function (f) {
      return f.properties.objectid;
    }
  };
  var vectorTile = new L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);
  //为每个点注册一个mouseover事件
  vectorTile.on('mouseover', function (e) {
    var properties = e.layer.properties;
    L.popup()
        .setContent(properties.name || properties.type)
        .setLatLng(e.latlng)
        .openOn(map);
  });

</script>

</body>
</html>

效果图

红线部分是我加载的矢量瓦片，底部用的是谷歌的TMS

虽然效果不好，还是实现了在一起的加载

GIS开发者

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
Leaflet 加载Mapbox studio pbf格式矢量切片（一）

矢量切片数量小，传输速度快，不受分辨率影响，可以动态调整样式，有着不可替代的优点。最近在研究如何使用Leaflet加载Mapbox studio生成的pbf格式的切片。主要用了两种方案。这里讲第一种，使用Leaflet.VectorGrid插件。代码<!DOCTYPE html><html lang="zh-cn"><head> <met...
复制链接

扫一扫