javascript - LeafletJs 只显示一个国家

Question

我在 D3 中使用 Leafletjs 来显示 map 。

我只想在 map 中显示英国。

Leaflet 和 D3 是否可以只显示英国。

Answer 1

当然有可能。

现在的解决方案取决于您是想使用 D3 绘制英国，还是想从 Tile Server 获取它。

在后一种情况下，有一个比 xmojmr 评论中的链接中提出的解决方案更新的解决方案。

参见 Prevent tiles outside of polygon from loading

想法是使用 TileLayer.BoundaryCanvas plugin ，您可以指定一个 GeoJSON boundary 选项来隐藏不在该 GeoJSON 几何图形中的所有内容。

BoundaryCanvas is a plugin for Leaflet mapping library to draw tiled raster layers with arbitrary boundary. HTML5 Canvas is used for rendering.

带有粗略英国形状的现场演示:

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>