leaflet前端JS实现高德地图POI兴趣点批量分类下载(附源码下载)
前言leaflet 入门开发系列环境知识点了解：
[*]leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等
[*]leaflet 在线例子
[*]leaflet 插件，leaflet 的插件库，非常有用
内容概览
leaflet前端JS实现高德地图POI兴趣点批量分类下载
源代码demo下载
[*]效果图如下：
https://images.xiaozhuanlan.com/photo/2022/31a83c26e40245e8ccc54502de80be07.png
https://images.xiaozhuanlan.com/photo/2022/448565ec1941d289d19db2f7a375391d.png
具体实现思路：
1.高德开发平台注册账号，控制台创建应用，注册web服务key，高德poi下载需要用到
https://images.xiaozhuanlan.com/photo/2022/e33e828ddd0a65ca72890b10a0e82de3.png
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").change(function () {
var file = this.files;
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 >下载区域必填项</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(, 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 >读取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;
if(data.length !== 0){
geojsonNameList.push(data);
var obj = {
"types":data
}
poiTypeList.push(obj);
}
}
console.log(poiTypeList);
// 处理完成
Qmsg.info('<i >数据预处理完成</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;
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;
currentline = currentline.replace('\"', '').replace('\r', '').replace('\"', '');
result.push(currentline);
}
return result;
}
// 批量下载poi点geojson文件
…………
完整内容点击跳转到小专栏文章
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]