项目作者: 0nza1101

项目描述 :
Ionic 5 sample app using leaflet and leaflet-velocity plugin. 💨 🍃
高级语言: TypeScript
项目地址: git://github.com/0nza1101/ionic5-leaflet-velocity.git
创建时间: 2017-09-18T09:00:13Z
项目社区:https://github.com/0nza1101/ionic5-leaflet-velocity

开源协议:

下载


This is a sample application using Ionic 5 and Leaflet with leaflet-velocity.
Since it was a headache to implement leaflet-velocity with Ionic 5, I decided to make a new version of this plugin.
This npm package leaflet-velocity-ts is based on a typescript fork of leaflet-velocity made by Cyrille Meichel adding to it wind speed values on the map when the mouse is over a region and some other little fix.
npm i leaflet-velocity-ts --save

  1. import 'leaflet';
  2. import 'leaflet-velocity-ts';
  3. declare var L: any;// Declare leaflet lib and plugin

Get it running

  • Clone this repository.
  • Run npm install from the project root.
  • If you do not install the ionic CLI (npm install cordova ionic -g)
  • Run ionic serve in a terminal from the project root.

    How to use it

    1. // Read JSON DATA and use it for velocity layer
    2. this.http.get('assets/wind-gbr.json').map(res => res.json()).subscribe(data => {
    3. let velocity = L.velocityLayer({
    4. displayValues: true,
    5. displayOptions: {
    6. velocityType: 'GBR Wind',
    7. position: 'bottomleft',//REQUIRED !
    8. emptyString: 'No velocity data', //REQUIRED !
    9. angleConvention: 'bearingCW',
    10. displayPosition: 'bottomleft',
    11. displayEmptyString: 'No velocity data',
    12. speedUnit: 'm/s'
    13. },
    14. data: data,
    15. maxVelocity: 10,
    16. });
    17. velocity.addTo(this.map);
    18. });