Diferència entre revisions de la pàgina «Mòduls amb Javascript»

De wikijoan
Salta a la navegació Salta a la cerca
Línia 195: Línia 195:
  
 
=Dòlmens de Catalunya=
 
=Dòlmens de Catalunya=
−
Se't proporciona un fitxer JSON amb tots els dòlmens, geolocalitzats.
+
==Posar una icona sobre un mapa==
 +
Se't proporciona el codi mínim per pintar una icona sobre un mapa. En aquest cas, com a mapa escollim el render de OSM:
 +
<pre>
 +
import 'ol/ol.css';
 +
import Feature from 'ol/Feature';
 +
import Map from 'ol/Map';
 +
import VectorSource from 'ol/source/Vector';
 +
import View from 'ol/View';
 +
import {Icon, Style} from 'ol/style';
 +
import {LineString, Point} from 'ol/geom';
 +
import {getVectorContext} from 'ol/render';
 +
import {fromLonLat} from 'ol/proj';
 +
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
 +
import OSM from 'ol/source/OSM';
 +
 
 +
var features = new Array();
 +
var feature = new Feature({
 +
  'geometry': new Point(fromLonLat([1.9858, 41.9176])),
 +
  'name': 'nom element',
 +
});
 +
 
 +
features.push(feature)
 +
 
 +
var iconStyle = new Style({
 +
  image: new Icon({
 +
    anchor: [0.5,20],
 +
    anchorXUnits: 'fraction',
 +
    anchorYUnits: 'pixels',
 +
    src: 'img/dolmen_16.png'
 +
  })
 +
});
 +
 
 +
var vectorSource = new VectorSource({
 +
  features: features,
 +
  wrapX: false,
 +
});
 +
 
 +
var vector = new VectorLayer({
 +
  source: vectorSource,
 +
  style: iconStyle,
 +
});
 +
 
 +
var map = new Map({
 +
  layers: [
 +
    new TileLayer({
 +
      source: new OSM({
 +
        layer: 'OSM'
 +
      })
 +
    }),
 +
    vector
 +
  ],
 +
  target: 'map',
 +
  view: new View({
 +
    center: fromLonLat([1.9858, 41.9176]),
 +
    zoom: 9
 +
  })
 +
});
 +
</pre>
 +
==JSON de dòlmens==
 +
Se't proporciona un fitxer JSON amb tots els dòlmens, geolocalitzats. Hauràs d'agafar tota la informació dels dòlmens, omplir un array amb la informació (array de ''features''), i cadascun dels elements de l'array el pintaràs sobre el mapa.
  
 
=Dòlmens de Catalunya=
 
=Dòlmens de Catalunya=

Revisió del 18:58, 28 març 2021

Mòduls. Introducció

$ unzip js-examples-master.zip

Anem al primer exemple: 

$ cd js-examples-master/modules/basic-modules/
$ ls
index.html
main.js
modules/
    canvas.js
    square.js

Trobem els exports en els scripts de la carpeta modules/: canvas.js i square.js. Les funcions definides en aquests mòduls s'importen en el main.js, que és el fitxer principal de Javascript. El index.html és el punt d'entrada de la web/html, i fa referència al main.js com has fet moltes vegades.

Debes prestar atención a las pruebas locales — si intentas cargar el archivo HTML localmente (es decir, con una URL file:///), te encontrarás con errores de CORS debido a los requisitos de seguridad del módulo JavaScript. Necesitas hacer tus pruebas a través de un servidor.

Comprovar que el primer exemple funciona correctament (basic-modules), i comprovar que funciona la resta d'exemples.

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 detallat.

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: 

$ 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 OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    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ó.

Dòlmens de Catalunya

Posar una icona sobre un mapa

Se't proporciona el codi mínim per pintar una icona sobre un mapa. En aquest cas, com a mapa escollim el render de OSM: 

import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Icon, Style} from 'ol/style';
import {LineString, Point} from 'ol/geom';
import {getVectorContext} from 'ol/render';
import {fromLonLat} from 'ol/proj';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import OSM from 'ol/source/OSM';

var features = new Array();
var feature = new Feature({
  'geometry': new Point(fromLonLat([1.9858, 41.9176])),
  'name': 'nom element',
});

features.push(feature)

var iconStyle = new Style({
  image: new Icon({
    anchor: [0.5,20],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'img/dolmen_16.png'
  })
});

var vectorSource = new VectorSource({
  features: features,
  wrapX: false,
});

var vector = new VectorLayer({
  source: vectorSource,
  style: iconStyle,
});

var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM({
        layer: 'OSM'
      })
    }),
    vector
  ],
  target: 'map',
  view: new View({
    center: fromLonLat([1.9858, 41.9176]),
    zoom: 9
  })
});

JSON de dòlmens

Se't proporciona un fitxer JSON amb tots els dòlmens, geolocalitzats. Hauràs d'agafar tota la informació dels dòlmens, omplir un array amb la informació (array de features), i cadascun dels elements de l'array el pintaràs sobre el mapa.

Dòlmens de Catalunya

(TBD)

Feina per l'alumne

(TBD)

Entrega al Classroom

(TBD)

creat per Joan Quintana Compte, març 2021

Obtingut de «http://wiki.joanillo.org/index.php?title=Mòduls_amb_Javascript&oldid=297265»