LeafletJs只顯示一個國家

Question

我使用Leafletjs和D3來顯示地圖。

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

單張和D3可能只顯示英國。

Answer 1

這當然是可能的。

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

在後一種情況下，有一個比xmojmr評論中鏈接中提出的更新的解決方案。

見Prevent tiles outside of polygon from loading

的想法是使用TileLayer.BoundaryCanvas plugin，你可以指定一個以GeoJSON boundary選項可以隱藏一切，是不是GeoJSON的幾何圖形內。

BoundaryCanvas是Leaflet映射庫的插件，用於繪製任意邊界的平鋪柵格圖層。 HTML5畫布用於渲染。

現場演示用粗糙的英國形狀：//計算器：

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>