Leaflet 加载Mapbox studio pbf格式矢量切片(一)

Leaflet 同时被 2 个专栏收录
12 篇文章 1 订阅
24 篇文章 0 订阅

矢量切片数量小,传输速度快,不受分辨率影响,可以动态调整样式,有着不可替代的优点。最近在研究如何使用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 

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

  • 1
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页

打赏

GIS开发者

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值