目录

前言

一、天地图在线检索

1、在线检索功能

2、再谈后后接口

二、Leaflet多层级实现实例

1、层级调用实现原理

2、Leaflet中多层级调用

3、成果展示

三、总结

前言

        “地图是世界的索引，而地名则是索引中的索引。”当互联网地图进入 Web 2.0 时代，开发者不再满足于“看得见”的瓦片，更希望“问得准”——输入一个模糊的地名，就能在毫秒之间锁定它在全球、全国、省市、区县乃至乡镇的多级位置。天地图作为国家地理信息公共服务平台的官方出口，提供了完全符合国标的行政区划与兴趣点（POI）检索能力；而轻量级的 Leaflet 则在前端以极简的 API 哲学，让地图可视化回归“纯粹的快乐”。当两者相遇，我们便有了“用 200 行代码完成一个国家级别地名搜索引擎”的可能。本文所记录的，正是这样一次“小而美”的实战：如何以 Leaflet 为壳、天地图为芯，逐级剖开中国行政体系的“套娃式”结构，把“模糊输入–多级联想–精准定位”做成一套可复用的前端组件。在WebGIS的可视化效果中，在省级节点中展示统计数量，随着地图的深入逐级进行细化，将地名逐渐呈现在大家的面前。

        在之前的博客中曾经对如何调用天地图的检索API进行了详细的介绍。但是如何进行详细层级展示没有进行详细的说明，因此有朋友留言表示希望可以对层级展示进行一个具体的说明。本文即在此背景下产生。

        阅读全文并运行示例后，你将掌握：

  1. 如何正确调用天地图全部检索接口；

  2. 如何为 Leaflet 编写一个“可复用”的入口，支持调用天地图的地名检索接口；

  3. 如何在Javascript中处理层级展示问题；

  4. 如何实现下钻的行政区检索。

一、天地图在线检索

        本节将详细的介绍天地图的在线检索功能，分别介绍天地图的搜索功能和后端接口。通过参考学习天地图的地图展现形式，为我们后面的技术和页面实现提供参考。

1、在线检索功能

        为了展示天地图的多层级展示功能，首先我们来看一下其官方网站的实例。大家可以访问天地图后，点击“在线”地图的tab标签页，从而跳转到在线地图，如下图所示：

         在其页面的左上角就有一个输入框，在这个输入框中输入相应的信息就可以完成信息的检索。比如在输入框中输入“自然”，点击检索，在界面上就可以看到以下的展示：

        可以看到包含了自然的地名最多的省级行政区划是浙江省，共有599616条记录。第二名是广东省，约有3307条记录，第三名是江苏省，大约有2842条记录。

2、再谈后后接口

        为了照顾第一次看博文的朋友，这里将天地图的检索接口API给大家详细的介绍一下，让大家了解后台的数据接口和服务，在下一节的多层级调用展示过程实现提供技术基础。

        输入参数说明

参数值参数说明参数类型是否必备备注（值域）
keyWord搜索的关键字String必填无
specify指定行政区的国标码（行政区划编码表）严格按照行政区划编码表中的（名称，gb码）String必填下载行政区划编码表。9位国标码，如：北京：156110000或北京。
queryType服务查询类型参数String必填12：行政区划区域搜索服务。
start返回结果起始位（用于分页和缓存）默认0String必填0-300，表示返回结果的起始位置。
count返回的结果数量（用于分页和缓存）String必填1-300，返回结果的条数。
dataTypes数据分类（分类编码表）String可选下载分类编码表，参数可以分类名称或分类编码。多个分类用","隔开(英文逗号)。
show返回poi结果信息类别String可选取值为1，则返回基本poi信息； 取值为2，则返回详细poi信息

        返回参数说明

