用于浏览器的捆绑传单

Question

我想使用 leaflet 在简单的本地网站上加载自定义地图。

目前我正在使用 Node Js、Express、EJS（作为模板引擎），但我似乎无法使用传单。我也尝试过使用 browserify 并导入 bundle.js 脚本，但仍然没有成功。

知道我该怎么做吗？

//map.js

var map = L.map("map-panel");

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var mapLayer = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 20, attribution: osmAttrib });

map.addLayer(mapLayer).fitWorld();
//map.setView([location.lat, location.lon], 13);

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Map</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" href="./../node_modules/leaflet/dist/leaflet.css" />
</head> 

<body>
<div id="map-panel">
</div>
   <!--    <script src="bundle.js"></script> -->
    <script src="/js/map_panel.js"></script>
</body>
</html>

根据导入，我在 app.js 或 map.js 中都尝试过 var L = require('leaflet');

或者在控制器中 var L = require('leaflet');

我曾经遇到过这个 ReferenceError: L is not defined。该行是指第一个js行。

现在我尝试使用 browserify，但出现 "window is not defined" 错误。我试图按照本教程进行操作 http://mappingandco.com/blog/leaflet-with-browserify-basic-tutorial/

感谢您的帮助或建议！

Answer 1

您不能 require() 浏览器中的任何本机内容，但 Browserify 或 Webpack 可以让您将模块捆绑到您的代码中，因此它可以运行在浏览器中。

您应该使用 require 语句编写 JavaScript 代码，然后构建它以生成 JavaScript 包您使用 HTML 传送到浏览器。每次更改代码时，都需要重新构建，或者在项目中添加 watcher 并让观察者运行重新构建。重要的是要了解 HTML 调用的是 bundle.js， 而不是 app.js。您在上面发布的代码尚未捆绑，因此无法使用。

此外，您在上面发布的代码似乎并没有真正向地图添加任何可见的东西，除了缩放控件。

使用教程代码，我在下面发布了一个工作示例：

目录结构

project
  node_modules/
  app.js
  package.json
  index.html
  dist/
    bundle.js
    style.css

package.json

{
  "name": "leaf",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browserify app.js -o dist/bundle.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browserify": "^16.2.0"
  },
  "dependencies": {
    "jquery": "^3.3.1",
    "leaflet": "^1.3.1"
  }
}

app.js

// require modules
var L = require('leaflet');
var $ = require('jquery');
// Create the map
var map = L.map('map').setView([41.3921, 2.1705], 13);

// Indicate leaflet the specific location of the images folder that it needs to render the page
L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/'

// Use OpenStreetMap tiles and attribution
var osmTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var attribution = '© OpenStreetMap contributors';

// Create the basemap and add it to the map
L.tileLayer(osmTiles, {
  maxZoom: 18,
  attribution: attribution
}).addTo(map);

// Add some geojson from this URL
var geojsonURL = 'http://mappingandco.github.io/geojsonDB/barcelona/neighbourhoods.geojson'

$.getJSON(geojsonURL, function(neighbourhoods) {
  L.geoJson(neighbourhoods, {
    onEachFeature: function (feature, layer) {
      layer.bindPopup(feature.properties.NBarri);
    }
  }).addTo(map);
});

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet with browserify template</title>
    <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="dist/style.css">
</head>
<body>
<div id="map"></div>
    <script src="dist/bundle.js" charset="utf-8"></script>
</body>
</html>

安装和构建

npm install
npm run build

然后在浏览器中打开 index.html 文件，您应该会看到一张地图。

用于浏览器的捆绑传单

Bundle Leaflet for use in Browser

javascript

require

node.js

browserify

webpack

目录结构

package.json

app.js

index.html

安装和构建