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

news2024/12/24 0:49:14

前言

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文件
     …………

完整内容点击跳转到小专栏文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2217367.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

小猿口算炸鱼脚本

目录 写在前面&#xff1a; 一、关于小猿口算&#xff1a; 二、代码逻辑 1.数字识别 2.答题部分 三、代码分享&#xff1a; 补充&#xff1a;软件包下载 写在前面&#xff1a; 最近小猿口算已经被不少大学生攻占&#xff0c;小学生直呼有挂。原本是以为大学生都打着本…

【Python爬虫】看电影还在用VIP?一个python代码让你实现电影自由!附源码

今日主题 如何用Python解析vip电影。 什么是vip电影&#xff1f; 这些vip电影啊&#xff0c;想要观看的话&#xff0c;必须充值会员&#xff0c;否则没法看。 比如这个&#xff1a; 这些vip电影解析后呢&#xff1f; 不需要会员&#xff0c;不需要登录&#xff0c;可以直接…

Java-类与对象

一、面向对象 在了解类与对象前&#xff0c;我们需要先知道"面向对象"这个词的概念&#xff1a; 在Java语言中&#xff0c;我们的主要思想就是"面向对象"&#xff0c;而在之前我们所学习的C语言中大部分时候的思想是"面向过程"。 那么什么是&…

MySQL-10.DML-添加数据insert

一.DML(INSERT) -- DDL&#xff1a;数据操作语言 -- DML&#xff1a;插入数据 - insert -- 1.为tb_emp表的username&#xff0c;name&#xff0c;gender字段插入值 insert into tb_emp (username,name,gender) values (wuji,无忌,1); -- 这样会报错&#xff0c;因为create_ti…

DS堆的实际应用(10)

文章目录 前言一、堆排序建堆排序 二、TopK问题原理实战创建一个有一万个数的文件读取文件并将前k个数据创建小堆用剩余的N-K个元素依次与堆顶元素来比较将前k个数据打印出来并关闭文件 测试 三、堆的相关习题总结 前言 学完了堆这个数据结构的概念和特性后&#xff0c;我们来看…

限时设计ui

ctrl-------放大缩小 空格-----画面移动 alt------复制 页面<画板<图层 添加交互事件 原型 点击蓝色的圆&#xff0c;从1跳转到2 点击绿色的圆&#xff0c;从2跳转到1

基于SSM+Vue+MySQL的健身房管理系统

系统展示 系统背景 随着人们生活水平的提高和健康意识的增强&#xff0c;越来越多的人选择去健身房锻炼。传统的健身房管理方式往往依赖于纸质记录和人工操作&#xff0c;这种方式不仅效率低下&#xff0c;而且容易出错。为了提高健身房的管理效率和服务质量&#xff0c;开发一…

python项目实战——下载美女图片

python项目实战——下载美女图片 文章目录 python项目实战——下载美女图片完整代码思路整理实现过程使用xpath语法找图片的链接检查链接是否正确下载图片创建文件夹获取一组图片的链接获取页数 获取目录页的链接 完善代码注意事项 完整代码 import requests import re import…

图文检索综述(2):Deep Multimodal Data Fusion

Deep Multimodal Data Fusion 摘要1 引言2 基于编码器-解码器融合2.1 数据级别融合2.2 分层特征融合2.3 决策级别融合 3 基于注意力融合3.1 模态内的自注意力3.2 模态间的交叉注意力3.3 基于transformer的方法 4 基于图神经网络融合4.1 单个模态的表示学习4.2 融合数据的表示学…

【数据结构】宜宾大学-计院-实验三

线性表的应用——实现两多项式的相加 课前准备&#xff1a;实验学时&#xff1a;2实验目的&#xff1a;实验内容&#xff1a;实验结果&#xff1a;实验报告:&#xff08;及时撰写实验报告&#xff09;实验测试结果&#xff1a;代码实现&#xff1a;&#xff08;C/C&#xff09;…

Java 小游戏《超级马里奥》

