turf.js intersect()裁剪存在空洞_turf.intersect

1.应用场景

在利用turf.js求取到等值面后，一般需要对该等值面经行裁剪，将其覆盖在某某行政区上面。参考的官方实例：https://codepen.io/shevawen/pen/abOPdJy?editors=0110

2.问题描述

裁剪就会用到intersect()方法。下图即存在空洞的情况，裁剪用的西藏的边界。

3.问题分析

在裁剪前，在所有的等值面中找到出现问题的图层，可以看到原来的图层中是有等值面的。

// 裁剪的核心代码
let features = [];
isobands.features.forEach(function (layer1) {
  boundaries.features.forEach(function (layer2) {
    let intersection = null;
    try {
      intersection = turf.intersect(layer1, layer2);
    } catch (e) {
      layer1 = turf.buffer(layer1, 0);
      intersection = turf.intersect(layer1, layer2);
    }
    if (intersection != null) {
      intersection.properties = layer1.properties;
      intersection.id = Math.random() * 100000;
      features.push(intersection);
    }
  });
});
let intersection = turf.featureCollection(features);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

intersect(): 两个图层取交集，
bufer(): 将原有图层进行扩散，第二个参数代表扩散的半径，扩散之后将没有连在一起的图层就排除了。
用实际情况进行分析：在truf.js使用intersect()裁剪时，发现图中圈出的这块图层和边界没有交集，此时触发异常，进入catch，进行buffer时就将那块独立的块给排除了，再次裁剪时，那个位置就没有数据信息了。就出现了空洞。

4.解决办法

官方的这个实例其实已经解决了存在裁剪图层外的独立的块，将其排除，但是不能很好的处理裁剪区域内部的独立的块。所以出现了空洞的情况。
1.可以将buffer()的第二个参数调大，将其扩散更明显，让独立的块去整理相连，这样裁剪就不会丢失数据。但是这样对应的图层会变大，等值面数据会失真。
2.在地图上用一个遮罩层遮住显示部分外面的内容。可以使用turf.js的mask()得到遮盖层，然后叠加在地图上，曲线救国~。如果仅仅最终就是看到边界范围内的色斑图。那推荐用遮罩的方式。这样可以避免裁剪带来的巨大计算量，如果边界的进度很高，就很影响效率。
综合考虑，本文最后选择了遮盖层的方式解决了问题，效果图如下：