• 基于Leaflet的leaflet-sidebar侧边栏组件集成

    如果你需要在Leaflet地图中增加一个侧边栏，以此来做一个额外的数据处理，那么您可以使用现成的leaflet-sidebar组件来帮助您加快开发速度，同时，该组件基于leaflet进行了扩展，更加灵活。

    言归正传，本文开始重点阐述如何进行组件的引入和集成。

    第一步、在github上想在组件。

    相应的github地址为：https://github.com/Turbo87/sidebar-v2.git，下载后得到的目录结构大致如下：

    第二步、打开其示例程序

    目录在examples，里面有例子。

    我们可以看到，这个控件不仅支持leaflet，同时支持openlayers。所以非常好用。

    第三步、可以打开position-right.html，这个是官方提供的示例，用于演示侧边栏摆放在右边。使用浏览器打开可以看到如下页面：

    这是官方提供的基于osm底图的演示页面，那么怎么在本地进行集成开发呢？

    第三步、使用本地影像服务进行开发

    复制position-right2.html文件，使用熟悉的方式将底图替换为本地。关键代码如下：

    1. L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {
    2. 			code: 'EPSG:4326',
    3. 			projection: L.Projection.LonLat,
    4. 			transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),
    5. 			scale: function (zoom) {
    6. 				return 256 * Math.pow(2, zoom - 1);
    7. 			}
    8. 		});
    9.  
    10. 		var mymap = L.map('map',{crs:L.CRS.CustomEPSG4326,attributionControl: false}).setView([28.250248, 112.896366], 10);
    11.  
    12. 		function onMapClick(e) {
    13. 			L.popup().setLatLng(e.latlng)
    14. 				.setContent("坐标为:" + e.latlng.toString())
    15. 				.openOn(mymap);
    16. 		}
    17.  
    18. 		$(document).ready(function(){
    19. 			$("#mapid").height(window.screen.height-76 - 65 - 20);
    20. 			mymap.invalidateSize(true);//地图重绘
    21.  
    22. 			//底图
    23. 			L.tileLayer('http://localhost:8086/data/basemap_nowater/1_10_tms/{z}/{x}/{y}.jpg', {
    24. 				maxZoom: 20,
    25. 				minZoom:3,
    26. 				attribution: 'diy Map data © yelangking contributors, ',
    27. 				id: 'mapbox/streets-v11',
    28. 				tileSize: 256,
    29. 				zoomOffset: -1
    30. 			}).addTo(mymap);
    31.  
    32. 			//标签
    33. 			L.tileLayer('http://localhost:8086/data/basemap_nowater/1-10label/{z}/{x}/{y}.png', {maxZoom: 10,minZoom:3,
    34. 				id: 'mapbox/label',tileSize: 256,zoomOffset: -1
    35. 			}).addTo(mymap);
    36.  
    37. 			mymap.on('click', onMapClick);
    38.  
    39. 			// add a polygon 
    40. 			var polygon = L.polygon([
    41. 			  [28.31177, 112.80762],
    42. 			  [28.31451, 113.1633],
    43. 			  [28.00415, 113.17566],
    44. 			  [28.00278, 112.81174]
    45. 			],{
    46. 			  color: 'green',
    47. 			  fillColor: '#f03',
    48. 			  fillOpacity: 0.5
    49. 			}).addTo(mymap);
    50.  
    51. 			initLayerArray();//初始化地图图层
    52.  
    53. 		});

    第四步、引入sidebar的css和js文件

    <link rel="stylesheet" href="../css/leaflet-sidebar.css" />
     <script src="../js/leaflet-sidebar.js"></script>

    第五步、在dom中绑定sidebar到map中

    var sidebar = L.control.sidebar('sidebar', {position: 'right'}).addTo(mymap);

    打开浏览器访问这个地址，可以看到以下的页面：

    经过上述的步骤，就完成了sidebar的继承。完整代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <title>sidebar-v2 exampletitle>
    5.  
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    7.     <meta charset="utf-8">
    8.  
    9.     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    10.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    11.     
    12.  
    13.     <link rel="stylesheet" href="../css/leaflet-sidebar.css" />
    14.  
    15.     <style>
    16.         body {
    17.             padding: 0;
    18.             margin: 0;
    19.         }
    20.  
    21.         html, body, #map {
    22.             height: 100%;
    23.             font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
    24.         }
    25.  
    26.         .lorem {
    27.             font-style: italic;
    28.             color: #AAA;
    29.         }
    30.     style>
    31. head>
    32. <body>
    33.     <div id="sidebar" class="sidebar collapsed">
    34.         
    35.         <div class="sidebar-tabs">
    36.             <ul role="tablist">
    37.                 <li><a href="#home" role="tab" id="xz_info"><i class="fa fa-bars">i>a>li>
    38.                 <li><a href="#profile" role="tab"><i class="fa fa-user">i>a>li>
    39.                 <li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope">i>a>li>
    40.                 <li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github">i>a>li>
    41.             ul>
    42.  
    43.             <ul role="tablist">
    44.                 <li><a href="#settings" role="tab"><i class="fa fa-gear">i>a>li>
    45.             ul>
    46.         div>
    47.  
    48.         
    49.         <div class="sidebar-content">
    50.             <div class="sidebar-pane" id="home">
    51.                 <h1 class="sidebar-header">
    52.                     sidebar-v2
    53.                     <span class="sidebar-close"><i class="fa fa-caret-right">i>span>
    54.                 h1>
    55.  
    56.                 <p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leafleta> or <a href="http://openlayers.org/">OpenLayersa>.p>
    57.  
    58.                 <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.p>
    59.  
    60.                 <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.p>
    61.  
    62.                 <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.p>
    63.             div>
    64.  
    65.             <div class="sidebar-pane" id="profile">
    66.                 <h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-right">i>span>h1>
    67.             div>
    68.  
    69.             <div class="sidebar-pane" id="messages">
    70.                 <h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-right">i>span>h1>
    71.             div>
    72.  
    73.             <div class="sidebar-pane" id="settings">
    74.                 <h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-right">i>span>h1>
    75.             div>
    76.         div>
    77.     div>
    78.  
    79.     <div id="map" class="sidebar-map">div>
    80.  
    81.     <a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">a>
    82.  
    83.     <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js">script>
    84.     <script src="../js/leaflet-sidebar.js">script>
    85. 	<script src="../../jquery/jquery.js">script>
    86.  
    87.     <script>
    88.  
    89. 		L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {
    90. 			code: 'EPSG:4326',
    91. 			projection: L.Projection.LonLat,
    92. 			transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),
    93. 			scale: function (zoom) {
    94. 				return 256 * Math.pow(2, zoom - 1);
    95. 			}
    96. 		});
    97.  
    98. 		var mymap = L.map('map',{crs:L.CRS.CustomEPSG4326,attributionControl: false}).setView([28.250248, 112.896366], 10);
    99.  
    100. 		function onMapClick(e) {
    101. 			L.popup().setLatLng(e.latlng)
    102. 				.setContent("坐标为:" + e.latlng.toString())
    103. 				.openOn(mymap);
    104. 		}
    105.  
    106. 		$(document).ready(function(){
    107. 			$("#mapid").height(window.screen.height-76 - 65 - 20);
    108. 			mymap.invalidateSize(true);//地图重绘
    109.  
    110. 			//底图
    111. 			L.tileLayer('http://localhost:8086/data/basemap_nowater/1_10_tms/{z}/{x}/{y}.jpg', {
    112. 				maxZoom: 20,
    113. 				minZoom:3,
    114. 				attribution: 'diy Map data © yelangking contributors, ',
    115. 				id: 'mapbox/streets-v11',
    116. 				tileSize: 256,
    117. 				zoomOffset: -1
    118. 			}).addTo(mymap);
    119.  
    120. 			//标签
    121. 			L.tileLayer('http://localhost:8086/data/basemap_nowater/1-10label/{z}/{x}/{y}.png', {maxZoom: 10,minZoom:3,
    122. 				id: 'mapbox/label',tileSize: 256,zoomOffset: -1
    123. 			}).addTo(mymap);
    124.  
    125. 			mymap.on('click', onMapClick);
    126.  
    127. 			// add a polygon 
    128. 			var polygon = L.polygon([
    129. 			  [28.31177, 112.80762],
    130. 			  [28.31451, 113.1633],
    131. 			  [28.00415, 113.17566],
    132. 			  [28.00278, 112.81174]
    133. 			],{
    134. 			  color: 'green',
    135. 			  fillColor: '#f03',
    136. 			  fillOpacity: 0.5
    137. 			}).addTo(mymap);
    138.  
    139. 			initLayerArray();//初始化地图图层
    140.  
    141. 		});
    142.  
    143.         var sidebar = L.control.sidebar('sidebar', {position: 'right'}).addTo(mymap);
    144.     script>
    145. body>
    146. html>

    有兴趣的朋友可以看一下sidebar.js这个文件，他提供了以下内置的函数，可以方便调用。sidebar.js的源码如下：

    1. /* global L */
    2.  
    3. /**
    4.  * @name Sidebar
    5.  * @class L.Control.Sidebar
    6.  * @extends L.Control
    7.  * @param {string} id - The id of the sidebar element (without the # character)
    8.  * @param {Object} [options] - Optional options object
    9.  * @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
    10.  * @see L.control.sidebar
    11.  */
    12. L.Control.Sidebar = L.Control.extend(/** @lends L.Control.Sidebar.prototype */ {
    13.     includes: (L.Evented.prototype || L.Mixin.Events),
    14.  
    15.     options: {
    16.         position: 'left'
    17.     },
    18.  
    19.     initialize: function (id, options) {
    20.         var i, child;
    21.  
    22.         L.setOptions(this, options);
    23.  
    24.         // Find sidebar HTMLElement
    25.         this._sidebar = L.DomUtil.get(id);
    26.  
    27.         // Attach .sidebar-left/right class
    28.         L.DomUtil.addClass(this._sidebar, 'sidebar-' + this.options.position);
    29.  
    30.         // Attach touch styling if necessary
    31.         if (L.Browser.touch)
    32.             L.DomUtil.addClass(this._sidebar, 'leaflet-touch');
    33.  
    34.         // Find sidebar > div.sidebar-content
    35.         for (i = this._sidebar.children.length - 1; i >= 0; i--) {
    36.             child = this._sidebar.children[i];
    37.             if (child.tagName == 'DIV' &&
    38.                     L.DomUtil.hasClass(child, 'sidebar-content'))
    39.                 this._container = child;
    40.         }
    41.  
    42.         // Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li
    43.         this._tabitems = this._sidebar.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li');
    44.         for (i = this._tabitems.length - 1; i >= 0; i--) {
    45.             this._tabitems[i]._sidebar = this;
    46.         }
    47.  
    48.         // Find sidebar > div.sidebar-content > div.sidebar-pane
    49.         this._panes = [];
    50.         this._closeButtons = [];
    51.         for (i = this._container.children.length - 1; i >= 0; i--) {
    52.             child = this._container.children[i];
    53.             if (child.tagName == 'DIV' &&
    54.                 L.DomUtil.hasClass(child, 'sidebar-pane')) {
    55.                 this._panes.push(child);
    56.  
    57.                 var closeButtons = child.querySelectorAll('.sidebar-close');
    58.                 for (var j = 0, len = closeButtons.length; j < len; j++)
    59.                     this._closeButtons.push(closeButtons[j]);
    60.             }
    61.         }
    62.     },
    63.  
    64.     /**
    65.      * Add this sidebar to the specified map.
    66.      *
    67.      * @param {L.Map} map
    68.      * @returns {Sidebar}
    69.      */
    70.     addTo: function (map) {
    71.         var i, child;
    72.  
    73.         this._map = map;
    74.  
    75.         for (i = this._tabitems.length - 1; i >= 0; i--) {
    76.             child = this._tabitems[i];
    77.             var sub = child.querySelector('a');
    78.             if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') {
    79.                 L.DomEvent
    80.                     .on(sub, 'click', L.DomEvent.preventDefault )
    81.                     .on(sub, 'click', this._onClick, child);
    82.             }
    83.         }
    84.  
    85.         for (i = this._closeButtons.length - 1; i >= 0; i--) {
    86.             child = this._closeButtons[i];
    87.             L.DomEvent.on(child, 'click', this._onCloseClick, this);
    88.         }
    89.  
    90.         return this;
    91.     },
    92.  
    93.     /**
    94.      * @deprecated - Please use remove() instead of removeFrom(), as of Leaflet 0.8-dev, the removeFrom() has been replaced with remove()
    95.      * Removes this sidebar from the map.
    96.      * @param {L.Map} map
    97.      * @returns {Sidebar}
    98.      */
    99.      removeFrom: function(map) {
    100.          console.log('removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon.');
    101.          this.remove(map);
    102.      },
    103.  
    104.     /**
    105.      * Remove this sidebar from the map.
    106.      *
    107.      * @param {L.Map} map
    108.      * @returns {Sidebar}
    109.      */
    110.     remove: function (map) {
    111.         var i, child;
    112.  
    113.         this._map = null;
    114.  
    115.         for (i = this._tabitems.length - 1; i >= 0; i--) {
    116.             child = this._tabitems[i];
    117.             L.DomEvent.off(child.querySelector('a'), 'click', this._onClick);
    118.         }
    119.  
    120.         for (i = this._closeButtons.length - 1; i >= 0; i--) {
    121.             child = this._closeButtons[i];
    122.             L.DomEvent.off(child, 'click', this._onCloseClick, this);
    123.         }
    124.  
    125.         return this;
    126.     },
    127.  
    128.     /**
    129.      * Open sidebar (if necessary) and show the specified tab.
    130.      *
    131.      * @param {string} id - The id of the tab to show (without the # character)
    132.      */
    133.     open: function(id) {
    134.         var i, child;
    135.  
    136.         // hide old active contents and show new content
    137.         for (i = this._panes.length - 1; i >= 0; i--) {
    138.             child = this._panes[i];
    139.             if (child.id == id)
    140.                 L.DomUtil.addClass(child, 'active');
    141.             else if (L.DomUtil.hasClass(child, 'active'))
    142.                 L.DomUtil.removeClass(child, 'active');
    143.         }
    144.  
    145.         // remove old active highlights and set new highlight
    146.         for (i = this._tabitems.length - 1; i >= 0; i--) {
    147.             child = this._tabitems[i];
    148.             if (child.querySelector('a').hash == '#' + id)
    149.                 L.DomUtil.addClass(child, 'active');
    150.             else if (L.DomUtil.hasClass(child, 'active'))
    151.                 L.DomUtil.removeClass(child, 'active');
    152.         }
    153.  
    154.         this.fire('content', { id: id });
    155.  
    156.         // open sidebar (if necessary)
    157.         if (L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
    158.             this.fire('opening');
    159.             L.DomUtil.removeClass(this._sidebar, 'collapsed');
    160.         }
    161.  
    162.         return this;
    163.     },
    164.  
    165.     /**
    166.      * Close the sidebar (if necessary).
    167.      */
    168.     close: function() {
    169.         // remove old active highlights
    170.         for (var i = this._tabitems.length - 1; i >= 0; i--) {
    171.             var child = this._tabitems[i];
    172.             if (L.DomUtil.hasClass(child, 'active'))
    173.                 L.DomUtil.removeClass(child, 'active');
    174.         }
    175.  
    176.         // close sidebar
    177.         if (!L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
    178.             this.fire('closing');
    179.             L.DomUtil.addClass(this._sidebar, 'collapsed');
    180.         }
    181.  
    182.         return this;
    183.     },
    184.  
    185.     /**
    186.      * @private
    187.      */
    188.     _onClick: function() {
    189.         if (L.DomUtil.hasClass(this, 'active'))
    190.             this._sidebar.close();
    191.         else if (!L.DomUtil.hasClass(this, 'disabled'))
    192.             this._sidebar.open(this.querySelector('a').hash.slice(1));
    193.     },
    194.  
    195.     /**
    196.      * @private
    197.      */
    198.     _onCloseClick: function () {
    199.         this.close();
    200.     }
    201. });
    202.  
    203. /**
    204.  * Creates a new sidebar.
    205.  *
    206.  * @example
    207.  * var sidebar = L.control.sidebar('sidebar').addTo(map);
    208.  *
    209.  * @param {string} id - The id of the sidebar element (without the # character)
    210.  * @param {Object} [options] - Optional options object
    211.  * @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
    212.  * @returns {Sidebar} A new sidebar instance
    213.  */
    214. L.control.sidebar = function (id, options) {
    215.     return new L.Control.Sidebar(id, options);
    216. };

    总结：本文介绍了leaflet的侧边栏控制组件sidebar，同时详细说明了如何将sidebar集成到leaflet中。如果有什么疑问，欢迎交流。

  • 相关阅读:
    XV4001BD(数字输出陀螺传感器) 汽车级晶振
    系统架构设计师备考经验分享：如何有效备考
    速看 二建考生查分啦 安徽省2022年二建考试成绩、合格线公布
    Dubbo面试系列问题总结
    静态代理和动态代理
    Go开发IDE全览：GoLand vs VSCode全面解析
    如何解决“德语/文”等外文字符显示乱码问题
    UE 视差材质 学习笔记
    Java 基于 SpringBoot 的校园疫情防控系统
    React函数式组件渲染、useEffect顺序总结
  • 原文地址：https://blog.csdn.net/yelangkingwuzuhu/article/details/126514927