前言

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

• leaflet api文件介紹，詳細介紹 leaflet 每個類的函式以及屬性等等
• leaflet 線上例子
• leaflet 外掛，leaflet 的外掛庫，非常有用

內容概覽

leaflet前端JS實現高德地圖POI興趣點批量分類下載
原始碼demo下載

• 效果圖如下：
  
  

具體實現思路：
1.高德開發平臺註冊賬號，控制檯建立應用，註冊web服務key，高德poi下載需要用到

2.前端JS直接ajax請求https高德poi興趣點介面，批量下載poi點資料

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

   var map = null; //地圖物件
   var packageName = '打包下載'; // 打包檔名稱
   var zip = new JSZip();
   var geojsonNameList = []; // geojson檔名稱列表
   var poiTypeList = []; //poi下載類別列表
   var geojsonList = []; // geojson檔案列表
   var filePath = null;
   var loading;
   var node = document.getElementById('map');
   var city = "";
   var offset = 20;
   var page = 1;
   // 開啟檔案按鈕點選事件
   $("input[type='file']").change(function () {
     var file = this.files[0];
     if (window.FileReader) {
   	// 判斷csv檔案編碼
   	var reader = new FileReader();
       reader.readAsText(file);
       //監聽檔案讀取結束後事件    
       reader.onloadend = function (e) {
   	  var content = e.target.result;
   	  var encodingRight = content.indexOf("�") === -1;
   	  if (encodingRight) {
   		//console.log("編碼UTF-8格式檔案");
   		readerFile(file,"text/plain;charset=utf8");
   	  } else {
   		//console.log("編碼格式錯誤，請上傳UTF-8格式檔案");
   		readerFile(file,"text/plain;charset=gb2312");
   	  }
       };
     }
   });
   // 匯出興趣點點選事件
   $("#mapexport_btn").click(function () {
     city = document.getElementById('city').value.replace(/ /g,'');
     if(city.length === 0){
        Qmsg.warning('<i style="color:red">下載區域必填項</i>', {
   		  html: true
   	 });
        return;
     }
     geojsonList = []; // geojson檔案列表
     goDownloadGeojsonFile();
   });
   // 地圖初始化
   initMap();
   
   function readerFile(file,encode){
   	var readerfile = new FileReader();
   	readerfile.readAsDataURL(file);
   	//監聽檔案讀取結束後事件    
   	readerfile.onloadend = function (e) {
   	  filePath = e.target.result;
   	  //console.log('檔案路徑:' + e.target.result);
   	  // 讀取檔案資料處理中……
   	  loading = Qmsg.loading("讀取檔案資料處理中……");
   	  openFile(encode);
   	};	
   }
  
   // 地圖初始化載入
   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(encode) {
     var result = [];
     var xhr = new XMLHttpRequest();
     xhr.open("GET", filePath, false);
     xhr.overrideMimeType(encode);
     xhr.onload = function (e) {
       if (xhr.readyState === 4) {
         if (xhr.status === 200) {
   	    var isUtf8 = encode.indexOf("utf8") !== -1;
   		if(isUtf8){
   		  result = csvJSONutf8(xhr.responseText);
   		}
   		else{
   		  result = csvJSONgb2312(xhr.responseText);
   		}
           //console.log(result);
           loadDataFromCSV(result);
         } else {
           console.error(xhr.statusText);
           Qmsg.warning('<i style="color:red">讀取CSV或者txt檔案報錯異常</i>', {
             html: true
           });
           loading.close();
         }
       }
     };
     xhr.send(null);
   }
   // 資料預處理，批量轉換座標點
   function loadDataFromCSV(dataList) {
   	poiTypeList = []; //poi下載類別列表
   	geojsonNameList = [];
   	for (var i = 0; i < dataList.length; i++) {
   		var data = dataList[i];
   		if(data.length !== 0){
               geojsonNameList.push(data);
   			var obj = {
   			   "types":data
   			}
   		    poiTypeList.push(obj);
   		}
   	}
   	console.log(poiTypeList);
   	// 處理完成
   	Qmsg.info('<i style="color:red">資料預處理完成</i>', { html: true });
   	loading.close();
   }
   // csv資料來源轉換json格式資料來源-utf8
   function csvJSONutf8(csv) {
     var lines = csv.split("\n");
     var result = [];
     for (var i = 0; i < lines.length; i++) {
   	var currentline = lines[i];
   	currentline = currentline.replace('\"', '').replace('\r', '').replace('\"', '');
       result.push(currentline);
     }
     return result;
   }
   // csv資料來源轉換json格式資料來源-gb2312
   function csvJSONgb2312(csv) {
     var lines = csv.split("\n");
     var result = [];
     for (var i = 0; i < lines.length; i++) {
   	var currentline = lines[i];
   	currentline = currentline.replace('\"', '').replace('\r', '').replace('\"', '');
   	result.push(currentline);
     }
     return result;
   }
  
   // 批量下載poi點geojson檔案
   …………
   
  

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