Joan: /* Smoothing lines using Chaikins algorithm */

2020-04-26T21:37:36Z

Smoothing lines using Chaikins algorithm

Pàgina nova

__TOC__
=Instal·lació=
Per a la instal·lació d'un projecte Openlayers amb node i el paquet '''ol''', veure el projecte de:
[[Openlayers:_ol_package._Exemple_Casa_de_Papel]]
Per anar ràpids:
<pre>
cd /home/joan/projectes/OSM/
mkdir exemples-ol
cd exemples-ol
PS1="$ "

$ npm init (deixar les opcions per defecte)
$ npm install ol
$ npm install --save-dev parcel-bundler

$ npm install --save-dev parcel (instal·lació local)
$ npm run build
$ npm start

*http://localhost:1234
</pre>
En el package.json tenim:
<pre>
...
"scripts": {
"start": "parcel index.html",
"build": "parcel build --experimental-scope-hoisting --public-url . index.html"
},
...
</pre>
I per tant per fer els diferents projectes només cal tenir un html en la carpeta arrel i el corresponent javascript. Per ex: ''index_bing.html'' i ''index_bing.js'', i canviar la referència en el ''package.json''. Per veure el funcionament només cal fer ''npm start'', no cal fer el ''build''.
=Geolocation=
*https://openlayers.org/en/latest/examples/geolocation.html
Es tracta de demostrar la capacitat de trobar quina és la meva posició geogràfica. S'utiltiza la API de ''geolocation'', que té el mètode ''setTracking()''.

'''index.html''':
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geolocation</title>

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="info" style="display: none;"></div>
<label for="track">
track position
<input id="track" type="checkbox"/>
</label>
<p>
position accuracy : <code id="accuracy"></code>  
altitude : <code id="altitude"></code>  
altitude accuracy : <code id="altitudeAccuracy"></code>  
heading : <code id="heading"></code>  
speed : <code id="speed"></code>
</p>
<script src="index.js"></script>
</body>
</html>
</pre>
'''index.js''':
<pre>
import 'ol/ol.css';
import Feature from 'ol/Feature';
import Geolocation from 'ol/Geolocation';
import Map from 'ol/Map';
import View from 'ol/View';
import Point from 'ol/geom/Point';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';

var view = new View({
center: [0, 0],
zoom: 2
});

var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: view
});

var geolocation = new Geolocation({
// enableHighAccuracy must be set to true to have the heading value.
trackingOptions: {
enableHighAccuracy: true
},
projection: view.getProjection()
});

function el(id) {
return document.getElementById(id);
}

el('track').addEventListener('change', function() {
geolocation.setTracking(this.checked);
});

// update the HTML page when the position changes.
geolocation.on('change', function() {
el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';
el('altitude').innerText = geolocation.getAltitude() + ' [m]';
el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';
el('heading').innerText = geolocation.getHeading() + ' [rad]';
el('speed').innerText = geolocation.getSpeed() + ' [m/s]';
});

// handle geolocation error.
geolocation.on('error', function(error) {
var info = document.getElementById('info');
info.innerHTML = error.message;
info.style.display = '';
});

var accuracyFeature = new Feature();
geolocation.on('change:accuracyGeometry', function() {
accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
});

var positionFeature = new Feature();
positionFeature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: '#3399CC'
}),
stroke: new Stroke({
color: '#fff',
width: 2
})
})
}));

geolocation.on('change:position', function() {
var coordinates = geolocation.getPosition();
positionFeature.setGeometry(coordinates ?
new Point(coordinates) : null);
});

new VectorLayer({
map: map,
source: new VectorSource({
features: [accuracyFeature, positionFeature]
})
});
</pre>
=Bing maps=
[[Fitxer:Baga xalet.png | thumbnail]]
*https://openlayers.org/en/latest/examples/bing-maps.html

*https://es.wikipedia.org/wiki/Bing_Maps
Seria l'equivalent a Google Maps per a Microsoft. A Windows 10 es diu ''Windows Maps'''. Les imatges aèries s'actualitzen amb freqüència.

Per utilitzar els mapes de Bing (visió satèl·lit) necessito una key. Per obtenir la clau/key de desenvolupament he de registrar-me al '''Bing Maps Dev Center''':
*https://www.microsoft.com/en-us/maps
*https://www.bingmapsportal.com/

Anem a l'apartat keys, i fem un Create key per a l'aplicació de prova que estem fent.
*Application name: openlayers-example
*url: blanc
*type: basic
*application type: dev/test
<pre>
Key: ******
Application Url:
Key type: Basic / Dev/Test
Created date: 04/20/2020
Expiration date: None
Key Status: Enabled
Security Enabled: No
</pre>

Veig que en l'aplicació d'exemple Londres és a les coordenades:
<pre>
center: [-6655.5402445057125, 6709968.258934638],
</pre>
Sistema de coordenades: Bing and Google are both in WGS84 Web Mercator (Auxiliary Sphere) WKID 102100 or 3857

Per convertir a les coordenades UTM de Bagà (42.25437,1.85840) he de fer el mateix que vaig fer a ''La Casa de Papel'':
<pre>
...
import {fromLonLat} from 'ol/proj';
...
center: fromLonLat([1.85840,42.25437]),
...
</pre>
=Smoothing lines using Chaikins algorithm=
*https://openlayers.org/en/latest/examples/chaikin.html
<pre>
$ npm instal chaikin-smooth
</pre>

{{Autor}}, abril 2020

Exemples Openlayers (ol package) - Historial de revisió

Joan: /* Smoothing lines using Chaikins algorithm */