在地图上手绘折线 

  1 <!DOCTYPE html>
  2 <html lang="zh">
  3     <head>
  4         <meta charset="UTF-8">
  5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7         <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
  8         <title></title>
  9         <style type="text/css">
 10             body {
 11                 margin: 0;
 12             }
 13 
 14             #mapid {
 15                 height: 500px;
 16             }
 17         </style>
 18     </head>
 19     <body>
 20         <div id="map-container">
 21             <div>
 22                 <button id="first-btn">第一层</button>
 23                 <button id="second-btn">第二层</button>
 24             </div>
 25             <div id="mapid"></div>
 26         </div>
 27 
 28         <script type="text/javascript" src="leaflet/leaflet.js"></script>
 29         <script type="text/javascript" src="leaflet/leaflet-pather.js"></script>
 30 
 31         <script type="text/javascript">
 32             const mymapOptions = {
 33                 // 地图中心
 34                 center: [51.505, -0.09],
 35                 // 地图的最小缩放级别
 36                 minZoom: 11,
 37                 // 初始化时的缩放等级
 38                 zoom: 13,
 39                 // 地图的最大缩放级别
 40                 maxZoom: 15,
 41                 // 强制让地图的缩放级别始终为这个值的倍数
 42                 zoomSnap: 1,
 43                 // 版权控件添加到地图中（即水印）
 44                 attributionControl: false,
 45                 // 是否显示zoom 缩放控件,默认是true
 46                 zoomControl: true,
 47             }
 48 
 49             const mymap = L.map('mapid', mymapOptions);
 50 
 51             const imageUrl = 'leaflet/images/b1-floor1-full-h.png';
 52             // 获取顶部左边的边界
 53             const northEast = L.latLng(mymap.getBounds()._northEast);
 54             // 获取底部右边的边界
 55             const southWest = L.latLng(mymap.getBounds()._southWest);
 56 
 57             const imageBounds = L.latLngBounds(northEast, southWest);
 58             const imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mymap);
 59 
 60             let points = []
 61             // polyline 折线
 62             let lines = L.polyline([])
 63             const tempLines = L.polyline([])
 64 
 65             function setVertex(e) {
 66                 points.push([e.latlng.lat, e.latlng.lng])
 67                 // 将一个给定的点添加到折线上。
 68                 lines.addLatLng(e.latlng)
 69                 // 添加图层到地图上
 70                 mymap.addLayer(lines)
 71                 // L.circle 一个用于在地图上绘制圆形覆盖物的类，圆点？
 72                 mymap.addLayer(L.circle(e.latlng, {
 73                     color: '#ff0000',
 74                     fillColor: 'ff0000',
 75                     fillOpacity: 1
 76                 }))
 77             }
 78 
 79             function setMoveLine(e) {
 80                 if (points.length > 0) {
 81                     const ls = [points[points.length - 1],
 82                         [e.latlng.lat, e.latlng.lng]
 83                     ]
 84                     // 用给定的地理点数组替换多段折线中的所有点。
 85                     tempLines.setLatLngs(ls)
 86                     mymap.addLayer(tempLines)
 87                 }
 88             }
 89 
 90             function exitDraw(e) {
 91                 // L.polygon 一个用于在地图上绘制多边形覆盖物的类
 92                 // L.polygon([points]).addTo(mymap)
 93                 points = []
 94                 lines = L.polyline([])
 95             }
 96 
 97             mymap.on('click', setVertex)
 98             mymap.on('mousemove', setMoveLine)
 99             mymap.on('dblclick', exitDraw);
100         </script>
101 
102     </body>
103 </html>

 

posted @ 2022-04-23 09:33  sky-su  阅读(88)  评论(0)    收藏  举报