I've been experimenting with Turf.js ๐
Turf.js is an open-source geospatial analysis library that can process various location data, such as the center of gravity and distance calculations.
I have written an article on "dayjournal memo," in which I tested more than 50 different functions of Turf.js. I would like to introduce five features that I recommend!
The following is a detailed explanation.
- Advance Preparation
- Buffer creation
- Extracting points contained in polygons
- Polygon center of gravity acquisition
- Acquisition of position on a line at a specified distance
- Obtain self-intersection of polygon
Advance Preparation
Use the built environment to get started on Turf.js easily.
https://github.com/dayjournal/turfjs-starter
Buffer creation
Create a buffer from points.
src/main.ts
const point = turf.point([139.770, 35.676]);
map.addSource("FeaturesPoint", {
type: "geojson",
data: point
});
map.addLayer({
id: "FeaturesPoint",
type: "circle",
source: "FeaturesPoint",
layout: {},
paint: {
"circle-pitch-alignment": "map",
"circle-stroke-color": "#1253A4",
"circle-stroke-width": 5,
"circle-stroke-opacity": 0.8,
"circle-color": "#1253A4",
"circle-radius": 5,
"circle-opacity": 0.5
}
});
const buffered = turf.buffer(point, 10, {
units: "kilometers"
});
map.addSource("PolygonSample", {
type: "geojson",
data: buffered
});
map.addLayer({
id: "PolygonSample",
type: "fill",
source: "PolygonSample",
layout: {},
paint: {
"fill-color": "#58BE89",
"fill-opacity": 0.5
}
});
map.addLayer({
id: "PolygonLineSample",
type: "line",
source: "PolygonSample",
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "#58BE89",
"line-width": 5,
"line-opacity": 0.8
}
});
Extracting points contained in polygons
Extract points contained within a polygon.
src/main.ts
const points = turf.randomPoint(30,
{
bbox: [139.7533, 35.6713, 139.7808, 35.6901]
}
);
map.addSource("RandomPoint", {
type: "geojson",
data: points
});
map.addLayer({
id: "RandomPoint",
type: "circle",
source: "RandomPoint",
layout: {},
paint: {
"circle-pitch-alignment": "map",
"circle-stroke-color": "#8DCF3F",
"circle-stroke-width": 10,
"circle-stroke-opacity": 0.8,
"circle-color": "#8DCF3F",
"circle-radius": 10,
"circle-opacity": 0.5
}
});
const polygon = turf.polygon([[
[139.7661, 35.6759],
[139.7718, 35.6741],
[139.7722, 35.6745],
[139.7786, 35.6837],
[139.7734, 35.6843],
[139.7709, 35.6846],
[139.7687, 35.6799],
[139.7661, 35.6759]
]]);
map.addSource("PolygonSample", {
type: "geojson",
data: polygon
});
map.addLayer({
id: "PolygonSample",
type: "fill",
source: "PolygonSample",
layout: {},
paint: {
"fill-color": "#FFD464",
"fill-opacity": 0.5
}
});
map.addLayer({
id: "PolygonLineSample",
type: "line",
source: "PolygonSample",
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "#FFD464",
"line-width": 5,
"line-opacity": 0.8
}
});
const ptsWithin = turf.pointsWithinPolygon(points, polygon);
map.addSource("Points", {
type: "geojson",
data: ptsWithin
});
map.addLayer({
id: "Points",
type: "circle",
source: "Points",
layout: {},
paint: {
"circle-pitch-alignment": "map",
"circle-stroke-color": "#1253A4",
"circle-stroke-width": 5,
"circle-stroke-opacity": 0.8,
"circle-color": "#1253A4",
"circle-radius": 5,
"circle-opacity": 0.5
}
});
Polygon center of gravity acquisition
Acquire the center of gravity of a polygon.
src/main.ts
const polygon = turf.polygon([[
[139.7661, 35.6759],
[139.7718, 35.6741],
[139.7722, 35.6745],
[139.7786, 35.6837],
[139.7734, 35.6843],
[139.7709, 35.6846],
[139.7687, 35.6799],
[139.7661, 35.6759]
]]);
map.addSource("PolygonSample", {
type: "geojson",
data: polygon
});
map.addLayer({
id: "PolygonSample",
type: "fill",
source: "PolygonSample",
layout: {},
paint: {
"fill-color": "#58BE89",
"fill-opacity": 0.5
}
});
map.addLayer({
id: "PolygonLineSample",
type: "line",
source: "PolygonSample",
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "#58BE89",
"line-width": 5,
"line-opacity": 0.8
}
});
const centroid = turf.centroid(polygon);
map.addSource("FeaturesPoint", {
type: "geojson",
data: centroid
});
map.addLayer({
id: "FeaturesPoint",
type: "circle",
source: "FeaturesPoint",
layout: {},
paint: {
"circle-pitch-alignment": "map",
"circle-stroke-color": "#1253A4",
"circle-stroke-width": 5,
"circle-stroke-opacity": 0.8,
"circle-color": "#1253A4",
"circle-radius": 8,
"circle-opacity": 0.5
}
});
Acquisition of position on a line at a specified distance
Get the position on the line at the specified distance.
src/main.ts
const line = turf.lineString([
[139.7506, 35.6611],
[139.7648, 35.6736],
[139.7689, 35.6854]
]);
map.addSource("LineSample", {
type: "geojson",
data: line
});
map.addLayer({
id: "LineSample",
type: "line",
source: "LineSample",
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "#1253A4",
"line-width": 5,
"line-opacity": 0.6
}
});
const point = turf.along(line, 2, {
units: "kilometers"
});
map.addSource("PointSample", {
type: "geojson",
data: point
});
map.addLayer({
id: "PointSample",
type: "circle",
source: "PointSample",
layout: {},
paint: {
"circle-pitch-alignment": "map",
"circle-stroke-color": "#8DCF3F",
"circle-stroke-width": 10,
"circle-stroke-opacity": 0.8,
"circle-color": "#8DCF3F",
"circle-radius": 10,
"circle-opacity": 0.5
}
});
Obtain self-intersection of polygon
Obtain the self-intersection of a polygon.
src/main.ts
const polygon = turf.polygon([[
[139.76398944854733, 35.68560526180893],
[139.75956916809082, 35.681003987351055],
[139.7629165649414, 35.67378781807109],
[139.76879596710205, 35.67570522138987],
[139.7691822052002, 35.6794004505696],
[139.75961208343506, 35.67549605235727],
[139.75948333740234, 35.67786660262532],
[139.76265907287595, 35.680446239082066],
[139.7603416442871, 35.68504754570482],
[139.7706413269043, 35.68421096423828],
[139.77059841156006, 35.68581440434281],
[139.76398944854733, 35.68560526180893]
]]);
map.addSource("PolygonSample", {
type: "geojson",
data: polygon
});
map.addLayer({
id: "PolygonSample",
type: "fill",
source: "PolygonSample",
layout: {},
paint: {
"fill-color": "#FFD464",
"fill-opacity": 0.5
}
});
map.addLayer({
id: "PolygonLineSample",
type: "line",
source: "PolygonSample",
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "#FFD464",
"line-width": 5,
"line-opacity": 0.8
}
});
const point = turf.kinks(polygon);
map.addSource("FeaturesPoint", {
type: "geojson",
data: point
});
map.addLayer({
id: "FeaturesPoint",
type: "circle",
source: "FeaturesPoint",
layout: {},
paint: {
"circle-pitch-alignment": "map",
"circle-stroke-color": "#1253A4",
"circle-stroke-width": 5,
"circle-stroke-opacity": 0.8,
"circle-color": "#1253A4",
"circle-radius": 5,
"circle-opacity": 0.5
}
});
Related Articles
Vite Support for Various Map Library Starters
Yasunori Kirimoto for AWS Heroes ใป Jun 29 '22
Trying Out Various QGIS Processing
Yasunori Kirimoto for MIERUNE ใป Dec 14 '22
COMTiles (Cloud Optimized Map Tiles) hosted on Amazon S3 and Visualized with MapLibre GL JS
Yasunori Kirimoto for MIERUNE ใป Dec 23 '22
References
Turf.js
Top comments (0)