问题描述
我让用户填写表格,说明他们居住的城市。为了简化流程,我使用 MapBox 地理编码 API:用户开始填写他的城市名称,API 会建议结果。
{
"city": "Paris","region": "TX,//Texas
"country": "US"
}
我有按地区划分的国家/地区 svg 地图。
<svg>
<g>
<path id="US-AK" title="Alaska" d="..." />
<path id="US-TX" title="Texas" d="..." />
...
</g>
</svg>
现在我可以从数据库中选择居住在德克萨斯州的所有用户,并在 svg 地图上显示信息(居住在该地区的用户数量)。
问题是 API 并不总是在响应中给我区域信息。
例如对于 Paris,France
我已经测试了 6 different API,但他们给我的关于区域的数据并不一致。有时 API 不包含任何有关区域的信息。有时信息是错误的。
我只看到一种解决方案:存储有关地区的所有数据(不同语言的代码和名称),并让用户自行选择国家/地区。 但也许您会看到另一个更简单的解决方案?
解决方法
我们找到了不同的解决方案。我们在 MongoDB 中以 geoJSON
格式存储区域的形状。对于 API 返回的每个地址,我们都有 GPS 坐标。所以我们总能找到地区代码。
// Insert regions to DB
db.getCollection('region').insert({
"code": "FR-IDF","polygons": {
"type":"MultiPolygon","coordinates": <multi polygon shape>
}
});
// Find regions by gps coordinates
db.getCollection('region').find({
"polygons": {
$geoIntersects: {
$geometry:{
"type":"Point","coordinates" : [ 7.0174,43.5528 ]
}
}
}
});
我从这里获取区域详细信息:https://gadm.org/download_country_v3.html → 格式化 KMZ(级别 1)。我们可以使用 QGIS 简化区域路径(菜单:矢量 → 几何工具 → 简化...)。然后将它们导出到 geoJSON 文件。