• 基于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中。如果有什么疑问，欢迎交流。

  • 相关阅读:
    html截取最后几个字符
    Spirng Cloud Gateway详解
    3.1、数据链路层概述
    [LeetCode]数组相关试题
    【论文笔记】Perception, Planning, Control, and Coordination for Autonomous Vehicles
    SVM介绍
    kotlin 注解 @Parcelize 使用
    [jmx]zookeeper/kafka/hive/hadoop/presto/presto等组件的jmx监控汇集
    PaadleInference源码编译操作流程
    【Java SE】抽象类和接口
  • 原文地址：https://blog.csdn.net/yelangkingwuzuhu/article/details/126514927