JS leaflet插件webpack打包配置

package.json

{
  "name": "leaflet-center",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "copy-webpack-plugin": "^6.0.3",
    "css-loader": "^4.2.1",
    "file-loader": "^6.0.0",
    "html-loader": "^1.2.1",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.10.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@mapbox/geojsonhint": "^3.0.0",
    "leaflet": "^1.6.0"
  },
  "style": "leaflet-center/src/index.css"
}

 

webpack.config.js

const { resolve } = require('path'); 

module.exports = { 
    entry: './leaflet-center/src/index.js',
    target: 'web',
    output: {
        filename: './leaflet-center.js',
        libraryTarget: "umd",
    },
    module: {
    },
    mode: 'production',
    externals:{
        leaflet : {
            commonjs: "leaflet",
            commonjs2: "leaflet",
            amd: "leaflet",
            root: "L"
        }
    }
};

 

leaflet-center/src/index.js

import L from 'leaflet';

function transferPointLatLonToPoint(pointLatLon) {
    // 28°11'04.9"N 81°37'50.1"W  =>  28.184694, -81.630583
    // 28°N 81°W  =>  28, -81
    let points = pointLatLon.split(" ");
    for (let index in points) {
        points[index] = points[index].slice(0, -1);
        let num = points[index].split(/[°'"]/);
        points[index] = (parseInt(num[0]) + (parseInt(num[1] || 0) + parseFloat(num[2] || 0) / 60) / 60).toFixed(6);
    }
    if (pointLatLon.indexOf("s") >= 0 || pointLatLon.indexOf("S") >= 0) {
        points[0] = "-" + points[0];
    }
    if (pointLatLon.indexOf("w") >= 0 || pointLatLon.indexOf("W") >= 0) {
        points[1] = "-" + points[1];
    }
    return points[0] + "," + points[1];
}
L.Control.PCenter = L.Control.extend({
    options: {
        position: 'topleft',
        initCenter: [37.397207,-121.977096],
        defaultZoom: null
    },
    onAdd: function(map) {
        this._map = map;

        this._menu = L.DomUtil.create('div', 'leaflet-center');
        this._menu.classList.add('fa');
        this._menu.classList.add('fa-map-pin');

        this._input = L.DomUtil.create('input','leaflet-center-input');
        this._submit = L.DomUtil.create('button','leaflet-center-submit');

        this._input.placeholder = "lat,lon or lat,lon,zoom";
        this._submit.innerHTML = "Ok";

        this._div = L.DomUtil.create("div");
        this._div.style.display = "none";
        this._div.appendChild(this._input)
        this._div.appendChild(this._submit)

        this._container = L.DomUtil.create('div', 'leaflet-bar');
        this._container.appendChild(this._menu)
        this._container.appendChild(this._div)
        this._container.style.display = "inline-flex";

        L.DomEvent.disableClickPropagation(this._container);
        L.DomEvent.on(this._menu, 'click', this._toggle, this);

        this._centerMarker = L.marker(this.options.initCenter,{icon: L.divIcon({className: 'fa fa-crosshairs fa-2x leaflet-center-marker'})});
        this._centerMarker.addTo(this._map);
        this._map.on("move", function(){
            this._centerMarker.setLatLng(this._map.getCenter());
            this._input.value = this._map.getCenter().lat.toFixed(6) + ","+this._map.getCenter().lng.toFixed(6);
        }.bind(this))

        return this._container;
    },
    onRemove: function() {
        L.DomEvent.off(this._menu, 'click', this._toggle, this);
    },
    hideIcon: function() {
        this._IconOpacity(0);
    },
    showIcon: function() {
        this._IconOpacity(1);
    },
    _IconOpacity: function(n) {
        this._centerMarker.setOpacity(n);
    },
    _toggle: function(e){
        var show = this._div.style.display;
        if(show=="none"){
            this._div.style.display = "";
            L.DomEvent.on(this._input, 'keyup', this._keyup, this);
            L.DomEvent.on(this._submit, 'click', this._Ok, this);
        }else{
            this._div.style.display = "none"
            L.DomEvent.off(this._input, 'keyup', this._keyup, this);
            L.DomEvent.off(this._submit, 'click', this._Ok, this);
        }
    },
    _keyup: function(e){
        if(e.keyCode == 13){
            this._Ok()
        }
    },
    _Ok: function(){
        this._input.value = this._input.value.trim();
        if(!this._input.value){
            return
        }
        let pointLatLon = /^((-?\d+\°)(\d+\'(\d+\.\d+\")?)?[NSns]? \s*(-?\d+\°)(\d+\'(\d+\.\d+\")?)?[EWew]?)$/;
        if (pointLatLon.test(this._input.value)) {
            this._input.value = transferPointLatLonToPoint(this._input.value)
        }
        var pointRegex=/^((-?\d+)(\.\d+)?,\s*(-?\d+)(\.\d+)?)$/
        if(pointRegex.test(this._input.value)){
            var lat = this._input.value.replace(/\s/g,'').split(",")[0]
            var lng = this._input.value.replace(/\s/g,'').split(",")[1]
            if(this.options.defaultZoom){
                this._map.setView([lat, lng], this.options.defaultZoom);
            }else{
                this._map.setView([lat, lng]);
            }
        }
        var pointAndZoomRegex=/^((-?\d+)(\.\d+)?,\s*(-?\d+)(\.\d+)?,\s*(-?\d+))$/
        if(pointAndZoomRegex.test(this._input.value)){
            var lat = this._input.value.replace(/\s/g,'').split(",")[0]
            var lng = this._input.value.replace(/\s/g,'').split(",")[1]
            var zoom = this._input.value.replace(/\s/g,'').split(",")[2]
            this._map.setView([lat, lng], zoom);
        }
    }
});
L.control.pCenter = function(options) {
    return new L.Control.PCenter(options);
};

 

leaflet-center/src/index.css

.leaflet-center{
    height: 30px;
    width: 30px;
    text-align: center;
    padding: 7px;
    top: 0px;
    background-color: #ffffff;
}

.leaflet-center-input{
    height: 30px;
    margin-left: 3px;
}

.leaflet-center-submit{
    height: 30px;
}

.leaflet-center-marker {
    color:red;
    margin-left: -11px !important;
    margin-top: -13px !important;
}