LeafsJs僅顯示一個國家

Question

我在D3中使用Leafletjs來顯示地圖。

我只想在地圖上顯示英國。

Leaflet和D3是否可以只顯示英國。

Answer 1

當然有可能。

現在，解決方案取決於您是要使用D3繪制英國還是要從Tile Server中獲取它。

在后一種情況下，有一種比xmojmr注釋中的鏈接中提出的解決方案更新的解決方案。

請參見防止加載多邊形外部的圖塊

這個想法是使用TileLayer.BoundaryCanvas插件 ，您可以指定一個GeoJSON boundary選項來隱藏不在該GeoJSON幾何體中的所有內容。

BoundaryCanvas是Leaflet映射庫的插件，用於繪制具有任意邊界的平鋪柵格圖層。 HTML5 Canvas用於渲染。

現場演示具有粗糙的英國形狀：

 var map = L.map("map"); $.getJSON('https://cdn.rawgit.com/johan/world.geo.json/34c96bba/countries/GBR.geo.json').then(function(geoJSON) { var osm = new L.TileLayer.BoundaryCanvas("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { boundary: geoJSON, attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, UK shape <a href="https://github.com/johan/world.geo.json">johan/word.geo.json</a>' }); map.addLayer(osm); var ukLayer = L.geoJSON(geoJSON); map.fitBounds(ukLayer.getBounds()); }); 

 #map { height: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script> <script src="https://cdn.rawgit.com/aparshin/leaflet-boundary-canvas/f00b4d35/src/BoundaryCanvas.js"></script> <div id="map"></div>