参数值参数说明参数类型返回条件备注（值域）
resultType返回结果类型Int必返回取值1-5，对应不同的响应类型： 1（普通POI），2（统计），3（行政区)，4（建议词搜索），5（线路结果）
count返回总条数Int必返回
keyword搜索关键词String必返回搜索的关键字。
pois针对点（类型1）集合返回Pois Json数组resultType=1
namePoi点名称String必返回
phone电话String
address地址String
lonlat坐标String必返回坐标 x，y
poiTypepoi类型Int必返回101:POI数据 102:公交站点
eaddress英文地址String
enamepoi点英文名称String
hotPointIDpoi热点IDString必返回热点id
province所属省名称String
provinceCode省行政区编码String
city所属城市名称String
cityCode市行政区编码String
county所属区县名称String
countyCode区县行政区编码String
source数据信息来源String必返回
typeCode分类编码String
typeName分类名称String
stationData车站信息结构体 数据Json 数组poiType=102
lineName线路名称String必返回
uuid线路的idString必返回
stationUuid公交站uuidString必返回
statistics针对统计（类型2）集合返回Json 数组resultType=2
count本次统计POI总数量Int必返回
adminCount行政区数量Int必返回
priorityCitys推荐行政区名称Json数组必返回
name行政区名称String必返回
count城市数量Int必返回
lonlat行政区经纬度String必返回坐标 x，y
ename英文行政名称String必返回
adminCode城市国标码Int必返回9位国标码。
allAdmins各省包含信息集合Json数组必返回
name行政名称String必返回
count包含数量Int必返回
lonlat行政区经纬度String必返回坐标x,y
adminCode省国标码String必返回
ename英文行政名称String必返回
isleaf有无下一级行政区boolean必返回有则false，无则true

        在官网的调用示例中，使用浏览器的调试工具来看一下数据返回的结果：

         请特别注意以上的接口返回值，这里取其中的一个值对象信息如下：

{"adminName": "浙江省","ename": "Zhejiang Province","count": 599616,"adminCode": 156330000,"isleaf": false,"lonlat": "120.06772699999999,29.174674999999997"
}

        这里返回的adminCode参数非常重要，在后面的层级调用中其实就是依赖这个adminCode来进行多层级实现的。

二、Leaflet多层级实现实例

        本节将具体详述如何使用Leaflet来调用天地图的检索API和实现多层级调用，可以在Leafelt中实现我们自己的逻辑，可以展示省-市-POI详情等信息，最后给大家展示一些实际的效果。

1、层级调用实现原理

        关于如何实现层级调用，在前面一节中也进行了简单说明。其实就是一个递归的调用，在进行API调用时，首先需要判断返回的数据类型是什么？如果从接口中返回的类型是1表示是poi数据，直接展示即可，如果是2表示是展示统计数据，再从统计数据中获取所有的信息，循环统计信息中的行政区划信息，然后再递归调用其行政区划的编码实现向下检索。实现的核心代码展示如下：

/**
* 调用天地图查询
*/
function callTdtSearch(keyWord,specify){var queryUrl = "http://api.tianditu.gov.cn/v2/search?postStr={'keyWord':'"+ keyWord +"','queryType':12,'start':0,'count':10,'specify':'" + specify + "','show':'2'}&type=query&tk="+tdt_client_key;$.ajax({type: "get",url:queryUrl,data: {},success: function(rsData) {// 移除所有图层myLayerGroup.clearLayers();var rsObj = rsData; var loc_info = rsObj.location;var resultType = rsObj.resultType;switch(resultType){case 1 :showPoi(rsObj);break;case 2:showStatistics(rsObj);break;default:console.log("不详");}map.addLayer(myLayerGroup);	}});
}

2、Leaflet中多层级调用

        根据接口中返回的类型不一样来进行个性化的展示，以此达到区别展示的效果。这里重点介绍如何来进行统计信息的展示和如何调用下一层级的POI信息，核心方法如下：

//点击还可以进行查询
function buildStatHtml(stat,index){var html = "";html += "<div class='marsBlackPanel' style='background:#ff9800;' animation-spaceInDown>";html += "<div class='marsBlackPanel-text' style='' onclick='execQueryByCode("+stat.adminCode+")'>" + (index +1) + "、" +stat.adminName + "(" + stat.count + ")</div>";html += "</div>";return html;
}
function showStatistics(rsObj){var statistics = rsObj.statistics.allAdmins;for(var i = 0;i<statistics.length;i++){var stat = statistics[i];var lonlat = stat.lonlat;var lonlatStr = lonlat.split(",");var marker = L.marker([lonlatStr[1], lonlatStr[0]], {icon: L.divIcon({iconSize: null,className: '',popupAnchor:[5,5],shadowAnchor:[5,5],html: buildStatHtml(stat,i)})}).addTo(myLayerGroup);}map.fitBounds(myLayerGroup.getBounds());
}

        这里实现的关键就是在自定义的标注中，绑定了一个执行查询的方法，然后再这个执行方法中又可以进行下一个层级的调用。 关键的方法如下：

function execQueryByCode(specify){var keyWord = $("#address").val();callTdtSearch(keyWord,specify);
}

        这样就实现了层次的调用，当返回的值是具体的POI时，直接展示。反之则会进行省份的标注，同时可以点击当前省份，从而实现多层级的调用和展示。

3、成果展示

        下面结合一些实际的例子来展示一下成果，具体是如何来进行相关的实现的。

        在Web浏览器中输入请求地址，可以看到以上的界面效果。这样就基本模拟省份这个层级的统计展示。 需要说明的是，通过POI检索API的数据结果与官网的检索结果之前还是有一丢丢的区别，比如官网返回的结果是599616，而通过我们的接口调用，返回的结果是：596756；下面将结果整理一个表示，供大家参考，具体出现差异的原因可能需要咨询客服人员：

序号省份官方返回结果自主调用结果差额
1浙江省5996165967562860
2广东省33073103204
3江苏省28422519323
4江西省22711918353
5湖南省22301895335

        由此可以看出，搜索的结果还是存在一定的区别的。

        下面来看一个有意思的地方，包含舒服两个字的最多的省份是湖北省。

        而在湖北省中，武汉又是最多的，有41个地方包含舒服，

        来看看具体包含舒服的地名都在武汉的哪些地方，

         最后来看看天地图中包含火锅的最多的省份是哪里？

        可以看到，出现火锅最多的地方居然是江苏省，在大家的印象里，江浙应该都是甜口居多。而喜好火锅的云贵川桔田前三都挤不进去，第四名为重庆，第六名四川。前三中，除江苏外，第二名是山东省，第三名是河南省，有没有出乎你的意料呢？

        在江苏省中，苏州市的火锅又是地第一名的，有2028个， 如下：

        确实基本上都是火锅了，这个确实没有想到，大苏州的火锅居然这么多。 

三、总结

        以上就是本文的主要内容，本文所记录的，正是这样一次“小而美”的实战：如何以 Leaflet 为壳、天地图为芯，逐级剖开中国行政体系的“套娃式”结构，把“模糊输入–多级联想–精准定位”做成一套可复用的前端组件。在WebGIS的可视化效果中，在省级节点中展示统计数量，随着地图的深入逐级进行细化，将地名逐渐呈现在大家的面前。本文不仅详细的介绍了如何在Leaflet中进行层级展示的实现，并且基于实际的地名进行了实际的检索展示，如果大家感兴趣，不妨来这里看看。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/88743.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/88743.shtml
英文地址，请注明出处：http://en.pswp.cn/web/88743.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于Prompt结构的语校解析：3H日本语学校信息建模实录（4/500）

基于Prompt结构的语校解析：3H日本语学校信息建模实录（4/500）

基于Prompt结构的语校解析&#xff1a;3H日本语学校信息建模实录&#xff08;4/500&#xff09; 系列延续&#xff1a;500所日本语言学校结构数据工程 关键词&#xff1a;招生结构、JLPTEJU、国籍比例、认定校、Prompt训练集 一、我们在构建什么样的语言学校语料&#xff1f; …
阅读更多...
Leaflet面试题及答案（61-80）

Leaflet面试题及答案（61-80）

查看本专栏目录 文章目录 🟢 面试问题及答案（61-80）61. 如何在地图上显示一个动态更新的图层？62. 如何实现地图上的热力图（Heatmap）？63. 如何自定义地图控件的位置？64. 如何处理地图加载失败的情况？65. 如何实现地图的离线功能？66. 如何将地图导出为图片？67. 如何实…
阅读更多...
MIG_IP核的时钟系统

MIG_IP核的时钟系统

MIG_IP核的时钟系统时钟的种类和配置时钟的种类和配置 整体框图 DDR_PHY_CLK&#xff1a;DDR3的工作频率&#xff0c;用来得到想要的线速率。假设此时钟为800M&#xff0c;那么DDR双沿采样&#xff0c;线速率为1600Mbit&#xff1b; UI_CLK&#xff1a;DDR_PHY_CLK的四分之一…
阅读更多...
若依框架集成阿里云OSS实现文件上传优化

若依框架集成阿里云OSS实现文件上传优化

背景介绍 在若依框架目前的实现中&#xff0c;是把图片存储到了服务器本地的目录&#xff0c;通过服务进行访问&#xff0c;这样做存储的是比较省事&#xff0c;但是缺点也有很多&#xff1a; 硬件与网络要求&#xff1a;服务器通常需要高性能的硬件和稳定的网络环境&#xff0…
阅读更多...
Mac如何连接惠普M126a打印机（教程篇）

Mac如何连接惠普M126a打印机（教程篇）

这里写自定义目录标题Mac如何连接惠普M126a打印机&#xff08;教程篇&#xff09;教程配置如下&#xff1a;Mac如何连接惠普M126a打印机&#xff08;教程篇&#xff09; 惠普M126a连接Mac&#xff08;教程篇&#xff09; 教程配置如下&#xff1a; 首先&#xff0c;先获取与HP打…
阅读更多...
感恩日记：记录生活中的美好时刻

感恩日记：记录生活中的美好时刻

感恩日记的landing page登录注册填写感恩事项私信可以体验一下
阅读更多...
一扇门铃，万向感应——用 eventfd 实现零延迟通信

一扇门铃，万向感应——用 eventfd 实现零延迟通信

&#x1f50d; 本篇概要 eventfd 是 Linux 提供的一种轻量级事件通知机制。你可以把它想象成一个“计数器盒子”。它里面维护的是一个64位的计数器。写入&#xff1a;往盒子里放一些数字&#xff08;比如 1、5、10&#xff09;&#xff0c;表示有几件事发生了。读取&#xff1a…
阅读更多...
基于Node.js的线上教学系统的设计与实现（源码+论文+调试+安装+售后）

基于Node.js的线上教学系统的设计与实现（源码+论文+调试+安装+售后）

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。系统背景近年来&#xff0c;全球数字化浪潮的推进与教育公平化需求的增长&#xff0c;促使线上教学迎…
阅读更多...
互斥锁详解（操作系统os）

互斥锁详解（操作系统os）

1. 互斥锁 (Mutex) - 档案室的“智能锁”首先&#xff0c;我们给之前讨论的那些“锁”一个正式的名字&#xff1a;互斥锁 (Mutex)。概念&#xff1a;你可以把它简单理解成档案室门上的一把“智能锁”。它只有两种状态&#xff1a;locked (已上锁) 或 unlocked (未上锁)。操作&a…
阅读更多...
自动润滑系统：从 “盲目养护“ 到智能精注的工业运维革命

自动润滑系统：从 “盲目养护“ 到智能精注的工业运维革命

​在工业运维的漫长历史中&#xff0c;传统润滑模式如同"定时喂饭"——无论设备实际需求&#xff0c;仅凭经验或固定周期执行润滑作业。这种模式埋下两大隐患&#xff1a;过度润滑&#xff1a;某汽车生产线曾因季度性强制润滑&#xff0c;每年浪费1.2吨润滑脂&#x…
阅读更多...
【Java八股文总结 — 包学会】(二）计算机网络

【Java八股文总结 — 包学会】(二）计算机网络

1.一条url输入到浏览器最后显示页面的过程 URL解析与处理 浏览器解析URL&#xff08;如https://www.example.com/page&#xff09; 分离协议&#xff08;https&#xff09;、域名&#xff08;www.example.com&#xff09;和资源路径&#xff08;/page&#xff09; 检查HSTS预加…
阅读更多...
力扣61.旋转链表

力扣61.旋转链表

给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。示例 1&#xff1a;输入&#xff1a;head [1,2,3,4,5], k 2 输出&#xff1a;[4,5,1,2,3]示例 2&#xff1a;输入&#xff1a;head [0,1,2], k 4 输出&#xff1a;[2,0,1]提示…
阅读更多...
深度剖析：std::vector 内存机制与 push_back 扩容策略

深度剖析：std::vector 内存机制与 push_back 扩容策略

深度剖析&#xff1a;std::vector 内存机制与 push_back 扩容策略 1. std::vector 核心内部结构 #mermaid-svg-8HOj3MqsD6UVgEeA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8HOj3MqsD6UVgEeA .error-icon{fill:…
阅读更多...
GROW领导力模型

GROW领导力模型

GROW领导力模型是由英国教练格雷厄姆亚历山大&#xff08;Graham Alexander&#xff09;、艾伦Fine和约翰惠特默&#xff08;John Whitmore&#xff09;在20世纪80年代提出的&#xff0c;最初用于体育教练领域&#xff0c;后来被广泛应用于企业管理、领导力发展和个人成长中。它…
阅读更多...
打破并发瓶颈：虚拟线程实现详解与传统线程模型的性能对比

打破并发瓶颈：虚拟线程实现详解与传统线程模型的性能对比

目录 一、定义与特性 二、虚拟线程实现 2.1 使用 Thread.startVirtualThread() 创建 2.2 使用 Thread.ofVirtual() 创建 2.3 使用 ThreadFactory 创建 2.4 使用 Executors.newVirtualThreadPerTaskExecutor()创建 三、虚拟线程和普通线程的区别 3.1 线程管理方式不同 3…
阅读更多...
“28项评测23项SOTA——GLM-4.1V-9B-Thinking本地部署教程：10B级视觉语言模型的性能天花板！

“28项评测23项SOTA——GLM-4.1V-9B-Thinking本地部署教程：10B级视觉语言模型的性能天花板！

一、模型介绍 GLM-4.1V-9B-Thinking是由智谱AI联合清华大学团队推出的多模态大模型&#xff0c;以GLM-4-9B-0414基座模型为底&#xff0c;通过引入“思维链推理机制”和“课程采样强化学习策略”&#xff08;Reinforcement Learning with Curriculum Sampling&#xff09;&…
阅读更多...
推荐系统-Random算法

推荐系统-Random算法

Random算法总结引言 在推荐系统研究与应用中&#xff0c;我们常常需要一些简单的基线算法来衡量更复杂算法的性能提升。Random&#xff08;随机推荐&#xff09;算法是最基础的基线方法之一&#xff0c;它通过随机生成评分来模拟用户对物品的偏好。虽然这种方法看似简单&#x…
阅读更多...
Django--02模型和管理站点

Django--02模型和管理站点

Django–02模型与站点管理 Part 2: Models and the admin site 本教程承接Django–01的内容。我们将设置数据库、创建你的第一个模型&#xff0c;并快速了解 Django 自动生成的管理站点。 文章目录Django--02模型与站点管理前言一、设置数据库1.1 参考文档链接1.2 默认设置1.3…
阅读更多...
CS课程项目设计1：交互友好的井字棋游戏

CS课程项目设计1：交互友好的井字棋游戏

最近突然想开设一个专栏了&#xff0c;专门为计算机专业的同行分享一些入门级的课程项目设计&#xff0c;旨在让同学更好地了解CS项目的设计流程&#xff0c;同时给出代码来介绍coding过程。 今天要分享的是第一个CS课程项目&#xff1a;交互友好的井字棋游戏。 1. 研究目的 井…
阅读更多...
首个自动驾驶VLA综述介绍

首个自动驾驶VLA综述介绍

当视觉（Vision）、语言（Language）和行动（Action）三大能力在一个模型中融合，自动驾驶的未来将走向何方？ 近日，来自麦吉尔大学、清华大学、小米公司和威斯康辛麦迪逊的研究团队联合发布了全球首篇针对自动驾驶领域的视觉-语言-行动（Vision-Language-Action, VLA）模型的…
阅读更多...
最新文章

Copyright @ 2022~2023