Exemples Openlayers (ol package)

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

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:

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 

En el package.json tenim:

...
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  },
...

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

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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Geolocation</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <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>

index.js:

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]
  })
});

Bing maps

Baga xalet.png

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:

Anem a l'apartat keys, i fem un Create key per a l'aplicació de prova que estem fent.

Key: ******
Application Url:
Key type: Basic / Dev/Test
Created date: 04/20/2020
Expiration date: None
Key Status: Enabled
Security Enabled: No

Veig que en l'aplicació d'exemple Londres és a les coordenades:

center: [-6655.5402445057125, 6709968.258934638],

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:

...
import {fromLonLat} from 'ol/proj';
...
center: fromLonLat([1.85840,42.25437]),
...

Smoothing lines using Chaikins algorithm

$ npm instal chaikin-smooth

creat per Joan Quintana Compte, abril 2020

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines