Clip polygons to tile boundaries

modules/services/vector_tile.js

@@ -4,6 +4,7 @@ import _forEach from 'lodash-es/forEach';
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { request as d3_request } from 'd3-request';
 
+import bboxClip from '@turf/bbox-clip';
 import Protobuf from 'pbf';
 import vt from '@mapbox/vector-tile';
 
@@ -34,6 +35,9 @@ function vtToGeoJSON(data, tile) {
                 if (layers.length > 1) {
                     feature.properties.vt_layer = layerID;
                 }
+                // clip to tile bounds
+                feature = bboxClip(feature, tile.extent.rectangle());
+
                 // force some unique id generation
                 feature.__featurehash__ = utilHashcode(JSON.stringify(feature));
                 feature.__propertyhash__ = utilHashcode(JSON.stringify(feature.properties || {}));

package.json

@@ -34,6 +34,7 @@
     "@mapbox/sexagesimal": "1.1.0",
     "@mapbox/togeojson": "0.16.0",
     "@mapbox/vector-tile": "^1.3.1",
+    "@turf/bbox-clip": "^6.0.0",
     "diacritics": "1.3.0",
     "lodash-es": "4.17.10",
     "marked": "0.5.0",