Joan: /* Funcionalitats */

2020-04-26T23:23:56Z

Funcionalitats

Pàgina nova

__TOC__
=Introducció=
(TBD)
2 modes:
*mode SDK, per definir i configurar el mapa.
*mode Render, per fer funcionar el mapa en una línia de temps.
=Funcionalitats=
(TBD)
*App1. Definim una sèrie de punts sobre el mapa. Sobre aquests punts posem un marker. L'últim punt el fem amb doble click. Seguidament, es traça la spline que millor s'ajusta als punts.
*App2. Interpolació d'àrees tancades. Donada una sèrie de punts que defineixen una àrea, interpolar amb més punts tota aquesta àrea. Pintar l'area.
*App3. Donada una àrea petita i una àrea grossa, interpolar les dues àrees de manera que l'àrea petita s'expandeixi a l'àrea grossa. [https://openlayers.org/en/latest/examples/draw-and-modify-features.html]
*App4. Donats una sèrie de punts (Markers), omplir-los de forma seqüencial amb un delay de temps. [https://openlayers.org/en/latest/examples/dynamic-data.html][https://openlayers.org/en/latest/examples/feature-animation.html][https://openlayers.org/en/latest/examples/feature-move-animation.html]
*App5. Donada una sèrie de labels, omplir-los de forma seqüencial amb un delay de temps.
*App6. Fer zoom i centrar en un punt. Controlar el temps amb què es viatja cap al zoom. ([https://openlayers.org/en/latest/examples/animation.html])
*App7: distingir click, double click, alt-click, hover sobre el mapa [https://openlayers.org/en/latest/examples/select-features.html]
*App8: carregar una imatge com a mapa [https://openlayers.org/en/latest/examples/static-image.html][https://openlayers.org/en/latest/examples/wms-custom-proj.html]
*App9: mapa físic sense labels [https://www.arcgis.com/home/webmap/viewer.html?webmap=3b26766ef1cb476bada969e6c251f3d2]
*App10: Botons, custom controls [https://openlayers.org/en/latest/examples/custom-controls.html]
*App11: Imatges satèl·lit [https://openlayers.org/en/latest/examples/full-screen-drag-rotate-and-zoom.html][https://openlayers.org/en/latest/examples/bing-maps.html]

=Aplicacions unitàries=
Abans de posar-ho tot conjuntament, totes les funcionalitats es provaran en unes aplicacions unitàries.
==App1==
Primer havia pensat de fer servir la llibreria ''cubic-spline'' que s'explica més avall. Però aquest problema de suavitzar segments ja està resolt a ''Smoothing lines using Chaikins algorithm'':
*https://openlayers.org/en/latest/examples/chaikin.html
<pre>
$ npm instal chaikin-smooth
</pre>
*[[Exemples_Openlayers_(ol_package)#Smoothing_lines_using_Chaikins_algorithm]]

=Llibreries=
==cubic-spline==
'''NOTA''': no cal. suavitzar segments està resolt a [https://openlayers.org/en/latest/examples/chaikin.html], que és exactament el que jo vull.

Donats una sèrie de punts, vull augmentar la resolució entre els punts obtenint una línia suavitzada.

<pre>
$ cd /projectes/ProgressiveMaps
</pre>

Projecte '''cubic-spiline''':
*https://www.npmjs.com/package/cubic-spline
*https://github.com/morganherlocker/cubic-spline
This is helpful for smoothing line graphs.
<pre>
$ git clone https://github.com/morganherlocker/cubic-spline.git
</pre>
Depèn d'un paquet que es diu ''tape'':
<pre>
$ npm install tape
</pre>
I ja funciona:
<pre>
$ npm test
> node test.js

TAP version 13
# spline
ok 1 should be equal
ok 2 should be equal
ok 3 should be equal
ok 4 should be equal
ok 5 should be equal
...
</pre>
Faig la modificació '''test2.js''' per tal d'obtenir un codi mínim que funcioni i que es vegi com es suavitza una corba:
*script '''test2.js''':
<pre>
const Spline = require("./");

const xs = [1, 2, 3, 4, 5];
const ys = [9, 3, 6, 2, 4];

// new a Spline object
const spline = new Spline(xs, ys);

//comprovació
console.log(spline.at(1));
console.log(spline.at(2));

// interpolate a line at a higher resolution
for (var i = 0; i < 50; i++) {
console.log(i/10 + " " + spline.at(i * 0.1));
}
</pre>
<pre>
$ node test2.js

9
3
0 14.999999999999998
0.1 14.916053571428568
0.2 14.669142857142853
0.3 14.277375
0.4 13.758857142857144
0.5 13.131696428571427
0.6 12.414
0.7 11.623874999999998
0.8 10.779428571428571
0.9 9.898767857142857
1 9
1.1 8.101232142857143
1.2 7.220571428571427
...
</pre>
El mòdul ''tape'' té a veure amb el testing. No el necessitem si no fem testing.

En teoria, per instal·lar la llibreria és:
<pre>
$ npm install cubic-spline
</pre>
però en aquests moments (abril 2020) no està disponible en els repositoris. Tant se val, perquè n'hi ha prou en incloure el fitxer del projecte on es defineix la classe ''Spline'', en aquest cas ''index.js''.

{{Autor}}, abril 2020

Projecte ProgessiveMaps - Historial de revisió

Joan: /* Funcionalitats */