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

Community
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

posted at

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

``````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,
"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,
}
}
],
},
});

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?