目录结构

Question

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

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

关于我如何做到这一点的任何想法？

＆＃13;

//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);

＆＃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>

＆＃13;

根据导入，我已经在app.js或map.js中使用var L = require('leaflet');

进行了尝试

或在控制器中var L = require（＆＃39; leaflet＆＃39;）;

我曾经得到过这个ReferenceError：L没有定义。该行指的是第一条js行。

现在我尝试使用browserify，我得到＆＃34;窗口未定义＆＃34;错误。我试图按照本教程http://mappingandco.com/blog/leaflet-with-browserify-basic-tutorial/

进行操作

感谢您提供任何帮助或建议！

Answer 1

您不能在浏览器中require()本地使用任何内容，但Browserify或Webpack会允许您将模块捆绑到您的代码中，以便可以在浏览器中运行。

您应该使用require语句编写JavaScript代码，然后使用 build 来生成JavaScript bundle ，并使用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用于浏览器

1 个答案:

目录结构

的package.json

app.js

的index.html

安装和构建