本文次要介绍如何在 OpenStreetMap 上获取 AOI 数据，点到为止 🤏。原文可参考我的公众号文章《不写一行代码在 OSM 上获取地点的轮廓数据》
有时候业务上须要在地图上展现 AOI（趣味面）数据，每一个 AOI 对应的是一个不规则的关闭区域，由一组坐标示意，比方小区轮廓。国内的百度和高德地图都没有提供相应办法来获取这类数据（谈业务单干的话是有的），一般开发者根本拿不到。不过没关系，国外有一个 OSM 网站，在那里能够查问到指定类型的轮廓数据。
OSM 介绍
“OpenStreetMap 是一个由地图制作爱好者组成的社区。这些爱好者提供并保护世界各地对于路线、大道、咖啡馆、铁路车站等各种各样的数据。”
编辑地图数据
拜访网站 openstreetmap 反对【点、线、面】的形式在卫星地图上编辑地图。
查看地图数据
还是 openstreetmap 网站，搜寻某一个地点，如果存在，则会在地图上展现它的轮廓，比方这里搜寻“世纪公园”：
如图展现了该地点的具体数据，包含是哪个用户在时候编辑的。
获取地图数据
拜访网站 overpass-turbo 应用 Overpass 查询语言（Overpass QL）构建查问想要的数据，如：获取“上海市所有的小区”
// @name 上海市所有小区
/*
This has been generated by the overpass-turbo wizard.
The original search was:“residential=apartment in Shanghai”*/
[out:json][timeout:25];
// fetch area“Shanghai”to search in
{{geocodeArea:Shanghai}}->.searchArea;
// gather results
nwr["landuse"="residential"](area.searchArea);
// print results
out geom;查问语句能够交给 ChatGPT。点击“运行”按钮
如果查问到数据，能够点击右上角的“地图”按钮，而后点击地图工具里的放大镜：“缩放到数据”，就能够在地图上显示刚刚查问的后果了。
放大地图，展现小区的轮廓：
最初能够把数据导出，反对 JSON、GPX、KML，以及图片格式。
另外，也能够间接申请接口查问：
const axios = require('axios');
// 构建 Overpass 查问
const overpass_query = `
[out:json];
area[name="上海市"]->.a;
(node["shop"="mall"](area.a); way["shop"="mall"](area.a); relation["shop"="mall"](area.a););
out body;
>;
out skel qt;
`;
// Overpass API 端点
const overpass_url = "https://overpass-api.de/api/interpreter";
// 发送 Overpass 查问申请
axios.post(overpass_url, overpass_query)
.then(response => {
const data = response.data;
console.log('data:', data);
})
.catch(error => {console.error('Error:', error);
});须要留神的是，数据量太大会导致查问申请报错停止，这时候能够到网页上查问试试。
查问后果 demo：
{
"version": 0.6,
"generator": "Overpass API 0.7.61.5 4133829e",
"osm3s": {
"timestamp_osm_base": "2024-02-18T04:08:14Z",
"timestamp_areas_base": "2024-02-18T00:39:44Z",
"copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL."
},
"elements": [
{
"type": "way",
"id": 48873443,
"bounds": {
"minlat": 31.3237333,
"minlon": 121.5218845,
"maxlat": 31.3267723,
"maxlon": 121.5274975
},
"nodes": [
620110214,
620110215,
620110216,
620110217,
620110218,
620110219,
620110220,
640424170,
1032444307,
640424176,
1032444233,
1032444238,
620110221,
1493810686,
1493810647,
1878618593,
1493810667,
620110222,
620110223,
1177786393,
620110224,
2355402966,
2355402952,
620110214
],
"geometry": [{ "lat": 31.3252665, "lon": 121.5218845},
{"lat": 31.3252848, "lon": 121.5227213},
{"lat": 31.3253385, "lon": 121.5230239},
{"lat": 31.3254554, "lon": 121.5232328},
{"lat": 31.3257800, "lon": 121.5230624},
{"lat": 31.3260089, "lon": 121.5230218},
{"lat": 31.3267684, "lon": 121.5229826},
{"lat": 31.3267613, "lon": 121.5250161},
{"lat": 31.3267618, "lon": 121.5251091},
{"lat": 31.3267594, "lon": 121.5253529},
{"lat": 31.3267618, "lon": 121.5255422},
{"lat": 31.3267537, "lon": 121.5258913},
{"lat": 31.3267723, "lon": 121.5273240},
{"lat": 31.3267524, "lon": 121.5273902},
{"lat": 31.3267079, "lon": 121.5274506},
{"lat": 31.3266721, "lon": 121.5274793},
{"lat": 31.3266315, "lon": 121.5274975},
{"lat": 31.3256535, "lon": 121.5274785},
{"lat": 31.3256489, "lon": 121.5272586},
{"lat": 31.3249724, "lon": 121.5272586},
{"lat": 31.3237334, "lon": 121.5272586},
{"lat": 31.3237333, "lon": 121.5219434},
{"lat": 31.3243177, "lon": 121.5219173},
{"lat": 31.3252665, "lon": 121.5218845}
],
"tags": {
"landuse": "residential",
"name": "开鲁新村",
"name:en": "Kailu Xincun"
}
},
//...
]能够看到，数据中蕴含 AOI 点位轮廓坐标数组和其它信息。
应用数据
在 overpass 网站上导出的数据的经纬度是 gps84 坐标系，如果要在高德地图里应用，须要转换成 gcj02（火星）坐标系，如果要在百度地图种应用，须要转换成bd09 坐标系。这里举荐一个坐标转换开源库 coordtransform。
上面放一张在高德地图中，用不同色彩区块显示小区的 demo：
因为 OSM 上的数据是全世界的用户自发编辑公布保护的，因而难免会存在数据不全、有误的状况。然而总体而言，这可能是一般开发者获取 AOI 最不便无效的路径了。