Leaflet插件整理Tileimage layers插件,wallpaper桌面整理插件

Leaflet插件整理1 .简介2. Basemap providers插件3. Basemap formats插件

1 .前言

Leaflet以体积小、重量轻而闻名，但这也是一个缺点，与openlayers相比

Leaflet主程序实现的功能非常少，例如Leaflet的加载默认只支持WMS服务，

幸运的是，它有丰富的插件。 但是，如果不知道leaflet有什么样的插件，我们在实际工作中可能会走很多弯路。 例如，我们花了很长时间才实现将wfs数据加载到leaflet中，但最后发现有现成的插件。 于是，产生了整理传单插件的想法。 此次整理的插件主要在官网上推荐，共有6种。 因此，这一系列博客应该有6个。 这主要是关于加载Tile/Image数据的插件。

很遗憾，这一系列的博客可能会更断。 博主已经离开校园到了工作岗位，工作中不能使用leaflet，所以没有时间更新。 今后可能会继续使用leaflet进行更新。

2 .基本映射提供程序插件2.1 leaflet -提供程序

角色：包括各种免费Tile提供程序的配置，包括osm、OpenCycleMap、Stamen和ESRI。

使用方法：

constmap=L.map(map-container ) ).set view ([ 37，104 ]，3 )/mapboxL.tilelayer.provider ) (mapbox )， //此处请更换为您自己的access token : ' PK.ey J1 ijoibwfwym 94 iiwiysi6imnpejy4nxvycta2emycxbndhrqcmz 3n3gifq.rjcfig 214 aris lbb 65 ' id : ' map box.streets ' }.addto (map )/thunderforestl.tile layer.provider )、thunder forest.landscape {//} //ESRI //彰没有使用ESRI数据。 这次注册的时候，ESRI告诉我们国家不会提供开发服务。 我没有成功注册，无法测试，但是我可以在esri-leaflet插件中使用ESRI数据。 介绍如下。 2.2 Leaflet.ChineseTmsProviders

作用：加载天地图、谷歌地图、高德地图、智图等中国地图数据。 用法： l.tile layer.China provider (Tian ditu.normal.map )，{maxZoom:18，minZoom:5} ).addto ) map； l.tile layer.China provider (Gao de.normal.map )，{maxZoom:18，minZoom:5} ).addto ) map； l.tile layer.China provider (Google.normal.map )，{maxZoom:18，minZoom:5} ).addto ) map； l.tile layer.China provider (geoq.normal.map )，{maxZoom:18，minZoom:5} ).addto ) map )； 各地图支持的层

tianditutianditu.normal.maptianditu.normal.annotiontianditu.satellite.maptianditu.annotiontianditu . annotion ) Gao de.satellite.mapgaode.satellite.annotiongoogle.normal.map ) Inc lite.annotiongogle.normal.map PGE OQ.normal.colorgeoq.normal.purplishbluegeoq.normal.graygeoq.normal

角色： ArcGIS服务用法l.ESRI.base maplayer (“streets”. addto ) ) map )； //aleafletmarkerisusedbydefaulttosymbolizepointfeatures.l.ESRI.feature layer ({ URL : ' https://services.ArcGIS.con rest/services/heritage _ trees _ portland/featureserver/0 ' }.addto (map )； 不要说错话

常强大的插件，支持地图服务、要素图层等，不仅仅是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://<server>:<port>/iserver/services/<serviceName>/rest/maps/<mapName>").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._sourceconst 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(`<p>${msg[0].split('=')[1]}</p>`) .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)

效果如下

未完待续…

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