Question

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

Answer 1

Oke让我们使用JavaScript，因为我认为存在最多种类的库。在这里，我将解释一些创建交互式webmap的方法。

1）第一种方法是使用普通的svg：

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

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

非常受欢迎的D3.js或Raphael.js

3）第三种方法是使用基于svg的主题网络图谱库：

使用JQVMAP（以前的vectormap.js）或新的奥地利项目mapmap.js

4）使用地形网络图谱库

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

5）创建并使用自己的图块

这种方法是性能最高的解决方案，但并不是最简单的解决方案。 Here是一个非常好的教程，解释了五种方法。但我认为最简单的是使用TileMill。

6）使用地图服务器如果您不熟悉地图服务器，则只有在您要实施广泛的应用程序时才应考虑这一点。好的地图服务器是Deegree和受欢迎的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>

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

如何生成“突出显示的国家/地区”地图

2 个答案: