Bundle Leaflet для использования в браузере - PullRequest
Новая
       37

Bundle Leaflet для использования в браузере

0 голосов
/ 02 мая 2018

Я хотел бы использовать листовку для загрузки пользовательской карты на простом локальном веб-сайте.

В настоящее время я использую 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 не определено. Строка ссылается на первую строку js.

Теперь я попытался использовать browserify и получаю сообщение об ошибке «окно не определено». Я пытался следовать этому уроку http://mappingandco.com/blog/leaflet-with-browserify-basic-tutorial/

Спасибо за любую помощь или предложение!

1 Ответ

0 голосов
/ 02 мая 2018

Вы ничего не можете require() встроить в браузер, но Browserify или Webpack позволят вам связать модули с вашим кодом, чтобы его можно было запустить в браузере.

Вы должны написать свой код JavaScript с помощью require операторов, а затем построить его, чтобы создать пакет JavaScript , который вы доставляете в браузер с помощью HTML. Каждый раз, когда вы изменяете свой код, вам нужно пересобрать или добавить watcher в свой проект и позволить наблюдателю запустить перестроение. Важно понимать, что это bundle.js, который вызывается HTML, , а не 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 в браузере, и вы увидите карту.

...