leaflet.js 实现离线地图

在地图Gis模块开发常见需求功能点如下：

1. 打点相关：地图打点、海量点加载、点聚合
2. 点击点，自定义窗口显示点位详细信息。
3. 区域绘制-省市区边界样式修改、3D阴影等
4. 框线点-中心点画圆框选、多边形绘制框选
5. 判断点是否在选框范围之内。

场景：在前端需求里实现以上地图相关功能时，我们常常可以使用百度地图、高德地图、谷歌地图、天地图等相关在线地图服务及api快速实现地图相关功能。
但是对于有些客户是政务系统，只能使用内网不能提供外网的时候，以上地图服务就不能使用了，这个时候就需要用到离线地图服务。

leaflet.js的使用

1.下载地图瓦片，搭建本地地图服务，引入服务js

1. 初始化地图

3.绘制省市区边线

4.地图打点

//list为地图点位数组对象，每一项包含经纬度坐标点等信息。
   function setMakers(list){
        markers = L.markerClusterGroup();
        for (var i = 0; i < list.length; i++) {
            var a = list[i];
            var data = a
            var marker = L.marker(new L.LatLng(a.lat, a.lon), {title: '' , icon :getIcon(a.index)});
            let showItem = [
              { key: '摄像头名称', val: data.nodeName },
              // 0是未知，1正常，2离线
              { key: '状态', val: data.onlineStatus === 2 ? '离线' : data.onlineStatus === 1 ? '正常' : '未知' },
              {
                key: '类型',
                val:
                   getDeviceType(data.deviceType)
              },
              {
                key: '经度',
                val: data.lon
              },
              {
                key: '纬度',
                val: data.lat
              }
            ]
            let basicInfo = ''
            for (let i = 0; i < showItem.length; i++) {
              basicInfo +=
                '<div class="info_row"><span class="info_lable">' +
                showItem[i].key +
                '：</span>' +
                showItem[i].val +
                '</div>'
            }
           let myTitle = '<div class="info_title">视频详情</div>'
           window.currentData = data
            window.basicDom =
              '<div class="beauty-scroll">' +
              myTitle +
              basicInfo +
              '<div id="map_video_box" class="video_play_block">' +
              '<img class="map_play_btn" src="./src/assets/img/play.png" onclick="playVideo(currentData)">'+
              `<div id="play_video_block" style="width:100%;height:99%;"></div>` +
              '</div>' +
            '</div>'
            marker.bindPopup(basicDom);
            markers.addLayer(marker);
            mapMarkers.push(marker)
        }
        map.addLayer(markers);
    }

6、点击框选范围按钮，绘制框选多边形

    $(".xuankuang_btn").click(()=>{
      clearDrawTool()
      // DrawTool.cancle()
      DrawTool.tempPolygon = new L.polygon([],{color: '#f17879',fillColor: '#ff4d4f',
        opacity: 0.8});
      DrawTool.lines  = new L.polyline(DrawTool.points,{color: '#f17879',fillColor: '#ff4d4f',
        opacity: 0.6});
      DrawTool.tempLines  = new L.polyline([],{dashArray: 12,color: '#f17879',fillColor: '#ff4d4f',
        opacity: 0.6});
      DrawTool.polygon = L.polygon(DrawTool.points,{fillColor: '#f17879', color: 'green'});
      // 初始化画布,给定地图容器,第一个参数是地图对象，第二个参数是绘制时图标的样式，第二个参数可以不写
      DrawTool.init(map, './src/assets/img/move.png');
    })

每次绘制选矿时，清除上次框选内容

    function clearDrawTool(){
      // 第二次框选时去除上次框选内容
      if (DrawTool.markers.length) {
        for(var marker of DrawTool.markers){
           marker.remove();
        }
        //重置款选方法对应的点、线
        DrawTool.points = [];
        DrawTool.markers=[];
        DrawTool.lines .remove();
        DrawTool.tempLines.remove();
        DrawTool.tempPolygon.remove();
        DrawTool.polygon.remove();
      }
    }

以上就是常用到的离线地图的相关方法，好用请点赞哟~