openstreetmap - 如何生成 "highlighted country" map

Question

如何使用 OSM 生成这样的 map ？我希望 map 突出显示单个国家/地区并淡化其他国家/地区。另外，如果这个国家很小，我想在地球上以小缩略图的形式展示它。

Answer 1

好吧，让我们使用 JavaScript，因为我认为这里有最多种类的库。在这里，我将解释一些创建交互式网络 map 的方法。

1) 第一种方法是使用纯 svg:

您可以下载或使用您选择的矢量软件将 basemap 绘制为 svg。然后你可以为每个国家多边形分配一个唯一的 ID，在 JS 中你可以使用鼠标事件访问 SVG，比如点击或鼠标悬停。国家/地区的所有信息都可以存储在 JS 之外的 .json(更简单)或 .xml 文件中。使用从 SVG 事件中获取的 ID，您可以从 .json 中获取合适的信息。也许那是重新发明轮子，但它是高度可调的。但是我认为，如果您只想要静态 map ，那么如果您使用的是更复杂的库，那么它会更简单。

2) 第二种方法是使用库进行 svg 交互:

很受欢迎D3.js或 Raphael.js

3) 第三种方法是使用基于 svg 的专题网络 map 库:

使用JQVMAP (以前的 vectormap.js)或非常新的奥地利项目 mapmap.js

4)使用地形网络制图库

在这里您可以使用开放库 leaflet.js 或 openlayers.js。有了这些，最好的方法是将您的国家/地区添加为 .geojson。 Geojson 是一种非常好的格式，可让您使用大多数地理软件与您的国家/地区进行交互。

5)创建和使用您自己的图 block

这种方法是最高效的解决方案，但实现起来并不是最简单的。 Here是一个很好的教程，解释了五种方法。但我认为最简单的是使用 TileMill。

6) 使用 map 服务器如果您不熟悉 map 服务器，则只有在您要实现广泛的应用程序时才应考虑这一点。不错的 map 服务器是 Deegree和流行的Geoserver .

所有这些方法都各有利弊，但我认为其中一种解决方案可以满足您的需求，祝您取得最大的成功!