Mòduls amb Javascript. Mapes amb OpenLayers
Cas pràctic. Dibuixar un mapa amb la llibreria OpenLayers
Treballar amb llibreries
A high-performance, feature-packed library for all your mapping needs.
Donar una ullada a tots els exemples que podem fer a:
Però el hola món de com pintar un mapa és a:
En el primer exemple no utilitzem els mòduls, ho fem amb les llibreries:
script pintar_mapa.html:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
- Pintar el mapa sobre la teva ciutat amb un nivell de zoom adequat.
- Provar una altra servidor de tiles:
source: new ol.source.Stamen({layer: 'toner'})
Ara farem aquest mateix exercici amb mòduls. Els exemples que hem vist anteriorment estan tots amb mòduls.
Treballar amb mòduls
Per treballar amb mòduls, que és la manera recomanable, hem d'anar als Tutorials, i anar al primer de tots: Building an OpenLayers Application:
- https://openlayers.org/en/latest/doc/tutorials/
- https://openlayers.org/en/latest/doc/tutorials/bundle.html
$ mkdir app $ cd app
Per crear l'aplicació i importar tots els mòduls de Openlayers, utilitzarem npm.
$ npm init
Quan et pregunta, pots deixar totes les opcions per defecte. S'ha creat el fitxer package.json.
This will create a package.json file in your working directory. Add OpenLayers as dependency to your application with
$ npm install ol
Es crea la carpeta node_modules amb totes les dependències. At this point you can ask NPM to add required development dependencies by running
$ npm install --save-dev parcel-bundler
Què és parcel?
Blazing fast, zero configuration web application bundler
Ara necessitem construir l'aplicació, amb els fitxers index.js i index.html.
script index.js:
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import {fromLonLat} from 'ol/proj'; //línia nova
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
//center: [0, 0],
center: fromLonLat([1.9858, 41.9176]), //línia modificada
zoom: 0
})
});
script index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>
Modifiquem el fitxer package.json per definir com es fa el build de l'aplicació i com s'engega (start):
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
},
"author": "",
"license": "ISC"
}
Finalment, per fer córrer l'aplicació, farem:
$ npm start > app@1.0.0 start /home/joan/M06_WEC_2021/UF2/openlayers/app > parcel index.html Server running at http://localhost:1234 ✨ Built in 13.21s.
- localhost:1234
Per crear un production bundle (es crea la carpeta dist/)
$ npm run build > app@1.0.0 build /home/joan/M06_WEC_2021/UF2/openlayers/app > parcel build --public-url . index.html ✨ Built in 21.59s. dist/app.ef0d89f9.js.map ⚠️ 1.95 MB 248ms dist/app.ef0d89f9.js 540.56 KB 19.16s dist/app.bb28b584.css.map 7.18 KB 3ms dist/app.bb28b584.css 3.96 KB 5.42s dist/index.html 273 B 2.06s
and copy the dist/ folder to your production server.
Aquesta carpeta dist/ conté totes les llibreries i el codi comprimit. L'objectiu és ara posar aquesta carpeta dist/ dins el teu Apache/XAMP i veure que funciona. Per tant, distingim entre l'entorn de desenvolupament, i l'entorn de desplegament en la fase de producció.
creat per Joan Quintana Compte, març 2022
