Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

posted at

ドルガバで学ぶ turf.js の論理演算機能

年に一度くらい魔が差す時があるので。
元ネタ と異なり、文字の輪郭を忠実にポリゴンとして扱います。つまり「D」は穴あきポリゴンです。

image.png

const polygonD = {
  "type":"Feature",
  "properties":{},
  "geometry":{
    "type":"Polygon",
    "coordinates":[ 省略 ]
  }
};

const polygonG = {
  "type":"Feature",
  "properties":{ },
  "geometry":{
    "type":"Polygon",
    "coordinates":[ 省略 ]
  }
};

const polygonFrame = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [ 省略 ]
  }
};

const map = new mapboxgl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [ "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" ],
        tileSize: 256,
        attribution:
        "OpenStreetMap",
      },
      sources: {
        'type': 'geojson',
        'data': {
          "type": "FeatureCollection",
          "features": []    
        }
      },
      results: {
        'type': 'geojson',
        'data': {
          "type": "FeatureCollection",
          "features": []    
        }
      },
    },
    layers: [
      {
        id: "BASEMAP",
        type: "raster",
        source: "OSM",
        minzoom: 0,
        maxzoom: 18,
      },
      {
        id: 'sources',
        type: 'line',
        source: 'sources',
        paint: {
          'line-color': '#088',
          'line-width': 5,
          'line-opacity': 0.8,
        }
      },
      {
        id: 'results',
        type: 'fill',
        source: 'results',
        paint: {
          'fill-color': 'red',
          'fill-opacity': 1,
        }
      }      
    ],
  },      
});

map.once('load', () => {

  const sourceFeatures = [];

  // 元図形
  sourceFeatures.push({
    d: polygonD,
    g: polygonG,
    frame: polygonFrame,
  });

  // 上左
  sourceFeatures.push({
    d: turf.transformTranslate(polygonD, 70, 90, { units: 'kilometers' }),
    g: turf.transformTranslate(polygonG, 70, 90, { units: 'kilometers' }),
    frame: turf.transformTranslate(polygonFrame, 70, 90, { units: 'kilometers' }),
  });

  // 上中
  sourceFeatures.push({
    d: turf.transformTranslate(polygonD, 140, 90, { units: 'kilometers' }),
    g: turf.transformTranslate(polygonG, 140, 90, { units: 'kilometers' }),
    frame: turf.transformTranslate(polygonFrame, 140, 90, { units: 'kilometers' }),
  });

  // 上右
  sourceFeatures.push({
    d: turf.transformTranslate(polygonD, 210, 90, { units: 'kilometers' }),
    g: turf.transformTranslate(polygonG, 210, 90, { units: 'kilometers' }),
    frame: turf.transformTranslate(polygonFrame, 210, 90, { units: 'kilometers' }),
  });

  // 下左
  sourceFeatures.push({
    d: turf.transformTranslate(sourceFeatures[1].d, 60, 180, { units: 'kilometers' }),
    g: turf.transformTranslate(sourceFeatures[1].g, 60, 180, { units: 'kilometers' }),
    frame: turf.transformTranslate(sourceFeatures[1].frame, 60, 180, { units: 'kilometers' }),
  });

  // 下中
  sourceFeatures.push({
    d: turf.transformTranslate(sourceFeatures[2].d, 60, 180, { units: 'kilometers' }),
    g: turf.transformTranslate(sourceFeatures[2].g, 60, 180, { units: 'kilometers' }),
    frame: turf.transformTranslate(sourceFeatures[2].frame, 60, 180, { units: 'kilometers' }),
  });

  // 下右
  sourceFeatures.push({
    d: turf.transformTranslate(sourceFeatures[3].d, 60, 180, { units: 'kilometers' }),
    g: turf.transformTranslate(sourceFeatures[3].g, 60, 180, { units: 'kilometers' }),
    frame: turf.transformTranslate(sourceFeatures[3].frame, 60, 180, { units: 'kilometers' }),
  });

  sourceFeatureCollection = turf.featureCollection(sourceFeatures.reduce((acc, x) => {
    acc.push(x.d);
    acc.push(x.g);
    acc.push(x.frame);
    return acc;
  }, []));
  map.getSource('sources').setData(sourceFeatureCollection);


  // D AND G -> intersect
  const DandG = turf.intersect(sourceFeatures[1].d, sourceFeatures[1].g);

  // D OR G -> union
  const DorG = turf.union(sourceFeatures[2].d, sourceFeatures[2].g);

  // D XOR G -> (D - G) + (G - D)
  const DminusG = turf.difference(sourceFeatures[3].d, sourceFeatures[3].g);
  const GminusD = turf.difference(sourceFeatures[3].g, sourceFeatures[3].d);
  const DxorG = turf.union(DminusG, GminusD);

  // D NAND G -> frame - DandG
  const DnandG = turf.difference(sourceFeatures[4].frame, turf.intersect(sourceFeatures[4].d, sourceFeatures[4].g));

  // D NOR G -> frame - DorG
  const DnorG = turf.difference(sourceFeatures[5].frame, turf.union(sourceFeatures[5].d, sourceFeatures[5].g));

  // D NXOR G -> frame - DxorG
  const tmpDminusG = turf.difference(sourceFeatures[6].d, sourceFeatures[6].g);
  const tmpGminusD = turf.difference(sourceFeatures[6].g, sourceFeatures[6].d);
  const DnxorG = turf.difference(sourceFeatures[6].frame, turf.union(tmpDminusG, tmpGminusD));

  map.getSource('results').setData(turf.featureCollection([
    DandG, 
    DorG,
    DxorG,
    DnandG,
    DnorG,
    DnxorG,
  ]));

  map.fitBounds(turf.bbox(sourceFeatureCollection), { padding: { bottom: 200, top: 200, right: 200, left: 200 }});
});

また例によってだらだら長いコードになってしまったけど、論理演算を行っているのは、最下部のあたり。
turf.js の論理演算機能は、intersect, union, ''difference'' のみです。

intersect は、2つの図形が共に重なり合う領域、つまり AND です。
union は、2つの図形のいずれかの領域、つまり OR。
difference は差分、つまり第一引数の図形から、第二引数の図形の領域を引いた領域です。

この3つだけでも、組み合わせるとそれなりの事はできますねーという例でした。

完全なコード

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?