文章目录 一、效果展示二、代码编写1. 素材准备2. 创建窗口类3. 创建常量类4. 创建动作类5. 创建关卡类6. 创建障碍物类7. 创建马里奥类8. 编写程序入口 一、效果展示 二、代码编写 1. 素材准备 首先创建一个基本的 java 项目&#xff0c;并将本游戏需要用到的图片素材 image…

华为 HCIP-Datacom H12-821 题库 (38)

&#x1f423;博客最下方微信公众号回复题库,领取题库和教学资源 &#x1f424;诚挚欢迎IT交流有兴趣的公众号回复交流群 &#x1f998;公众号会持续更新网络小知识&#x1f63c; 1.请对 2001:0DB8:0000:C030:0000:0000:09A0:CDEF 地址进行压缩。&#xff08; &#xff09;&…

阻塞I/O与非阻塞I/O

目录 一、基本概念 二、阻塞I/O的实现机制 —— 等待队列 一、基本概念 阻塞&#xff1a;在执行单元进行操作时&#xff0c;如果不能获得申请的资源&#xff0c;则执行单元挂起直至资源可用后再进行操作。 非阻塞&#xff1a;在执行单元进行操作时&#xff0c;如果不能获得申…

UDP反射放大攻击防范手册

UDP反射放大攻击是一种极具破坏力的恶意攻击手段。 一、UDP反射放大攻击的原理 UDP反射放大攻击主要利用了UDP协议的特性。攻击者会向互联网上大量的开放UDP服务的服务器发送伪造的请求数据包。这些请求数据包的源IP地址被篡改为目标受害者的IP地址。当服务器收到这些请求后&…

爬虫实战(黑马论坛)

1.定位爬取位置内容&#xff1a; # -*- coding: utf-8 -*- import requests import time import re# 请求的 URL 和头信息 url https://bbs.itheima.com/forum-425-1.html headers {user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like…

DBSwitch和Seatunel

一、DBSwitch 什么是DBSwitch?它主要用在什么场景&#xff1f; 通过步骤分析可以看到这个是通过配置数据源&#xff0c;采用一次性或定时方案&#xff0c;同步到数据仓库的指定表&#xff0c;并且指定映射关系的工具。有点类似于flinkcdc的增量同步。 参考&#xff1a; dbs…

【实战案例】SpringBoot项目中异常处理通用解决方案

项目中经常会出现一些异常&#xff0c;比如在新增项目的时候必要的字段没有填写。在springboot项目中&#xff0c;遇到异常会往上抛出给调用方&#xff0c;DAO层遇到异常抛给Service层&#xff0c;Service层遇到异常抛给Controller层&#xff0c;Controller层遇到异常就抛给了S…

Qt-系统网络HTTP客户端(66)

目录 描述 相关函数 使用 准备工作 处理响应 测试 代码 补充 描述 进⾏ Qt 开发时, 和服务器之间的通信很多时候也会⽤到 HTTP 协议 Qt 中提供了客户端&#xff0c;但是并没有提供相应的服务器的库&#xff0c;所以这里我们只讨论 客户端 • 通过 HTTP 从服务器获取…

Unity 2d UI 实时跟随场景3d物体

2d UI 实时跟随场景3d物体位置&#xff0c;显示 3d 物体头顶信息&#xff0c;看起来像是场景中的3dUI&#xff0c;实质是2d UIusing System.Collections; using System.Collections.Generic; using UnityEngine; using DG.Tweening; using UnityEngine.UI; /// <summary>…

RequestBody接收参数报错com.fasterxml.jackson.databind.exc.MismatchedInputException

目录&#xff1a; 1、错误现象2、解决办法3、最终验证 1、错误现象 报错的现象和代码如下&#xff1a; 2、解决办法 查了很多都说参数类型对不上&#xff0c;但是明明是对上的&#xff0c;没有问题&#xff0c;最后只有换接收方式后验证是可以的&#xff1b;最终想了一下&…