画像


画像




Turf.jswebpackでビルド環境を構築したメモ。Turf.jsのバージョンは5.1.6を利用。


GitHubでも公開しています。Turf.jsでのビルド環境を手軽に始めたい方ぜひご利用ください。

turfjs-starter


Turf.jsは、地理空間データを操作するためのライブラリです。重心を計算したり、距離を計算したりと様々な解析ができるのが特徴です。




画像




ディレクトリ構成


画像


package.json


{
"name": "turfjs-starter",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "Yasunori Kirimoto",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"@turf/turf": "^5.1.6",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"mapbox-gl": "^0.50.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2"
}
}




webpack.config.js


const webpack = require("webpack");

module.exports = {
mode: 'production',
entry: './_resouce/main.js',
output: {
path: __dirname + '/dist',
filename: 'app.js'
},
module: {
rules: [
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
name: './dist/img/icon/[name].[ext]'
}
}
}
]
},
plugins: [
new webpack.ProvidePlugin({
mapboxgl: 'mapbox-gl',
turf: '@turf/turf'
})
],
devServer: {
contentBase: __dirname + '/dist',
publicPath: '/',
watchContentBase: true,
open: true
}
};




./_resouce


main.js


// CSS一式を読み込んでパッケージ
import "mapbox-gl/dist/mapbox-gl.css";
import "./css/style.css";

// JS一式を読み込んでパッケージ
import './js/script.js';




./_resouce/css


style.css


html, body {
height: 100%;
padding: 0;
margin: 0;
}

#map {
z-index: 0;
height: 100%;
}




./_resouce/js


script.js


// MIERUNE MONO読み込み
var map = new mapboxgl.Map({
container: "map",
style: {
version: 8,
sources: {
m_mono: {
type: "raster",
tiles: ["https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png"],
tileSize: 256
}
},
layers: [{
id: "m_mono",
type: "raster",
source: "m_mono",
minzoom: 0,
maxzoom: 18
}]
},
center: [139.770, 35.676],
zoom: 13
});


map.on("load", function () {

// 元ポイントを取得
var features = turf.featureCollection([
turf.point([139.7594, 35.6865]),
turf.point([139.7692, 35.6665]),
turf.point([139.7812, 35.6849])
]);

// 元ポイント表示
map.addSource("FeaturesPoint", {
type: "geojson",
data: features
});
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
}
});


// センターポイントを取得
var center = turf.center(features);

// センターポイント表示
map.addSource("CenterPoint", {
type: "geojson",
data: center
});
map.addLayer({
id: "CenterPoint",
type: "circle",
source: "CenterPoint",
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
}
});

});

// コントロール関係表示
map.addControl(new mapboxgl.NavigationControl());




./dist

app.jsは自動でビルド


index.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Turf.js Starter</title>
</head>
<body>
<div id="map"></div>
<script src="./app.js"></script>
</body>
</html>




ファイルの準備ができたら対象ディレクトリでコマンド実行


パッケージインストール

npm install




ビルド


npm run build




ローカルサーバー起動


npm run dev


ローカルサーバーを立ち上げて確認すると表示される。







Q&A