如何使用只有标准国家/州边界和英文名称（除了陆地/水域之外没有地形）的Leaflet获取简单的地图？带有 GeoJSON 图层连接的传单地图...</desc> <question vote="0"> <p>我有一张传单地图，它给了我这个：</p> <p><a href="https://i.sstatic.net/rgs2PZkZ.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvcmdzMlBaa1oucG5n" alt="enter image description here"/></a></p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Leaflet Map with GeoJSON Layer Control</title> <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" data-cfemail="fd91989c9b919889bdccd3cad3cc">[email protected]</a>/dist/leaflet.css" /> <style> #map { height: 100vh; width: 100%; } </style> </head> <body> <div id="map"></div>  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" data-cfemail="422e2723242e273602736c756c73">[email protected]</a>/dist/leaflet.js"></script>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> // Initialize the map const map = L.map("map").setView([0, 0], 1); // Adjust coordinates and zoom level as needed // Add a base map layer const baseLayer = L.tileLayer( "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19, attribution: "© OpenStreetMap", } ).addTo(map); </script> </body> </html></code></pre> </div> </div> <p></p> <p>我该怎么办：</p> <ul> <li>移除所有道路</li> <li>确保所有标签均为英语（不是像此快照中所示的阿拉伯语，也不是其他语言）</li> <li>仅标记和绘制国家/地区（以及美国各州）的边界</li> <li>显示水和土地</li> <li>不要显示地形信息，如树木/山脉/等..</li> </ul> <p>基本上，一张带有最少国家/州边界和标签的最小地图，就是这样（并删除除水和土地之外的所有地形信息）。</p> <p>如何使用 Leaflet 实现这一目标？</p> </question> <answer tick="false" vote="0"> <p>您可以使用自定义地图图块提供商，例如<pre><code>cartographic</code></pre>图块源（“CartoDB Positron”或“CartoDB Light”），该提供商专注于国家/州边界，无需额外地形。</p> <p>现在，这保留了标签和边界，但消除了道路和额外的地理特征。它默认为英文，仅显示陆地和水域，风格简约、干净。</p> <p>使用这种方法，您不需要对 Leaflet 设置进行太多修改；只需更改图块源和地图样式设置即可。</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Leaflet Minimal Country/State Map</title> <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" data-cfemail="056960646369607145342b322b34">[email protected]</a>/dist/leaflet.css" /> <style> #map { height: 100vh; width: 100%; } </style> </head> <body> <div id="map"></div> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" data-cfemail="94f8f1f5f2f8f1e0d4a5baa3baa5">[email protected]</a>/dist/leaflet.js"></script> <script> const map = L.map("map").setView([20, 0], 2); // cartoDB Positron base layer const baseLayer = L.tileLayer( "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", { maxZoom: 19, attribution: 'Map tiles by <a href="https://carto.com/attributions">CARTO</a>, under CC BY 3.0. Data by © OpenStreetMap contributors, ODbL', } ).addTo(map); </script> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>