Leaflet插件整理——Tile/image layers插件

1.前言

Leaflet以体积小、轻量著称，但这也是它的缺点，和openlayers相比，
Leaflet主体程序实现的功能非常少，比如加载leaflet默认只支持WMS服务，
好在它有丰富的插件可以使用，但是如果不了解leaflet有哪些插件，我们在实际工作中可能走很多弯路，比如我们费了好长时间终于实现了leaflet加载wfs数据，但最后发现其实早有现成的插件可以用。所以就产生了整理leaflet插件的想法，本次整理的插件主要是官网上推荐的，共有6类，因此这一系列博客应该会有6篇。这篇主要是关于加载Tile/Image数据的插件。
很遗憾，这一系列博客可能要断更了，博主已经走出校园到了工作岗位，工作中用不到leaflet，所以没时间更新了，也许以后用到leaflet还会继续更新。

2. Basemap providers插件

2.1 leaflet-providers

• 作用:包含各种免费Tile提供商的配置-OSM、OpenCycleMap、Stamen、ESRI等。

• 用法：

  
  	const map=L.map('map-container').setView([37,104],3)
      //MapBox
      L.tileLayer.provider('MapBox',{
      	//这里请换成自己的
          accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5',
          id:'mapbox.streets'
      }).addTo(map)
      //Thunderforest
      L.tileLayer.provider('Thunderforest.Landscape', {apikey: ''}).addTo(map);
      //Stamen
      L.tileLayer.provider('Stamen.Watercolor').addTo(map);
      //ESRI
      //以彰没用过ESRI数据，这次注册的时候告诉我ESRI不给我们国家提供开发服务，所我我没有注册成功，没法测试，不过我们可以用esri-leaflet插件使用esri数据，下面会有介绍。
  

2.2 Leaflet.ChineseTmsProviders

• 作用：加载中国地图数据，包括天地图、谷歌地图 、高德地图、智图。
• 用法：

L.tileLayer.chinaProvider('TianDiTu.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map);
L.tileLayer.chinaProvider('GaoDe.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map);
L.tileLayer.chinaProvider('Google.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map);
L.tileLayer.chinaProvider('Geoq.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map);

• 各地图支持的layer

  • TianDiTu
    • TianDiTu.Normal.Map
    • TianDiTu.Normal.Annotion
    • TianDiTu.Satellite.Map
    • TianDiTu.Satellite.Annotion
    • TianDiTu.Terrain.Map
    • TianDiTu.Terrain.Annotion
  • GaoDe
    • GaoDe.Normal.Map (include Annotion)
    • GaoDe.Satellite.Map
    • GaoDe.Satellite.Annotion
  • Google
    • Google.Normal.Map (include Annotion)
    • Google.Satellite.Map
  • Geoq
    • Geoq.Normal.Map
    • Geoq.Normal.Color
    • Geoq.Normal.PurplishBlue
    • Geoq.Normal.Gray
    • Geoq.Normal.Warm
    • Geoq.Normal.Cold

2.3 Esri Leaflet

• 作用：使用ArcGIS服务
• 用法

L.esri.basemapLayer('Streets').addTo(map);

// a Leaflet marker is used by default to symbolize point features.
L.esri.featureLayer({
    url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'
    }).addTo(map);

• esri-leaflet是一个非常强大的插件，支持地图服务、要素图层等，不仅仅是ArcGIS online地图。更多功能请查看官网。

2.4 Bing Maps Layer

• 作用：添加Bing Tile地图
• 用法：

const BING_KEY='AuhiCJHlGzhg93IqUH_oCpl_-ZUrIE6SPftlyGYUvr9Amx5nzA-WqGcPquyFZl4L'
L.tileLayer.bing(BING_KEY).addTo(map)

• 这个地图我们用的估计也不多，就不多说了，如果有需要请访问官网。
  2.5 SuperMap Leaflet
• 作用：用于处理SuperMap服务、瓦片等
• 用法：

L.supermap.tiledMapLayer("http://:/iserver/services//rest/maps/").addTo(map);

2.6 L.MapkitMutant

• 作用：显示苹果的MapKitJS基本地图
• 用法：访问这个网站的时候发现UI都是乱的，什么都看不清.

3. Basemap formats插件

用于加载常用格式的基础地图或GIS栅格图层的插件。在为Leaflet主体程序只支持WMS服务，所以其它的服务就要在这里找了。
3.1 leaflet.TileLayer.WMTS

• 作用：添加一个WMTS图层
• 用法：

const url='http://localhost:8080/geoserver/gwc/service/wmts/'
const dem_tile=new L.TileLayer.WMTS(url,{
    ayer:'test:China_dem',//Layer name
    tilematrixSet:'EPSG:900913',//Goeserver GrdiSet
                format:'image/png',
    minZoom:3,
     maxZoom:8,
    attribution:'Geoserver raster tile test'

    })
const map=L.map('map-container',{crs:L.CRS.EPSG3857}).setView([37,104],3)
dem_tile.addTo(map)

3.2 leaflet.wms

• 作用：增强了leaflet的WMS支持，包括tile/untile图层、共享的WMS源以及通过 GetFeatureInfo定义的图层,增加后的openlayers有点像。

• 用法：

  • L.WMS.TileLayer

  const tiles = L.WMS.tileLayer("http://localhost:8080/geoserver/rest_workspace/wms", {
      'tileSize': 512,
      'layers': 'china_province,weather_station',
      'transparent': true
  });
  tiles.addTo(map);
  

  • L.WMS.Overlay

  const overlay = L.WMS.overlay("http://localhost:8080/geoserver/rest_workspace/wms", {
      'layers': 'china_province,weather_station',
      'transparent': true
  });
  overlay.addTo(map);
  

  • L.WMS.Source

  const source = L.WMS.source("http://localhost:8080/geoserver/rest_workspace/wms", {
      'transparent': true,
      'tiled': true
  });
  source.getLayer("test:china_province").addTo(map);
  source.getLayer("weather_station").addTo(map);
  

  • L.WMS.Layer

  const options = {'transparent': true};
  const layer1 = L.WMS.layer("http://localhost:8080/geoserver/rest_workspace/wms", "china_province", options);
  const layer2 = L.WMS.layer("http://localhost:8080/geoserver/rest_workspace/wms", "weather_station", options);
  
  // layer1._source === layer2._source
  const control = L.control.layers({}, {
      'china  rovince': layer1,
      'weather station': layer2,
  })
  control.addTo(map);
  
  

  • Identify

  leaflet-wms默认开启identify，如果要禁用请在初始化时设置参数identify:false,默认的查询是在点击位置弹出一个popup，显示该要素的属性信息。
  
  如果要自定义查询需要扩展L.WMS.source类，比如我们查询后只想显示该要素的名称。

  var MySource = L.WMS.Source.extend({
      'showFeatureInfo': function(latlng, info) {
          const rex=/name.*/
          infos=info.split('\n')
          msg=infos.filter(info=>info.match(rex))
          const popup=L.popup()
                  .setLatLng(latlng)
                  .setContent(`
  ${msg[0].split('=')[1]}
  `)
                  .openOn(map)
          // $('.output').html(info);
  
          // console.log(info)
          // console.log(msg[0].split('=')[1])
      }
  });
  const s=new MySource("http://localhost:8080/geoserver/rest_workspace/wms", {
      'transparent': true,
      'tiled': true
  });
  s.getLayer('china_province').addTo(map)
  

  效果如下

未完待续…

抱歉，不会再更新了。。。