仅包含国家边界的传单地图

Question

默认情况下，OpenStreetMap 显示大量带有区域语言标签的详细信息。我在只需要国家边界、国家名称和地图上的一些标记的情况下使用传单。是否有提供仅显示国家/地区的传单的提供商？

我还想知道这些地图是否可以通过 svg 瓦片而不是图像来渲染。

Answer 1

这是一个绘制国家边界和名称的 JSFiddle 演示：

我的 JavaScript 代码被赋予了三个 2 个字母的国家/地区代码（“es”、“de”、“lv”），并从 Nominatim 获取它们的边框和显示名称。然后它将它们绘制在 Leaflet.js 地图上：

'use strict';

function processNominatimReply(data) {
  data.features.forEach(function(feature) {
    bordersGroup.addData(feature);
  });

  var bbox = data.features[0].bbox;
  var topLeft = L.latLng(bbox[1], bbox[0]);
  var bottomRight = L.latLng(bbox[3], bbox[2]);
  var countryBounds = L.latLngBounds(topLeft, bottomRight);

  var name = data.features[0].properties.display_name;
  var tooltip = L.tooltip()
    .setLatLng(countryBounds.getCenter())
    .setContent(name)
    .addTo(namesGroup);

  myMap.flyToBounds(countryBounds);
}

function sendNominatimRequest(countryCode) {
  var url = 'https://nominatim.openstreetmap.org/search?polygon_geojson=1&format=geojson&polygon_threshold=0.1&country=' + countryCode;

  var request = new XMLHttpRequest();
  request.open('GET', url, false);
  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      var data = JSON.parse(this.response);
      processNominatimReply(data);
    }
  };
  request.send();
}

var startPosition = [51.4661, 7.2491];
var myMap = L.map('myMap').setView(startPosition, 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);

var namesGroup = L.layerGroup();
myMap.addLayer(namesGroup);
var bordersGroup = L.geoJSON();
myMap.addLayer(bordersGroup);

var overlays = {
  'Show country names': namesGroup,
  'Show country borders': bordersGroup
};

L.control.layers(null, overlays, {
  collapsed: false
}).addTo(myMap);

var countries = ['es', 'de', 'lv'];
countries.forEach(function(country) {
  sendNominatimRequest(country);
});

html, body { 
  margin: 0;
  padding: 0;
}

#myMap {
  position: absolute;
  width: 100%;
  height: 100%;
}

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>

<div id="myMap"></div>

建议的解决方案不需要任何 API 密钥或付款，并且我的演示源代码是免费的（许可证：公共领域）。

如果您计划在生产中使用它，您应该安装您自己的 Nominatim 实例。