基于 Bing Map 和 Leaflet 实现地理位置解析并投图

1. 项目需求

给定一组地点的英文名称，将其解析为经纬度坐标值并在地图中展示。

2. 项目实现

2.1. 地点名称的解析

结构化地址和经纬度之间的相互转化，即被称为 geocode 功能。常见的解决方案有：

• 调用地图服务商的API请求

  高德地图、百度地图等国内地图服务商：只支持国内地址

  Google Map：脑测效果最好，但是免费额度有限，且需要用支持外币的信用卡申请，遂弃

  Open Cage 等：免费，然而单日访问上限约千次，访问频率受限，不好用

  Bing Map:微软家地图API，总免费上限12W次，几乎无访问频率限制，好申请

• 利用开源地图资源自己搭建服务器

  如 OpenStreetMap 数据的提供商 Nominatim，可以下载该数据库并搭建自己的解析服务器，安装指南见 https://www.nominatim.org/release-docs/latest/admin/Installation/， 但是数据库存储空间需求大，外网内容难以下载，搭建步骤较繁琐。

选定直接调用 Bing Map 的地理解析API。

基本的 GET 请求 URL 为 ‘http://dev.virtualearth.net/REST/v1/Locations/’ + query + ‘?include=queryParse&maxRes=1&key=’ + key

其中 query 为待解析地址名称，key 为API 颁发的访问密钥。

具体API使用指南见官方文档（https://docs.microsoft.com/en-us/bingmaps/rest-services/locations/find-a-location-by-query），此处 maxRes 置 1 只返回一个最接近的结果。

2.2. 地图显示

使用 Js 库 Leaflet 绘制地图并标记坐标点，API 文档见https://leafletjs.com/reference-1.7.1.html 。

地图的初始化函数如下所示：

initMap() {
    let map = L.map("map", {
        minZoom: 3,
        maxZoom: 14,
        center: [39.550339, 116.114129],
        zoom: 12,
        zoomControl: true,
        attributionControl: false,
        crs: L.CRS.EPSG3857
    });

    L.tileLayer(
        "https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGFtb25jaGVubG0iLCJhIjoiY2txYTlkb2N0MDZjcTJ1azF2cWwzY2NzdiJ9.AlODK2ThtyQjKfMRc6XwBA"
    ).addTo(map);
    this.map = map;　　　　//data上需要挂载
},

坐标点标记的实现：

//设置地图
self.map.setView(new L.LatLng(result[0].lat, result[0].lon), 8);
L.marker([result[0].lat, result[0].lon]).addTo(self.map);
self.mapVisible = true;

坐标点的标记需要通过 SetTImeOut() 设定时间间隔，否则地图显示可能出错。

2.3. 可视化界面实现

任务被开发为纯前端 Web 项目，使用的库包括：

• Vue 前端 JS 框架
• ElementUI 组件库
• Leaflet 地图绘制库
• PapaParse CSV 文件解析库

最后的显示效果：

3. 存在的问题

3.1. 关于地图显示

点击 show in map 后首次显示的地图只有一小块范围，其他部分为灰色，需要改变窗口大小手动触发重新渲染函数，后正常显示。目前未找到解决方法。

3.2. 关于地址解析结果的准确性

地址解析结果的准确程度受多种因素影响，主要因素是输入地址的正确性，首先输入得是一个真实存在的地理位置，另外需要避免出现特殊符号影响 URL 地址的形成。

作为全球性的地图数据库，Bing Map对部分拼音构成的国内地理名称不够敏感，如 Zhoukoudian 等无法识别，或是和为其他地区的部分名称相匹配。

本次测试输入的CSV文件包含 4000+ 地址， 约有 92% 的地址返回了结果，但是这并不意味着解析的准确性为 92%，因为返回的结果可能和输入的匹配程度很低（匹配程度被分为四个层次在调用 API后随结果返回作为参照）

3.3. 关于解析的效率

输入的CSV文件需要满足格式要求才能被正确解析。虽然微软对 API 请求的速率没有做明文限制，但是从实践来看，目前的解析速度约为 0.8 - 1.5s / 个。

作为免费版的 API ，发送的请求可能返回空值错误，需要重新发送请求。~~受限于本人拙劣的前端开发能力，~~在实现异步请求时遇到了很多困难，最终通过 async/wait 和 Promise 函数勉强实现了对一组地址的轮询请求，发现自己在异步请求方面掌握的很差，需要进一步学习以改良目前项目一个请求死等收到结果才进行下一个请求的现状。

附件

github