leaflet前端JS实现高德地图POI兴趣点批量分类下载(附源码下载)

本文链接：https://blog.youkuaiyun.com/liguoweioo/article/details/146993058

前言

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文件
 async function goDownloadGeojsonFile(){
   if (poiTypeList.length === 0) {
     Qmsg.warning('<i style="color:red">获取CSV或者txt文件数据源异常</i>', {
       html: true
     });
     return;
   }
   // 下载poi处理中
   loading = Qmsg.loading("下载poi数据处理中……");
   await sleep(300);
   for (var i = 0; i < poiTypeList.length; i++) {
 		var data = poiTypeList[i];
 		geojsonList.push(await getDownloadGeojsonFile(data)); //await会阻塞当前异步函数的执行，等待promise返回处理结果
   }
   //console.log("geojsonList:"+JSON.stringify(geojsonList));
   if (geojsonList.length === poiTypeList.length && geojsonList.length > 0) {
 	// 构造geojson数据源
 	for (let k = 0; k < geojsonList.length; k++) {
 	   var geojsonData = geojsonList[k];
 	   //if(geojsonData.pois.length !== 0){
 	   	if(geojsonData.length !== 0){
 		  var geojson = {
 			  "type": "FeatureCollection",
 			  "features":[]
 		  }
 		  //for (let kk = 0; kk < geojsonData.pois.length; kk++) {
 		  	for (let kk = 0; kk < geojsonData.length; kk++) {
 			 // pname pcode cityname citycode adname adcode id location: "113.536376,22.787109" name type typecode tel address
 			 //var data = geojsonData.pois[kk];
 			 var data = geojsonData[kk];
 			 var coordinates = data.location.split(",");
 			 // 将GCJ02坐标转换为WGS84坐标
 		     var wgs84 = gcoord.transform([Number(coordinates[0]), Number(coordinates[1])], gcoord.GCJ02, gcoord.WGS84);
 			 var geojsonObj = {
 				"type": "Feature",
 				"geometry": {
 					"type": "Point",
 					"coordinates": wgs84
 				},
 				"properties": {
 					"pname": data.pname ? data.pname : "",
 					"cityname": data.cityname ? data.cityname : "",
 					"adname": data.adname ? data.adname : "",
 					"id": data.id ? data.id : "",
 					"name": data.name ? data.name : "",
 					"type": data.type ? data.type : "",
 					"typecode": data.typecode ? data.typecode : "",
 					"address": data.address ? data.address : "",
 					"tel": data.tel ? data.tel : "",
 					"lng": wgs84[0] ? wgs84[0] : "",
 					"lat": wgs84[1] ? wgs84[1] : ""							
 				}
 			}
 			geojson.features.push(geojsonObj);
 		  }
 		  //console.log("geojson:"+JSON.stringify(geojson));
 		  //压缩json文件
 		  zip.file(geojsonNameList[k] + '.json', JSON.stringify(geojson));
 	   }
 	}
 	zip.generateAsync({type:"blob"})
 		.then(function (blob) {
 			saveAs(blob, packageName + '.zip');
 	   // 清空zip缓存文件
 	  for (let kkk = 0; kkk < geojsonNameList.length; kkk++) {
 		zip.remove(geojsonNameList[kkk] + '.json');
 	  }
 	  loading.close();
 	  // 导出完成
 	  Qmsg.info('<i style="color:red">导出完成</i>', { html: true });
 	});
   }
   else{
 	  loading.close();
   }
 }
 
 // https请求下载poi点数据
 function getDownloadGeojsonFile(data) {
   offset = 20;
   page = 1;
   var pois = [];
   return new Promise((resolve, reject) => {
     $.ajax({
 	    //https://restapi.amap.com/v3/place/text?children=1&extensions=all&citylimit=true&key=自己申请高德web服务key&keywords=&offset=${offset}&page=${page}&types=${data.types}&city=${city}
 	    //http://localhost:8001/gaodeMapPoiApi&key=自己申请高德web服务key&keywords=&offset=${offset}&page=${page}&types=${data.types}&city=${city}
 		url: `${window.location.href}gaodeMapPoiApi&key=自己申请高德web服务key&keywords=&offset=${offset}&page=${page}&types=${data.types}&city=${city}`,
 		contentType: 'application/json',
 		dataType: 'text',
 		async: false, // 同步
 		success: function (result) {
 			var resObj = JSON.parse(result);
 			pois = resObj.pois;
 			var count = Number(resObj.count);
 			var num = Math.ceil(count/20.0);
 			for (var i = 1; i < num; i++) {
 			   page = page + 1;
 			   getAjaxFun(offset,page,data,function(data){
 			      pois.push.apply(pois,data);
 			   });
 			}
 			resolve(pois);
 		},
 		error: function (result) {
 		    reject([]);
 		}
     });
   });
 }
……