如何生成 "highlighted country" 地图

Question

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

Answer 1

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

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

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

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

非常受欢迎D3.js or Raphael.js

3) 第三种方法是使用基于svg的专题网络地图库：

使用JQVMAP (former vectormap.js) or the very new austrian project mapmap.js

4) 使用地形网络制图库

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

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

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

6) 使用地图服务器如果您不熟悉地图服务器，则只有在您要实施广泛的应用程序时才应考虑这一点。不错的地图服务器是 Deegree and the popular Geoserver。

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

Answer 2

您可以使用 google 地理图表。您可以突出显示您想要的任何国家/地区。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

有关更多信息，请点击此处 link https://developers.google.com/chart/interactive/docs/gallery/geomap?csw=1

如何生成 "highlighted country" 地图

How to generate "highlighted country" maps

openstreetmap