{"id":10131,"date":"2025-12-05T16:16:06","date_gmt":"2025-12-05T07:16:06","guid":{"rendered":"https:\/\/www.ois-yokohama.co.jp\/oisblog2018\/?p=10131"},"modified":"2025-12-05T16:16:09","modified_gmt":"2025-12-05T07:16:09","slug":"webpack%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6leaflet%e3%81%a7polygon%e3%82%92%e3%83%89%e3%83%a9%e3%83%83%e3%82%b0%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.ois-yokohama.co.jp\/oisblog2018\/archives\/10131","title":{"rendered":"webpack\u3092\u4f7f\u3063\u3066leaflet\u3067Polygon\u3092\u30c9\u30e9\u30c3\u30b0\u3057\u3066\u307f\u308b"},"content":{"rendered":"
\"\"<\/div>\n

\u3053\u3093\u306b\u3061\u306f\u3001\u732b\u597d\u304d\u30ea\u30fc\u30de\u30f3\u306e\u307b\u3052PG\u3067\u3059\u3002<\/p>\n\n\n\n

\u4eca\u56de\u306fleaflet-path-drag\u3067Polygon\u3092\u30c9\u30e9\u30c3\u30b0\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n

Leaflet\u3067\u5730\u56f3\u4e0a\u306ePolygon\u3092\u30c9\u30e9\u30c3\u30b0\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u300cleaflet-path-drag\u300d\u3092\u4f7f\u3063\u3066\u3001\u7c21\u5358\u306a\u30b5\u30f3\u30d7\u30eb\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u30d5\u30a9\u30eb\u30c0\u69cb\u6210\uff08\u6700\u7d42\u5f62\uff09<\/h2>\n\n\n\n
C:\\work\\hoge\n\u251c\u2500node-v22.21.0-win-x64\n\u2514\u2500leaflet-drag-app\n\u3000\u3000\u251c\u2500dis\n\u3000\u3000\u2502\u3000\u251c\u2500bundle.js\n\u3000\u3000\u2502\u3000\u2514\u2500index.html\n\u3000\u3000\u251c\u2500node_modules\n\u3000\u3000\u251c\u2500src\n\u3000\u3000\u2502\u3000\u251c\u2500hoge.css\n\u3000\u3000\u2502\u3000\u251c\u2500hoge.js\n\u3000\u3000\u2502\u3000\u2514\u2500smile.svg\n\u3000\u3000\u251c\u2500hoge.html\n\u3000\u3000\u251c\u2500package.json\n\u3000\u3000\u251c\u2500package-lock.json\n\u3000\u3000\u2514\u2500webpack.config.js\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u624b\u9806<\/strong><\/p>\n\n\n\n
    \n
  1. Node.js\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n
    \u4ee5\u4e0b\u306e\u30b5\u30a4\u30c8\u304b\u3089\u300c\u30b9\u30bf\u30f3\u30c9\u30a2\u30ed\u30fc\u30f3\u306e\u30d0\u30a4\u30ca\u30ea\u30fc(zip)\u300d\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002
    https:\/\/nodejs.org\/ja\/download<\/a>
    node-v22.21.0-win-x64.zip \u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u3001C:\\work\\hoge \u306b\u5c55\u958b\u3002<\/p>\n\n\n\n
      \n
    1. \u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u8d77\u52d5 & \u4f5c\u696d\u30d5\u30a9\u30eb\u30c0\u3078\u79fb\u52d5<\/strong><\/li>\n<\/ol>\n\n\n\n
      cd \\work\\hoge\\leaflet-drag-app<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
        \n
      1. Node.js<\/strong>\u306b\u30d1\u30b9\u3092\u901a\u3059<\/strong><\/li>\n<\/ol>\n\n\n\n
        set path=%path%;C:\\work\\hoge\\node-v22.21.0-win-x64<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
          \n
        1. package.json<\/strong>\u4f5c\u6210<\/strong><\/li>\n<\/ol>\n\n\n\n
          npm init –yes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
            \n
          1. \u5fc5\u8981\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n
            npm install –save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
            npm install –save-dev style-loader css-loader
            npm install –save-dev leaflet leaflet-path-drag<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
              \n
            1. src\/hoge.js <\/strong>\u4f5c\u6210<\/strong><\/li>\n<\/ol>\n\n\n\n
              import ‘leaflet\/dist\/leaflet.css’;
              import L from ‘leaflet’;
              import ‘leaflet-path-drag’;
              import ‘\/src\/hoge.css’;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                \n
              1. src\/hoge.css <\/strong>\u4f5c\u6210<\/strong><\/li>\n<\/ol>\n\n\n\n
                .mycon {
                \u00a0 width:auto;
                \u00a0 height: auto;
                \u00a0 background: url(smile.svg) no-repeat center center\/cover;
                }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                \u30de\u30fc\u30ab\u30fc\u7528\u5b9a\u7fa9\u3002\u753b\u50cf\u3092\u4f7f\u3046\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
                  \n
                1. hoge.html <\/strong>\u4f5c\u6210<\/strong><\/li>\n<\/ol>\n\n\n\n
                  <!DOCTYPE html>
                  <html lang=”ja”>
                  <head>
                  \u00a0\u00a0\u00a0 <meta charset=”UTF-8″>
                  \u00a0\u00a0\u00a0 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
                  \u00a0\u00a0\u00a0 <title>Leaflet.Path.Drag Sample<\/title>
                  <\/head>
                  <body>
                  \u00a0\u00a0\u00a0 <h1>Leaflet.Path.Drag \u30b5\u30f3\u30d7\u30eb<\/h1>
                  \u00a0\u00a0\u00a0 <div id=”map” style=”width:1000px; height:600px; border:solid;”><\/div>
                  \u00a0\u00a0\u00a0 <script src=”bundle.js”><\/script>
                  \u00a0
                  <script>
                  const map = L.map(‘map’).setView([35.300510,139.482],16);
                  \u00a0
                  L.tileLayer(‘https:\/\/mt1.google.com\/vt\/lyrs=r&x={x}&y={y}&z={z}’, {
                  \u00a0\u00a0\u00a0 attribution: “<a href=’https:\/\/developers.google.com\/maps\/documentation’ target=’_blank’>Google Map<\/a>”
                  }).addTo(map);
                  \u00a0
                  map.on(‘click’, function(e) {
                  \u00a0\u00a0\u00a0 console.log(“click”, e.latlng);
                  \u00a0\u00a0\u00a0 addMarker(e.latlng);
                  });
                  \u00a0
                  let polyLatlngs = [
                  \u00a0\u00a0\u00a0 L.latLng(35.302421, 139.481166),
                  \u00a0\u00a0\u00a0 L.latLng(35.302009, 139.479868),
                  \u00a0\u00a0\u00a0 L.latLng(35.301002, 139.480544),
                  \u00a0\u00a0\u00a0 L.latLng(35.301388, 139.482024),
                  ];
                  let polygon = L.polygon(polyLatlngs, {
                  \u00a0\u00a0\u00a0 draggable: true,
                  \u00a0\u00a0\u00a0 color: ‘orange’,
                  \u00a0\u00a0\u00a0 weight: 1,
                  \u00a0\u00a0\u00a0 opacity: 1.0,
                  \u00a0\u00a0\u00a0 fillColor: ‘green’,
                  \u00a0\u00a0\u00a0 fillOpacity: 0.5,
                  }).addTo(map)
                  \u00a0\u00a0\u00a0 .bindPopup(‘Drag.’)
                  \u00a0\u00a0\u00a0 .openPopup();
                  polygon.on(‘dragend’, function(e) {
                  \u00a0\u00a0\u00a0 console.log(‘dragend’, e);
                  });
                  \u00a0
                  function addMarker(latlng) {
                  \u00a0\u00a0\u00a0 let icon = L.divIcon({
                  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 className: ‘mycon’,
                  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 iconSize: [30, 30],
                  \u00a0\u00a0\u00a0 });
                  \u00a0\u00a0\u00a0 let marker = L.marker(latlng, {
                  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 draggable: true,
                  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 icon: icon
                  \u00a0\u00a0\u00a0 }).addTo(map);
                  \u00a0\u00a0\u00a0 marker.on(‘dragstart’, function () {
                  \u00a0\u00a0\u00a0\u00a0\u00a0 map.dragging.disable();
                  \u00a0\u00a0\u00a0 });
                  \u00a0\u00a0\u00a0 marker.on(‘dragend’, function () {
                  \u00a0\u00a0\u00a0\u00a0\u00a0 map.dragging.enable();
                  \u00a0\u00a0\u00a0 });
                  }
                  <\/script>
                  <\/body>
                  <\/html><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                  \u5730\u56f3\u30af\u30ea\u30c3\u30af\u3067\u30de\u30fc\u30ab\u30fc\u304c\u914d\u7f6e\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
                    \n
                  1. package.json\u306e\u4fee\u6b63<\/strong><\/strong><\/li>\n<\/ol>\n\n\n\n
                    {
                    \u00a0 “name”: “leaflet-drag-app”,
                    \u00a0 “version”: “1.0.0”,
                    \u00a0 “description”: “”,
                    \u00a0 “main”: “webpack.config.js”,
                    \u00a0 “scripts”: {
                    \u00a0\u00a0\u00a0 “build”: “webpack”,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/\u8ffd\u52a0\u884c<\/mark>
                    \u00a0\u00a0\u00a0 “test”: “echo \\”Error: no test specified\\” && exit 1″
                    \u00a0 },
                    \u00a0 “keywords”: [],
                    \u00a0 “author”: “”,
                    \u00a0 “license”: “ISC”,
                    \u00a0 “devDependencies”: {
                    \u00a0\u00a0\u00a0 \u2026
                    \u00a0 }
                    }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                      \n
                    1. webpack.config.js \u4f5c\u6210<\/strong><\/li>\n<\/ol>\n\n\n\n
                      const path = require(‘path’);
                      const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
                      \u00a0
                      module.exports = {
                      \u00a0 mode: “development”,
                      \u00a0 entry: ‘.\/src\/hoge.js’,
                      \u00a0 output: {
                      \u00a0\u00a0\u00a0 filename: ‘bundle.js’,
                      \u00a0\u00a0\u00a0 path: path.resolve(__dirname, ‘dist’),
                      \u00a0\u00a0\u00a0 clean: true,
                      \u00a0 },
                      \u00a0 module: {
                      \u00a0\u00a0\u00a0 rules: [
                      \u00a0\u00a0\u00a0\u00a0\u00a0 {
                      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 test: \/\\.css$\/,
                      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 use: [‘style-loader’, ‘css-loader’],
                      \u00a0\u00a0\u00a0\u00a0\u00a0 },
                      \u00a0\u00a0\u00a0\u00a0\u00a0 {
                      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 test: \/\\.(png|svg|jpg|jpeg|gif)$\/i,
                      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: ‘asset’,
                      \u00a0\u00a0\u00a0\u00a0\u00a0 },
                      \u00a0\u00a0\u00a0 ],
                      \u00a0 },
                      \u00a0 plugins: [
                      \u00a0\u00a0\u00a0 new HtmlWebpackPlugin({
                      \u00a0\u00a0\u00a0\u00a0\u00a0 template: ‘.\/hoge.html’,
                      \u00a0\u00a0\u00a0 }),
                      \u00a0 ],
                      \u00a0 devServer: {
                      \u00a0\u00a0\u00a0 static: ‘.\/dist’,
                      \u00a0 },
                      };<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                        \n
                      1. webpack<\/strong>\u5b9f\u884c<\/strong><\/li>\n<\/ol>\n\n\n\n
                        \n
                        npm run build<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/blockquote>\n\n\n\n
                        \u203bcss\u3067\u6307\u5b9a\u3057\u305f\u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u306f\u4e00\u7dd2\u306b\u30d0\u30f3\u30c9\u30eb\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
                        \u5b9f\u884c\u78ba\u8a8d<\/strong><\/p>\n\n\n\n
                        npx webpack-dev-server<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                        http:\/\/localhost:8080\/<\/a>\u3000\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u78ba\u8a8d<\/p>\n\n\n\n
                        \"\"<\/figure>\n\n\n\n
                        \u554f\u984c\u70b9<\/strong><\/p>\n\n\n\n
                        \u5730\u56f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30de\u30fc\u30ab\u30fc\u304c\u914d\u7f6e\u3055\u308c\u3001\u30de\u30fc\u30ab\u30fc\u3092\u30c9\u30e9\u30c3\u30b0\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002\u305f\u3060\u3057\u3001\u5358\u7d14\u306b\u30de\u30fc\u30ab\u30fc\u3092\u4f5c\u6210\u3057\u3066\u30c9\u30e9\u30c3\u30b0\u3059\u308b\u3068\u3001\u5730\u56f3\u81ea\u4f53\u3082\u4e00\u7dd2\u306b\u30c9\u30e9\u30c3\u30b0\u3055\u308c\u3066\u3057\u307e\u3046\u3068\u3044\u3046\u554f\u984c\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
                        \u305d\u306e\u305f\u3081\u3001dragstart \u3068 dragend \u30a4\u30d9\u30f3\u30c8\u3067\u5730\u56f3\u306e dragging \u3092\u7121\u52b9\uff0f\u6709\u52b9\u306b\u5207\u308a\u66ff\u3048\u308b\u3053\u3068\u3067\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
                        \u306a\u305c\u5730\u56f3\u307e\u3067\u30c9\u30e9\u30c3\u30b0\u3055\u308c\u3066\u3057\u307e\u3046\u306e\u304b\u306f\u3001\u307e\u3060\u8981\u8abf\u67fb\u3067\u3059\u2026\u3002<\/p>\n\n\n\n
                        Webpack<\/strong>\u3092\u4f7f\u308f\u306a\u3044\u30b5\u30f3\u30d7\u30eb\u3082<\/strong><\/p>\n\n\n\n
                        Webpack\u3092\u4f7f\u308f\u306a\u3044\u30d0\u30fc\u30b8\u30e7\u30f3\u3082\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u304c\u3001\u3053\u3061\u3089\u306f\u7279\u306b\u554f\u984c\u306a\u304f\u52d5\u4f5c\u3057\u307e\u3057\u305f\u3002\u624b\u8efd\u306b\u8a66\u3057\u305f\u3044\u65b9\u306b\u306f\u304a\u3059\u3059\u3081\u3067\u3059\u3002<\/p>\n\n\n\n
                        <!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Leaflet.Path.Drag Sample<\/title>\n<\/head>\n<body>\n    <h1>Leaflet.Path.Drag \u30b5\u30f3\u30d7\u30eb\uff12<\/h1>\n    <div id=\"map\" style=\"width:1000px; height:600px; border:solid;\"><\/div>\n    <link rel=\"stylesheet\" href=\"https:\/\/npmcdn.com\/leaflet@1.2.0\/dist\/leaflet.css\">\n    <script src=\"https:\/\/npmcdn.com\/leaflet@1.2.0\/dist\/leaflet.js\"><\/script>\n    <script src=\"https:\/\/leaflet.github.io\/Path.Drag.js\/src\/Path.Drag.js\"><\/script>\n\n<script>\nconst map = L.map('map').setView([35.300510,139.482],16);\n\nL.tileLayer('https:\/\/mt1.google.com\/vt\/lyrs=r&x={x}&y={y}&z={z}', {\n    attribution: \"<a href='https:\/\/developers.google.com\/maps\/documentation' target='_blank'>Google Map<\/a>\"\n}).addTo(map);\n\nmap.on('click', function(e) {\n    console.log(\"click\", e.latlng);\n    addMarker(e.latlng);\n});\n\nlet polyLatlngs = [\n    L.latLng(35.302421, 139.481166),\n    L.latLng(35.302009, 139.479868),\n    L.latLng(35.301002, 139.480544),\n    L.latLng(35.301388, 139.482024),\n];\nlet polygon = L.polygon(polyLatlngs, {\n    draggable: true,\n    color: 'orange',\n    weight: 1,\n    opacity: 1.0,\n    fillColor: 'green',\n    fillOpacity: 0.5,\n}).addTo(map)\n    .bindPopup('Drag.')\n    .openPopup();\npolygon.on('dragend', function(e) {\n    console.log('dragend', e);\n});\n\nfunction addMarker(latlng) {\n    let marker = L.marker(latlng, {\n        draggable: true\n    }).addTo(map);\n}\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
                        \n\n\n\n
                        \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4e00\u5f0f\u3082\u7528\u610f\u3057\u3066\u3042\u308b\u306e\u3067\u3001\u8208\u5473\u3042\u308b\u65b9\u306f\u305c\u3072\u53c2\u8003\u306b\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff01<\/p>\n\n\n\n
                        leaflet-drag-app.zip<\/a><\/p>\n\n\n\n
                         \u203b\u5143\u6587\u66f8\u3092\u9069\u5f53\u306b\u4f5c\u6210\u3057Copilot\u3067\u751f\u6210<\/p>\n\n\n\n
                        <\/p>\n\n\n\n
                        <\/p>\n","protected":false},"excerpt":{"rendered":"
                        \u3053\u3093\u306b\u3061\u306f\u3001\u732b\u597d\u304d\u30ea\u30fc\u30de\u30f3\u306e\u307b\u3052PG\u3067\u3059\u3002 \u4eca\u56de\u306fleaflet-path-drag\u3067Polygon\u3092\u30c9\u30e9\u30c3\u30b0\u3057\u3066\u307f\u307e\u3059\u3002 Leaflet\u3067\u5730\u56f3\u4e0a\u306ePolygon\u3092\u30c9\u30e9\u30c3\u30b0\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u300cleaflet-pa […]<\/p>\n","protected":false},"author":1,"featured_media":10134,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","vkExUnit_EyeCatch_disable":"","_veu_custom_css":"","veu_display_promotion_alert":"common","vkexunit_cta_each_option":"","footnotes":""},"categories":[6],"tags":[1179,1180,1181,1183,1184],"class_list":["post-10131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineer","tag-leaflet","tag-leaflet-path-drag","tag-polygon","tag-webpack","tag-1184"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t