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

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