关于vue.js:leafletjs-实现离线地图

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

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

场景：在前端需要里实现以上地图相干性能时，咱们经常能够应用百度地图、高德地图、谷歌地图、天地图等相干在线地图服务及 api 疾速实现地图相干性能。
然而对于有些客户是政务零碎，只能应用内网不能提供外网的时候，以上地图服务就不能应用了，这个时候就须要用到离线地图服务。

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

初始化地图

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();}
    }

以上就是罕用到的离线地图的相干办法，好用请点赞哟~

leaflet.js 的应用