前言

leaflet 入門開發系列環境知識點了解：

• leaflet api檔案介紹，詳細介紹 leaflet 每個類的函式以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，非常有用

內容概覽

leaflet地圖截圖批量匯出
源代碼demo下載

效果圖如下：

具體實作思路：
打開csv檔案，讀取點資料源經緯度，回圈遍歷資料源，以經緯度為中心，構造1000*1000螢屏像素值的正方形范圍，批量截圖，最后壓碩訓出，

• 核心代碼，完整原始碼見尾部下載

   var map = null; //地圖物件
   var marker = null;
   var packageName = '打包下載'; // 打包檔案名稱
   var zip = new JSZip();
   var baseList = []; // base64格式圖片串列
   var imgNameList = []; // 圖片名稱串列
   var points = []; //經緯度點串列
   var filePath = null;
   var loading;
   // [113.6250387, 22.6713741], [113.64075074, 22.68880195], [113.53854455, 22.78899001], [113.52453318, 22.79709604]]; // 經緯度點串列
   var node = document.getElementById('map');
   // 打開檔案按鈕點擊事件
   $("input[type='file']").change(function () {
     var file = this.files[0];
     if (window.FileReader) {
       var reader = new FileReader();
       reader.readAsDataURL(file);
       //監聽檔案讀取結束后事件    
       reader.onloadend = function (e) {
         filePath = e.target.result;
         console.log('檔案路徑:' + e.target.result);
         // 讀取檔案資料處理中……
         loading = Qmsg.loading("讀取檔案資料處理中……");
         openFile();
       };
     }
   });
   // 匯出圖片按鈕點擊事件
   $("#mapexport_btn").click(function () {
     goScreenshotMap2Img();
   });
   // 地圖初始化
   initMap();
  
   // 地圖初始化加載
   function initMap() {
     map = L.map('map');
     L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', { subdomains: ["1", "2", "3", "4"], crossOrigin: true }).addTo(map);
     map.setView([22.83883628, 113.50329857], 16);  //設定縮放級別及中心點
   }
   // 打開檔案讀取資料函式
   function openFile() {
     var result = [];
     var xhr = new XMLHttpRequest();
     xhr.open("GET", filePath, false);
     xhr.onload = function (e) {
       if (xhr.readyState === 4) {
         if (xhr.status === 200) {
           result = csvJSON(xhr.responseText);
           console.log(result);
           loadDataFromCSV(result);
         } else {
           console.error(xhr.statusText);
           Qmsg.warning('<i style="color:red">讀取CSV檔案報錯例外</i>', {
             html: true
           });
           loading.close();
         }
       }
     };
     xhr.send(null);
   }
   // 資料預處理，批量轉換坐標點
   function loadDataFromCSV(dataList) {
     for (var i = 0; i < dataList.length; i++) {
       var data = https://www.cnblogs.com/giserhome/p/dataList[i];
       var name = data['名稱'];
       if (name) {
         imgNameList.push(name);
       }
       var lat = data['緯度'];
       var lng = data['經度'];
       if (lat && lng) {
         lat = Number(data['緯度'].replace(/\s*/g, ""));
         lng = Number(data['經度'].replace(/\s*/g, ""));
         // 將WGS84坐標轉換為GCJ02坐標
         var gcj02 = gcoord.transform([lng, lat], gcoord.WGS84, gcoord.GCJ02);
         points.push(gcj02);
       }
     }
     // 處理完成
     Qmsg.info('<i style="color:red">資料預處理完成</i>', { html: true });
     loading.close();
   }
   // csv資料源轉換json格式資料源
   function csvJSON(csv) {
     var lines = csv.split("\n");
     var result = [];
     // var headers = lines[0].split(",");
     var headers = lines[0].split("\t");
     for (var k = 0; k < headers.length; k++) {
       headers[k] = headers[k].replace('\"', '').replace('\r', '').replace('\"', '')
     }
     for (var i = 1; i < lines.length; i++) {
       var obj = {};
       // var currentline = lines[i].split(",");
       var currentline = lines[i].split("\t");
       for (var n = 0; n < currentline.length; n++) {
         currentline[n] = currentline[n].replace('\"', '').replace('\r', '').replace('\"', '')
       }
       for (var j = 0; j < headers.length; j++) {
         obj[headers[j]] = currentline[j];
       }
       result.push(obj);
     }
     return result;
   }
   // 批量匯出圖片
   async function goScreenshotMap2Img() {
     if (points.length === 0) {
       Qmsg.warning('<i style="color:red">獲取不到CSV檔案采集點經緯度資料源,匯出圖片例外</i>', {
         html: true
       });
       return;
     }
     // 匯出圖片處理中
     loading = Qmsg.loading("匯出圖片處理中……");
     for (var i = 0; i < points.length; i++) {
       var point = points[i];
       var latlng = L.latLng(point[1], point[0]);
       if (marker) {
         marker.remove();
         marker = null;
       }
       marker = L.marker(latlng).addTo(map);
       map.setView(latlng, 16);  //設定縮放級別及中心點
       baseList.push(await screenshotMap2Img(latlng)); //await會阻塞當前異步函式的執行，等待promise回傳處理結果
     }
     if (baseList.length === points.length && baseList.length > 0) {
       for (let k = 0; k < baseList.length; k++) {
         zip.file(imgNameList[k] + '.png', baseList[k], { base64: true })
       }
       zip.generateAsync({ type: 'blob' }).then(function (content) {
         saveAs(content, packageName + '.zip');
         loading.close();
         // 匯出完成
         Qmsg.info('<i style="color:red">匯出完成</i>', { html: true });
       });
     }
   }
   // 截屏圖片函式
   ……
  

完整內容點擊跳轉到小專欄文章

標籤：GIS

上一篇：影像傳遞有什么問題

下一篇：SAP ABAP MDG相關事務碼 --摘錄