dayjournal | Turf.js #001 – webpackでビルド環境構築

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

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

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>