|
|
| Línia 68: |
Línia 68: |
| | =Entrega al Classroom= | | =Entrega al Classroom= |
| | (TBD) | | (TBD) |
| − | {{Autor}}, març 2022
| |
| − |
| |
| − | =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:
| |
| − | <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>
| |
| − | ==Dibuixar tots els dòlmens. Solució==
| |
| − | [[Fitxer:Dolmens.zip]]
| |
| − | En el següent fitxer se't proporciona:
| |
| − | *dolmens.js (llistat dels dòlmens en format json, geolocalitzats, a punt per exportar el mòdul, veure la última línea)
| |
| − | *img/dolmen_16.png: és la icona que farem servir.
| |
| − | *solució_v0: index_v0.html i main_v0.html. Pintem només una icona (un dolmen) sobre el mapa.
| |
| − | *solució_v1: index_v1.html i main_v1.html. Pintem tots els dòlmens. En l'exercici anterior havies aconseguit pintar un marker (icona). Ara es tracta de recórrer tots els dòlmens, omplir tota la matriu, i posar una icona ben geolocalitzada per cada dolmen.
| |
| − | *solució_v2: index_v2.html i main_v2.html. Volem ampliar la funcionalitat. Quan cliquem sobre el dolmen se'ns mostra una caixa de text amb el nom i el municipi del dolmen.
| |
| − |
| |
| − | =Feina per l'alumne=
| |
| − | *El primer objectiu és fer funcionar (i entendre) tots els exemples proposats
| |
| − | *Partint de l'aplicatiu dels dòlmens, ara l'objectiu és pintar sobre un mapa una altra informació de nodes geolocalitzats que puguis aconseguir de OSM (consulta a Overpass Turbo). Per exemple, se't proposa el llistat de vèrtex geodèsics de Catalunya:
| |
| − | <pre>
| |
| − | https://wiki.openstreetmap.org/wiki/ES:Tag:man_made%3Dsurvey_point
| |
| − | man_made=survey_point
| |
| − | </pre>
| |
| − | O bé qualsevol altra informació que consideris d'interès (però han de ser nodes/punts, no vies). En cas de dubte, consultar el professor.
| |
| − |
| |
| − | Exemple real: mapa interactiu de les restes de la muralla medieval de Màlaga:
| |
| − | *https://umap.openstreetmap.fr/es/map/muralla-medieval-de-malaga_563990#16/36.7246/-4.4135
| |
| − | Un altre exemple: Catalunya Màgica, topònims catalans amb les paraueles ''bruixa'', ''dimoni'', ''diable'', ''drac'', ''infern'':
| |
| − | *https://catalunyamagica.joanillo.org/
| |
| − |
| |
| − | =Desplegament de l'aplicatiu=
| |
| − | Mira aquest projecte similar:
| |
| − | *http://wiki.joanillo.org/index.php/Catalunya_M%C3%A0gica
| |
| − | i llegeix atentament l'apartat de ''desplegament''. Ho comentarem a classe.
| |
| − |
| |
| − | =Entrega al Classroom=
| |
| − | Entregaràs al Classroom la teva solució, dins del termini previst per fer-ho.
| |
| − |
| |
| | {{Autor}}, març 2022 | | {{Autor}}, març 2022 |
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.
Has de tindre en compte els problemes que et trobaràs amb les proves locals (si intentes carregar l'arxiu HTML localment, és a dir, amb una URL file:///, ettrobaràs amb errors de CORS degut als requisits de seguretat del mòdul JavaScript. Necessites fer les teves proves en el teu servidor web:
Comprovar que el primer exemple funciona correctament (basic-modules), i comprovar que funciona la resta d'exemples.
Utilitzar mòduls a la consola.
En aquesta cas hem d'utilitzar l'extensió .mjs (mòduls de js en comptes de .js). El codi mínim i que no té interfície gràfica seria:
script square.mjs:
const name = 'square';
function instanciar(length, color) {
return {
length: length,
color: color
};
}
function reportArea(length) {
console.log(length*length);
}
function reportPerimeter(length) {
console.log(4*length);
}
export { name, instanciar, reportArea, reportPerimeter };
script main.mjs:
import { name, instanciar, reportArea, reportPerimeter } from './square.mjs';
let square1 = instanciar(100, 'blue');
reportArea(square1.length);
reportPerimeter(square1.length);
I si fem:
$ node main.mjs
10000
400
Podem provar aquest codi en l'espai que tens en el servidor vps-89148e22.vps.ovh.net.
Tasques a realitzar
(TBD)
Entrega al Classroom
(TBD)
creat per Joan Quintana Compte, març 2022
