first

nerpemde-ui/.editorconfig

@@ -0,0 +1,22 @@
+# 告诉EditorConfig插件，这是根文件，不用继续往上查找
+root = true
+
+# 匹配全部文件
+[*]
+# 设置字符集
+charset = utf-8
+# 缩进风格，可选space、tab
+indent_style = space
+# 缩进的空格数
+indent_size = 2
+# 结尾换行符，可选lf、cr、crlf
+end_of_line = lf
+# 在文件结尾插入新行
+insert_final_newline = true
+# 删除一行中的前后空格
+trim_trailing_whitespace = true
+
+# 匹配md结尾的文件
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

nerpemde-ui/.env.development

@@ -0,0 +1,11 @@
+# 页面标题
+VUE_APP_TITLE = 新能源风光资源管理平台
+
+# 开发环境配置
+ENV = 'development'
+
+# ELF管理系统/开发环境
+VUE_APP_BASE_API = '/dev-api'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

nerpemde-ui/.env.production

@@ -0,0 +1,10 @@
+# 页面标题
+VUE_APP_TITLE = 新能源风光资源管理平台
+
+# 生产环境配置
+ENV = 'production'
+
+# ELF管理系统/生产环境
+VUE_APP_BASE_API = '/prod-api'
+
+VUE_APP_GIS_API = '/webgis-api'

nerpemde-ui/.env.staging

@@ -0,0 +1,10 @@
+# 页面标题
+VUE_APP_TITLE = 新能源风光资源管理平台
+
+NODE_ENV = production
+
+# 测试环境配置
+ENV = 'staging'
+
+# ELF管理系统/测试环境
+VUE_APP_BASE_API = '/stage-api'

nerpemde-ui/.eslintignore

@@ -0,0 +1,10 @@
+# 忽略build目录下类型为js的文件的语法检查
+build/*.js
+# 忽略src/assets目录下文件的语法检查
+src/assets
+# 忽略public目录下文件的语法检查
+public
+# 忽略当前目录下为js的文件的语法检查
+*.js
+# 忽略当前目录下为vue的文件的语法检查
+*.vue

nerpemde-ui/.eslintrc.js

@@ -0,0 +1,199 @@
+// ESlint 检查配置
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}

nerpemde-ui/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+
+package-lock.json
+yarn.lock

nerpemde-ui/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    '@vue/cli-plugin-babel/preset'
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      'plugins': ['dynamic-import-node']
+    }
+  }
+}

nerpemde-ui/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "nerp",
+  "version": "1.0.0",
+  "description": "新能源风光资源管理平台",
+  "author": "jiayuepowertech",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "lint": "eslint --ext .js,.vue src"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "keywords": [
+    "vue",
+    "admin",
+    "dashboard",
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/icelake/elf-vue-plus.git"
+  },
+  "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
+    "@riophae/vue-treeselect": "0.4.0",
+    "axios": "0.24.0",
+    "clipboard": "2.0.8",
+    "core-js": "3.19.1",
+    "echarts": "^5.4.1",
+    "element-ui": "2.15.8",
+    "esri-loader": "^3.5.0",
+    "file-saver": "2.0.5",
+    "fuse.js": "6.4.3",
+    "highlight.js": "9.18.5",
+    "html2canvas": "^1.4.1",
+    "js-beautify": "1.13.0",
+    "js-cookie": "3.0.1",
+    "jsencrypt": "3.0.0-rc.1",
+    "jspdf": "^2.5.1",
+    "nprogress": "0.2.0",
+    "quill": "1.3.7",
+    "screenfull": "5.0.2",
+    "sortablejs": "1.10.2",
+    "tiff.js": "^1.0.0",
+    "vue": "2.6.12",
+    "vue-count-to": "1.0.13",
+    "vue-cropper": "0.5.5",
+    "vue-meta": "2.4.0",
+    "vue-router": "3.4.9",
+    "vuedraggable": "2.24.3",
+    "vuex": "3.6.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "4.4.6",
+    "@vue/cli-plugin-eslint": "4.4.6",
+    "@vue/cli-service": "4.4.6",
+    "babel-eslint": "10.1.0",
+    "babel-plugin-dynamic-import-node": "2.3.3",
+    "chalk": "4.1.0",
+    "compression-webpack-plugin": "5.0.2",
+    "connect": "3.6.6",
+    "eslint": "7.15.0",
+    "eslint-plugin-vue": "7.2.0",
+    "lint-staged": "10.5.3",
+    "runjs": "4.4.2",
+    "sass": "1.32.13",
+    "sass-loader": "10.1.1",
+    "script-ext-html-webpack-plugin": "2.1.5",
+    "svg-sprite-loader": "5.1.1",
+    "vue-template-compiler": "2.6.12"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

nerpemde-ui/public/index.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
+    <!--[if lt IE 11]><script>window.location.href='html/ie.html';</script><![endif]-->
+	  <style>
+    html,
+    body,
+    #app {
+      height: 100%;
+      margin: 0px;
+      padding: 0px;
+    }
+    .chromeframe {
+      margin: 0.2em 0;
+      background: #ccc;
+      color: #000;
+      padding: 0.2em 0;
+    }
+
+    #loader-wrapper {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999999;
+    }
+
+    #loader {
+      display: block;
+      position: relative;
+      left: 50%;
+      top: 50%;
+      width: 150px;
+      height: 150px;
+      margin: -75px 0 0 -75px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -webkit-animation: spin 2s linear infinite;
+      -ms-animation: spin 2s linear infinite;
+      -moz-animation: spin 2s linear infinite;
+      -o-animation: spin 2s linear infinite;
+      animation: spin 2s linear infinite;
+      z-index: 1001;
+    }
+
+    #loader:before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      right: 5px;
+      bottom: 5px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -webkit-animation: spin 3s linear infinite;
+      -moz-animation: spin 3s linear infinite;
+      -o-animation: spin 3s linear infinite;
+      -ms-animation: spin 3s linear infinite;
+      animation: spin 3s linear infinite;
+    }
+
+    #loader:after {
+      content: "";
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      right: 15px;
+      bottom: 15px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -moz-animation: spin 1.5s linear infinite;
+      -o-animation: spin 1.5s linear infinite;
+      -ms-animation: spin 1.5s linear infinite;
+      -webkit-animation: spin 1.5s linear infinite;
+      animation: spin 1.5s linear infinite;
+    }
+
+
+    @-webkit-keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+
+
+    #loader-wrapper .loader-section {
+      position: fixed;
+      top: 0;
+      width: 51%;
+      height: 100%;
+      background: #7171C6;
+      z-index: 1000;
+      -webkit-transform: translateX(0);
+      -ms-transform: translateX(0);
+      transform: translateX(0);
+    }
+
+    #loader-wrapper .loader-section.section-left {
+      left: 0;
+    }
+
+    #loader-wrapper .loader-section.section-right {
+      right: 0;
+    }
+
+
+    .loaded #loader-wrapper .loader-section.section-left {
+      -webkit-transform: translateX(-100%);
+      -ms-transform: translateX(-100%);
+      transform: translateX(-100%);
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    }
+
+    .loaded #loader-wrapper .loader-section.section-right {
+      -webkit-transform: translateX(100%);
+      -ms-transform: translateX(100%);
+      transform: translateX(100%);
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    }
+
+    .loaded #loader {
+      opacity: 0;
+      -webkit-transition: all 0.3s ease-out;
+      transition: all 0.3s ease-out;
+    }
+
+    .loaded #loader-wrapper {
+      visibility: hidden;
+      -webkit-transform: translateY(-100%);
+      -ms-transform: translateY(-100%);
+      transform: translateY(-100%);
+      -webkit-transition: all 0.3s 1s ease-out;
+      transition: all 0.3s 1s ease-out;
+    }
+
+    .no-js #loader-wrapper {
+      display: none;
+    }
+
+    .no-js h1 {
+      color: #222222;
+    }
+
+    #loader-wrapper .load_title {
+      font-family: 'Open Sans';
+      color: #FFF;
+      font-size: 19px;
+      width: 100%;
+      text-align: center;
+      z-index: 9999999999999;
+      position: absolute;
+      top: 60%;
+      opacity: 1;
+      line-height: 30px;
+    }
+
+    #loader-wrapper .load_title span {
+      font-weight: normal;
+      font-style: italic;
+      font-size: 13px;
+      color: #FFF;
+      opacity: 0.5;
+    }
+  </style>
+  </head>
+  <body>
+    <div id="app">
+	    <div id="loader-wrapper">
+		    <div id="loader"></div>
+		    <div class="loader-section section-left"></div>
+		    <div class="loader-section section-right"></div>
+		    <div class="load_title">正在加载系统资源，请耐心等待</div>
+        </div>
+	</div>
+  </body>
+</html>

nerpemde-ui/public/js/bigemap-velocity2.js

@@ -0,0 +1,904 @@
+"use strict";
+
+/*
+ Generic  Canvas Layer for bigemap 0.7 and 1.0-rc,
+ copyright Stanislav Sumbera,  2016 , sumbera.com , license MIT
+ originally created and motivated by BM.CanvasOverlay  available here: https://gist.github.com/Sumbera/11114288
+
+ */
+
+// -- BM.DomUtil.setTransform from bigemap 1.0.0 to work on 0.0.7
+//------------------------------------------------------------------------------
+if (!BM.DomUtil.setTransform) {
+  BM.DomUtil.setTransform = function (el, offset, scale) {
+    var pos = offset || new BM.Point(0, 0);
+    el.style[BM.DomUtil.TRANSFORM] = (BM.Browser.ie3d ? "translate(" + pos.x + "px," + pos.y + "px)" : "translate3d(" + pos.x + "px," + pos.y + "px,0)") + (scale ? " scale(" + scale + ")" : "");
+  };
+}
+
+// -- support for both  0.0.7 and 1.0.0 rc2 bigemap
+BM.CanvasLayer = (BM.Layer ? BM.Layer : BM.Class).extend({
+  // -- initialized is called on prototype
+  initialize: function initialize(options) {
+    this._map = null;
+    this._canvas = null;
+    this._frame = null;
+    this._delegate = null;
+    BM.setOptions(this, options);
+  },
+  delegate: function delegate(del) {
+    this._delegate = del;
+    return this;
+  },
+  needRedraw: function needRedraw() {
+    if (!this._frame) {
+      this._frame = BM.Util.requestAnimFrame(this.drawLayer, this);
+    }
+    return this;
+  },
+  //-------------------------------------------------------------
+  _onLayerDidResize: function _onLayerDidResize(resizeEvent) {
+    this._canvas.width = resizeEvent.newSize.x;
+    this._canvas.height = resizeEvent.newSize.y;
+  },
+  //-------------------------------------------------------------
+  _onLayerDidMove: function _onLayerDidMove() {
+    var topLeft = this._map.containerPointToLayerPoint([0, 0]);
+    BM.DomUtil.setPosition(this._canvas, topLeft);
+    this.drawLayer();
+  },
+  //-------------------------------------------------------------
+  getEvents: function getEvents() {
+    var events = {
+      resize: this._onLayerDidResize,
+      moveend: this._onLayerDidMove
+    };
+    if (this._map.options.zoomAnimation && BM.Browser.any3d) {
+      events.zoomanim = this._animateZoom;
+    }
+    return events;
+  },
+  //-------------------------------------------------------------
+  onAdd: function onAdd(map) {
+    this._map = map;
+    this._canvas = BM.DomUtil.create("canvas", "bigemap-layer");
+    this.tiles = {};
+    var size = this._map.getSize();
+    this._canvas.width = size.x;
+    this._canvas.height = size.y;
+    var animated = this._map.options.zoomAnimation && BM.Browser.any3d;
+    BM.DomUtil.addClass(this._canvas, "bigemap-zoom-" + (animated ? "animated" : "hide"));
+    this.options.pane.appendChild(this._canvas);
+    map.on(this.getEvents(), this);
+    var del = this._delegate || this;
+    del.onLayerDidMount && del.onLayerDidMount(); // -- callback
+    this.needRedraw();
+    var self = this;
+    setTimeout(function () {
+      self._onLayerDidMove();
+    }, 0);
+  },
+  //-------------------------------------------------------------
+  onRemove: function onRemove(map) {
+    var del = this._delegate || this;
+    del.onLayerWillUnmount && del.onLayerWillUnmount(); // -- callback
+    this.options.pane.removeChild(this._canvas);
+    map.off(this.getEvents(), this);
+    this._canvas = null;
+  },
+  //------------------------------------------------------------
+  addTo: function addTo(map) {
+    map.addLayer(this);
+    return this;
+  },
+  //------------------------------------------------------------------------------
+  drawLayer: function drawLayer() {
+    // -- todo make the viewInfo properties  flat objects.
+    var size = this._map.getSize();
+    var bounds = this._map.getBounds();
+    var zoom = this._map.getZoom();
+    var center = this._map.options.crs.project(this._map.getCenter());
+    var corner = this._map.options.crs.project(this._map.containerPointToLatLng(this._map.getSize()));
+    var del = this._delegate || this;
+    del.onDrawLayer && del.onDrawLayer({
+      layer: this,
+      canvas: this._canvas,
+      bounds: bounds,
+      size: size,
+      zoom: zoom,
+      center: center,
+      corner: corner
+    });
+    this._frame = null;
+  },
+  // -- BM.DomUtil.setTransform from bigemap 1.0.0 to work on 0.0.7
+  //------------------------------------------------------------------------------
+  _setTransform: function _setTransform(el, offset, scale) {
+    var pos = offset || new BM.Point(0, 0);
+    el.style[BM.DomUtil.TRANSFORM] = (BM.Browser.ie3d ? "translate(" + pos.x + "px," + pos.y + "px)" : "translate3d(" + pos.x + "px," + pos.y + "px,0)") + (scale ? " scale(" + scale + ")" : "");
+  },
+  //------------------------------------------------------------------------------
+  _animateZoom: function _animateZoom(e) {
+    var scale = this._map.getZoomScale(e.zoom);
+    // -- different calc of offset in bigemap 1.0.0 and 0.0.7 thanks for 1.0.0-rc2 calc @jduggan1
+    var offset = BM.Layer ? this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(), e.zoom, e.center) : this._map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this._map._getMapPanePos());
+    BM.DomUtil.setTransform(this._canvas, offset, scale);
+  }
+});
+BM.canvasLayer = function (pane) {
+  return new BM.CanvasLayer(pane);
+};
+BM.Control.Velocity = BM.Control.extend({
+  options: {
+    position: "topleft",
+    emptyString: "Unavailable",
+    // Could be any combination of 'bearing' (angle toward which the flow goes) or 'meteo' (angle from which the flow comes)
+    // and 'CW' (angle value increases clock-wise) or 'CCW' (angle value increases counter clock-wise)
+    angleConvention: "bearingCCW",
+    showCardinal: false,
+    // Could be 'm/s' for meter per second, 'k/h' for kilometer per hour, 'mph' for miles per hour or 'kt' for knots
+    speedUnit: "m/s",
+    directionString: "风向",
+    speedString: "速度",
+    onAdd: null,
+    onRemove: null,
+    handMove: true,
+    handClick: true
+  },
+  onAdd: function onAdd(map) {
+    this._container = BM.DomUtil.create("div", "bigemap-control-velocity");
+    BM.DomEvent.disableClickPropagation(this._container);
+    if (this.options.handMove) map.on("mousemove", this._onMouseMove, this);
+    if (this.options.handClick) map.on('click', this._onClick, this);
+    this._container.innerHTML = this.options.emptyString;
+    if (this.options.bigemapVelocity.options.onAdd) this.options.bigemapVelocity.options.onAdd();
+    return this._container;
+  },
+  onRemove: function onRemove(map) {
+    map.off("mousemove", this._onMouseMove, this);
+    map.off('click', this._onClick, this);
+    if (this.options.bigemapVelocity.options.onRemove) this.options.bigemapVelocity.options.onRemove();
+  },
+  vectorToSpeed: function vectorToSpeed(uMs, vMs, unit) {
+    var velocityAbs = Math.sqrt(Math.pow(uMs, 2) + Math.pow(vMs, 2));
+    // Default is m/s
+    if (unit === "k/h") {
+      return this.meterSec2kilometerHour(velocityAbs);
+    } else if (unit === "kt") {
+      return this.meterSec2Knots(velocityAbs);
+    } else if (unit === "mph") {
+      return this.meterSec2milesHour(velocityAbs);
+    } else {
+      return velocityAbs;
+    }
+  },
+  vectorToDegrees: function vectorToDegrees(uMs, vMs, angleConvention) {
+    // Default angle convention is CW
+    if (angleConvention.endsWith("CCW")) {
+      // vMs comes out upside-down..
+      vMs = vMs > 0 ? vMs = -vMs : Math.abs(vMs);
+    }
+    var velocityAbs = Math.sqrt(Math.pow(uMs, 2) + Math.pow(vMs, 2));
+    var velocityDir = Math.atan2(uMs / velocityAbs, vMs / velocityAbs);
+    var velocityDirToDegrees = velocityDir * 180 / Math.PI + 180;
+    if (angleConvention === "bearingCW" || angleConvention === "meteoCCW") {
+      velocityDirToDegrees += 180;
+      if (velocityDirToDegrees >= 360) velocityDirToDegrees -= 360;
+    }
+    return velocityDirToDegrees;
+  },
+  degreesToCardinalDirection: function degreesToCardinalDirection(deg) {
+    var cardinalDirection = '';
+    if (deg >= 0 && deg < 11.25 || deg >= 348.75) {
+      cardinalDirection = 'N';
+    } else if (deg >= 11.25 && deg < 33.75) {
+      cardinalDirection = 'NNW';
+    } else if (deg >= 33.75 && deg < 56.25) {
+      cardinalDirection = 'NW';
+    } else if (deg >= 56.25 && deg < 78.75) {
+      cardinalDirection = 'WNW';
+    } else if (deg >= 78.25 && deg < 101.25) {
+      cardinalDirection = 'W';
+    } else if (deg >= 101.25 && deg < 123.75) {
+      cardinalDirection = 'WSW';
+    } else if (deg >= 123.75 && deg < 146.25) {
+      cardinalDirection = 'SW';
+    } else if (deg >= 146.25 && deg < 168.75) {
+      cardinalDirection = 'SSW';
+    } else if (deg >= 168.75 && deg < 191.25) {
+      cardinalDirection = 'S';
+    } else if (deg >= 191.25 && deg < 213.75) {
+      cardinalDirection = 'SSE';
+    } else if (deg >= 213.75 && deg < 236.25) {
+      cardinalDirection = 'SE';
+    } else if (deg >= 236.25 && deg < 258.75) {
+      cardinalDirection = 'ESE';
+    } else if (deg >= 258.75 && deg < 281.25) {
+      cardinalDirection = 'E';
+    } else if (deg >= 281.25 && deg < 303.75) {
+      cardinalDirection = 'ENE';
+    } else if (deg >= 303.75 && deg < 326.25) {
+      cardinalDirection = 'NE';
+    } else if (deg >= 326.25 && deg < 348.75) {
+      cardinalDirection = 'NNE';
+    }
+    return cardinalDirection;
+  },
+  meterSec2Knots: function meterSec2Knots(meters) {
+    return meters / 0.514;
+  },
+  meterSec2kilometerHour: function meterSec2kilometerHour(meters) {
+    return meters * 3.6;
+  },
+  meterSec2milesHour: function meterSec2milesHour(meters) {
+    return meters * 2.23694;
+  },
+  _onMouseMove: function _onMouseMove(e) {
+    var self = this;
+    var pos = this.options.bigemapVelocity._map.containerPointToLatLng(BM.point(e.containerPoint.x, e.containerPoint.y));
+    var gridValue = this.options.bigemapVelocity._windy.interpolatePoint(pos.lng, pos.lat);
+    var htmlOut = "";
+    if (gridValue && !isNaN(gridValue[0]) && !isNaN(gridValue[1]) && gridValue[2]) {
+      var deg = self.vectorToDegrees(gridValue[0], gridValue[1], this.options.angleConvention);
+      var cardinal = this.options.showCardinal ? " (".concat(self.degreesToCardinalDirection(deg), ") ") : '';
+      htmlOut = "<strong> ".concat(this.options.velocityType, " ").concat(this.options.directionString, ": </strong> ").concat(deg.toFixed(2), "\xB0").concat(cardinal, ", <strong> ").concat(this.options.velocityType, " ").concat(this.options.speedString, ": </strong> ").concat(self.vectorToSpeed(gridValue[0], gridValue[1], this.options.speedUnit).toFixed(2), " ").concat(this.options.speedUnit);
+      self._map.fire('VelocityLayerMove', {
+        direct: "".concat(deg.toFixed(2), "\xB0").concat(cardinal),
+        speed: "".concat(self.vectorToSpeed(gridValue[0], gridValue[1], this.options.speedUnit).toFixed(2), " ").concat(this.options.speedUnit),
+        context: this,
+        Event: e
+      });
+    } else {
+      htmlOut = this.options.emptyString;
+    }
+    self._container.innerHTML = htmlOut;
+  },
+  _onClick: function _onClick(e) {
+    var self = this;
+    var pos = this.options.bigemapVelocity._map.containerPointToLatLng(BM.point(e.containerPoint.x, e.containerPoint.y));
+    var gridValue = this.options.bigemapVelocity._windy.interpolatePoint(pos.lng, pos.lat);
+    var htmlOut = "";
+    if (gridValue && !isNaN(gridValue[0]) && !isNaN(gridValue[1]) && gridValue[2]) {
+      var deg = self.vectorToDegrees(gridValue[0], gridValue[1], this.options.angleConvention);
+      var cardinal = this.options.showCardinal ? " (".concat(self.degreesToCardinalDirection(deg), ") ") : '';
+      htmlOut = "<strong> ".concat(this.options.velocityType, " ").concat(this.options.directionString, ": </strong> ").concat(deg.toFixed(2), "\xB0").concat(cardinal, ", <strong> ").concat(this.options.velocityType, " ").concat(this.options.speedString, ": </strong> ").concat(self.vectorToSpeed(gridValue[0], gridValue[1], this.options.speedUnit).toFixed(2), " ").concat(this.options.speedUnit);
+      map.fire('VelocityLayerClick', {
+        direct: "".concat(deg.toFixed(2), "\xB0").concat(cardinal),
+        speed: "".concat(self.vectorToSpeed(gridValue[0], gridValue[1], this.options.speedUnit).toFixed(2), " ").concat(this.options.speedUnit),
+        context: this,
+        Event: e
+      });
+    } else {
+      htmlOut = this.options.emptyString;
+    }
+    self._container.innerHTML = htmlOut;
+  }
+});
+BM.Map.mergeOptions({
+  positionControl: false
+});
+BM.Map.addInitHook(function () {
+  if (this.options.positionControl) {
+    this.positionControl = new BM.Control.MousePosition();
+    this.addControl(this.positionControl);
+  }
+});
+BM.control.velocity = function (options) {
+  return new BM.Control.Velocity(options);
+};
+BM.VelocityLayer = (BM.Layer ? BM.Layer : BM.Class).extend({
+  options: {
+    displayValues: true,
+    displayOptions: {
+      velocityType: "",
+      position: "topleft",
+      emptyString: "No  data"
+    },
+    maxVelocity: 10,
+    // used to align color scale
+    colorScale: null,
+    data: null
+  },
+  _map: null,
+  _canvasLayer: null,
+  _windy: null,
+  _context: null,
+  _timer: 0,
+  _mouseControl: null,
+  initialize: function initialize(options) {
+    BM.setOptions(this, options);
+  },
+  onAdd: function onAdd(map) {
+    // determine where to add the layer
+    this._paneName = this.options.paneName || "overlayPane";
+
+    // fall back to overlayPane for bigemap < 1
+    var pane = map._panes.overlayPane;
+    if (map.getPane) {
+      // attempt to get pane first to preserve parent (createPane voids this)
+      pane = map.getPane(this._paneName);
+      if (!pane) {
+        pane = map.createPane(this._paneName);
+      }
+    }
+    // create canvas, add to map pane
+    this._canvasLayer = BM.canvasLayer({
+      pane: pane
+    }).delegate(this);
+    this._canvasLayer.addTo(map);
+    this._map = map;
+  },
+  onRemove: function onRemove(map) {
+    this._destroyWind();
+  },
+  setData: function setData(data) {
+    this.options.data = data;
+    if (this._windy) {
+      this._windy.setData(data);
+      this._clearAndRestart();
+    }
+    this.fire("load");
+  },
+  setOpacity: function setOpacity(opacity) {
+    this._canvasLayer.setOpacity(opacity);
+  },
+  setOptions: function setOptions(options) {
+    this.options = Object.assign(this.options, options);
+    if (options.hasOwnProperty("displayOptions")) {
+      this.options.displayOptions = Object.assign(this.options.displayOptions, options.displayOptions);
+      this._initMouseHandler(true);
+    }
+    if (options.hasOwnProperty("data")) this.options.data = options.data;
+    if (this._windy) {
+      this._windy.setOptions(options);
+      if (options.hasOwnProperty("data")) this._windy.setData(options.data);
+      this._clearAndRestart();
+    }
+    this.fire("load");
+  },
+  /*------------------------------------ PRIVATE ------------------------------------------*/
+
+  onDrawLayer: function onDrawLayer(overlay, params) {
+    var self = this;
+    if (!this._windy) {
+      this._initWindy(this);
+      return;
+    }
+    if (!this.options.data) {
+      return;
+    }
+    if (this._timer) clearTimeout(self._timer);
+    this._timer = setTimeout(function () {
+      self._startWindy();
+    }, 750); // showing velocity is delayed
+  },
+
+  _startWindy: function _startWindy() {
+    var bounds = this._map.getBounds();
+    var size = this._map.getSize();
+
+    // bounds, width, height, extent
+    this._windy.start([[0, 0], [size.x, size.y]], size.x, size.y, [[bounds._southWest.lng, bounds._southWest.lat], [bounds._northEast.lng, bounds._northEast.lat]]);
+  },
+  _initWindy: function _initWindy(self) {
+    // windy object, copy options
+    var options = Object.assign({
+      canvas: self._canvasLayer._canvas,
+      map: this._map
+    }, self.options);
+    this._windy = new Windy(options);
+
+    // prepare context global var, start drawing
+    this._context = this._canvasLayer._canvas.getContext("2d");
+    this._canvasLayer._canvas.classList.add("velocity-overlay");
+    this.onDrawLayer();
+    this._map.on("dragstart", self._windy.stop);
+    this._map.on("dragend", self._clearAndRestart);
+    this._map.on("zoomstart", self._windy.stop);
+    this._map.on("zoomend", self._clearAndRestart);
+    this._map.on("resize", self._clearWind);
+    this._initMouseHandler(false);
+  },
+  _initMouseHandler: function _initMouseHandler(voidPrevious) {
+    if (voidPrevious) {
+      this._map.removeControl(this._mouseControl);
+      this._mouseControl = false;
+    }
+    if (!this._mouseControl && this.options.displayValues) {
+      var options = this.options.displayOptions || {};
+      options["bigemapVelocity"] = this;
+      this._mouseControl = BM.control.velocity(options).addTo(this._map);
+    }
+  },
+  _clearAndRestart: function _clearAndRestart() {
+    if (this._context) this._context.clearRect(0, 0, 3000, 3000);
+    if (this._windy) this._startWindy();
+  },
+  _clearWind: function _clearWind() {
+    if (this._windy) this._windy.stop();
+    if (this._context) this._context.clearRect(0, 0, 3000, 3000);
+  },
+  _destroyWind: function _destroyWind() {
+    if (this._timer) clearTimeout(this._timer);
+    if (this._windy) this._windy.stop();
+    if (this._context) this._context.clearRect(0, 0, 3000, 3000);
+    if (this._mouseControl) this._map.removeControl(this._mouseControl);
+    this._mouseControl = null;
+    this._windy = null;
+    this._map.removeLayer(this._canvasLayer);
+  }
+});
+BM.velocityLayer = function (options) {
+  return new BM.VelocityLayer(options);
+};
+
+/*  Global class for simulating the movement of particle through a 1km wind grid
+
+ credit: All the credit for this work goes to: https://github.com/cambecc for creating the repo:
+ https://github.com/cambecc/earth. The majority of this code is directly take nfrom there, since its awesome.
+
+ This class takes a canvas element and an array of data (1km GFS from http://www.emc.ncep.noaa.gov/index.php?branch=GFS)
+ and then uses a mercator (forward/reverse) projection to correctly map wind vectors in "map space".
+
+ The "start" method takes the bounds of the map at its current extent and starts the whole gridding,
+ interpolation and animation process.
+ */
+
+var Windy = function Windy(params) {
+  var MIN_VELOCITY_INTENSITY = params.minVelocity || 0; // velocity at which particle intensity is minimum (m/s)
+  var MAX_VELOCITY_INTENSITY = params.maxVelocity || 10; // velocity at which particle intensity is maximum (m/s)
+  var VELOCITY_SCALE = (params.velocityScale || 0.005) * (Math.pow(window.devicePixelRatio, 1 / 3) || 1); // scale for wind velocity (completely arbitrary--this value looks nice)
+  var MAX_PARTICLE_AGE = params.particleAge || 90; // max number of frames a particle is drawn before regeneration
+  var PARTICLE_LINE_WIDTH = params.lineWidth || 1; // line width of a drawn particle
+  var PARTICLE_MULTIPLIER = params.particleMultiplier || 1 / 300; // particle count scalar (completely arbitrary--this values looks nice)
+  var PARTICLE_REDUCTION = Math.pow(window.devicePixelRatio, 1 / 3) || 1.6; // multiply particle count for mobiles by this amount
+  var FRAME_RATE = params.frameRate || 15;
+  var FRAME_TIME = 1000 / FRAME_RATE; // desired frames per second
+  var OPACITY = 0.97;
+  var defaulColorScale = ["rgb(36,104, 180)", "rgb(60,157, 194)", "rgb(128,205,193 )", "rgb(151,218,168 )", "rgb(198,231,181)", "rgb(238,247,217)", "rgb(255,238,159)", "rgb(252,217,125)", "rgb(255,182,100)", "rgb(252,150,75)", "rgb(250,112,52)", "rgb(245,64,32)", "rgb(237,45,28)", "rgb(220,24,32)", "rgb(180,0,35)"];
+  var colorScale = params.colorScale || defaulColorScale;
+  var NULL_WIND_VECTOR = [NaN, NaN, null]; // singleton for no wind in the form: [u, v, magnitude]
+
+  var builder;
+  var grid;
+  var gridData = params.data;
+  var date;
+  var λ0, φ0, Δλ, Δφ, ni, nj;
+  var setData = function setData(data) {
+    gridData = data;
+  };
+  var setOptions = function setOptions(options) {
+    if (options.hasOwnProperty("minVelocity")) MIN_VELOCITY_INTENSITY = options.minVelocity;
+    if (options.hasOwnProperty("maxVelocity")) MAX_VELOCITY_INTENSITY = options.maxVelocity;
+    if (options.hasOwnProperty("velocityScale")) VELOCITY_SCALE = (options.velocityScale || 0.005) * (Math.pow(window.devicePixelRatio, 1 / 3) || 1);
+    if (options.hasOwnProperty("particleAge")) MAX_PARTICLE_AGE = options.particleAge;
+    if (options.hasOwnProperty("lineWidth")) PARTICLE_LINE_WIDTH = options.lineWidth;
+    if (options.hasOwnProperty("particleMultiplier")) PARTICLE_MULTIPLIER = options.particleMultiplier;
+    if (options.hasOwnProperty("opacity")) OPACITY = +options.opacity;
+    if (options.hasOwnProperty("frameRate")) FRAME_RATE = options.frameRate;
+    FRAME_TIME = 1000 / FRAME_RATE;
+  };
+
+  // interpolation for vectors like wind (u,v,m)
+  var bilinearInterpolateVector = function bilinearInterpolateVector(x, y, g00, g10, g01, g11) {
+    var rx = 1 - x;
+    var ry = 1 - y;
+    var a = rx * ry,
+      b = x * ry,
+      c = rx * y,
+      d = x * y;
+    var u = g00[0] * a + g10[0] * b + g01[0] * c + g11[0] * d;
+    var v = g00[1] * a + g10[1] * b + g01[1] * c + g11[1] * d;
+    return [u, v, Math.sqrt(u * u + v * v)];
+  };
+  var createWindBuilder = function createWindBuilder(uComp, vComp) {
+    var uData = uComp.data,
+      vData = vComp.data;
+    return {
+      header: uComp.header,
+      //recipe: recipeFor("wind-" + uComp.header.surface1Value),
+      data: function data(i) {
+        return [uData[i], vData[i]];
+      },
+      interpolate: bilinearInterpolateVector
+    };
+  };
+  var createBuilder = function createBuilder(data) {
+    var uComp = null,
+      vComp = null,
+      scalar = null;
+    data.forEach(function (record) {
+      switch (record.header.parameterCategory + "," + record.header.parameterNumber) {
+        case "1,2":
+        case "2,2":
+          uComp = record;
+          break;
+        case "1,3":
+        case "2,3":
+          vComp = record;
+          break;
+        default:
+          scalar = record;
+      }
+    });
+    return createWindBuilder(uComp, vComp);
+  };
+  var buildGrid = function buildGrid(data, callback) {
+    var supported = true;
+    if (data.length < 2) supported = false;
+    if (!supported) console.log("Windy Error: data must have at least two components (u,v)");
+    builder = createBuilder(data);
+    var header = builder.header;
+    if (header.hasOwnProperty("gridDefinitionTemplate") && header.gridDefinitionTemplate != 0) supported = false;
+    if (!supported) {
+      console.log("Windy Error: Only data with Latitude_Longitude coordinates is supported");
+    }
+    supported = true; // reset for futher checks
+
+    λ0 = header.lo1;
+    φ0 = header.la1; // the grid's origin (e.g., 0.0E, 90.0N)
+
+    Δλ = header.dx;
+    Δφ = header.dy; // distance between grid points (e.g., 2.5 deg lon, 2.5 deg lat)
+
+    ni = header.nx;
+    nj = header.ny; // number of grid points W-E and N-S (e.g., 144 x 73)
+
+    if (header.hasOwnProperty("scanMode")) {
+      var scanModeMask = header.scanMode.toString(2);
+      scanModeMask = ('0' + scanModeMask).slice(-8);
+      var scanModeMaskArray = scanModeMask.split('').map(Number).map(Boolean);
+      if (scanModeMaskArray[0]) Δλ = -Δλ;
+      if (scanModeMaskArray[1]) Δφ = -Δφ;
+      if (scanModeMaskArray[2]) supported = false;
+      if (scanModeMaskArray[3]) supported = false;
+      if (scanModeMaskArray[4]) supported = false;
+      if (scanModeMaskArray[5]) supported = false;
+      if (scanModeMaskArray[6]) supported = false;
+      if (scanModeMaskArray[7]) supported = false;
+      if (!supported) console.log("Windy Error: Data with scanMode: " + header.scanMode + " is not supported.");
+    }
+    date = new Date(header.refTime);
+    date.setHours(date.getHours() + header.forecastTime);
+
+    // Scan modes 0, 64 allowed.
+    // http://www.nco.ncep.noaa.gov/pmb/docs/grib2/grib2_table3-4.shtml
+    grid = [];
+    var p = 0;
+    var isContinuous = Math.floor(ni * Δλ) >= 360;
+    for (var j = 0; j < nj; j++) {
+      var row = [];
+      for (var i = 0; i < ni; i++, p++) {
+        row[i] = builder.data(p);
+      }
+      if (isContinuous) {
+        // For wrapped grids, duplicate first column as last column to simplify interpolation logic
+        row.push(row[0]);
+      }
+      grid[j] = row;
+    }
+    callback({
+      date: date,
+      interpolate: interpolate
+    });
+  };
+
+  /**
+   * Get interpolated grid value from Lon/Lat position
+   * @param λ {Float} Longitude
+   * @param φ {Float} Latitude
+   * @returns {Object}
+   */
+  var interpolate = function interpolate(λ, φ) {
+    if (!grid) return null;
+    var i = floorMod(λ - λ0, 360) / Δλ; // calculate longitude index in wrapped range [0, 360)
+    var j = (φ0 - φ) / Δφ; // calculate latitude index in direction +90 to -90
+
+    var fi = Math.floor(i),
+      ci = fi + 1;
+    var fj = Math.floor(j),
+      cj = fj + 1;
+    var row;
+    if (row = grid[fj]) {
+      var g00 = row[fi];
+      var g10 = row[ci];
+      if (isValue(g00) && isValue(g10) && (row = grid[cj])) {
+        var g01 = row[fi];
+        var g11 = row[ci];
+        if (isValue(g01) && isValue(g11)) {
+          // All four points found, so interpolate the value.
+          return builder.interpolate(i - fi, j - fj, g00, g10, g01, g11);
+        }
+      }
+    }
+    return null;
+  };
+
+  /**
+   * @returns {Boolean} true if the specified value is not null and not undefined.
+   */
+  var isValue = function isValue(x) {
+    return x !== null && x !== undefined;
+  };
+
+  /**
+   * @returns {Number} returns remainder of floored division, i.e., floor(a / n). Useful for consistent modulo
+   *          of negative numbers. See http://en.wikipedia.org/wiki/Modulo_operation.
+   */
+  var floorMod = function floorMod(a, n) {
+    return a - n * Math.floor(a / n);
+  };
+
+  /**
+   * @returns {Number} the value x clamped to the range [low, high].
+   */
+  var clamp = function clamp(x, range) {
+    return Math.max(range[0], Math.min(x, range[1]));
+  };
+
+  /**
+   * @returns {Boolean} true if agent is probably a mobile device. Don't really care if this is accurate.
+   */
+  var isMobile = function isMobile() {
+    return /android|blackberry|iemobile|ipad|iphone|ipod|opera mini|webos/i.test(navigator.userAgent);
+  };
+
+  /**
+   * Calculate distortion of the wind vector caused by the shape of the projection at point (x, y). The wind
+   * vector is modified in place and returned by this function.
+   */
+  var distort = function distort(projection, λ, φ, x, y, scale, wind) {
+    var u = wind[0] * scale;
+    var v = wind[1] * scale;
+    var d = distortion(projection, λ, φ, x, y);
+
+    // Scale distortion vectors by u and v, then add.
+    wind[0] = d[0] * u + d[2] * v;
+    wind[1] = d[1] * u + d[3] * v;
+    return wind;
+  };
+  var distortion = function distortion(projection, λ, φ, x, y) {
+    var τ = 2 * Math.PI;
+    //    var H = Math.pow(10, -5.2); // 0.00000630957344480193
+    //    var H = 0.0000360;          // 0.0000360°φ ~= 4m  (from https://github.com/cambecc/earth/blob/master/public/libs/earth/1.0.0/micro.js#L13)
+    var H = 5; // ToDo:   Why does this work?
+    var hλ = λ < 0 ? H : -H;
+    var hφ = φ < 0 ? H : -H;
+    var pλ = project(φ, λ + hλ);
+    var pφ = project(φ + hφ, λ);
+
+    // Meridian scale factor (see Snyder, equation 4-3), where R = 1. This handles issue where length of 1º λ
+    // changes depending on φ. Without this, there is a pinching effect at the poles.
+    var k = Math.cos(φ / 360 * τ);
+    return [(pλ[0] - x) / hλ / k, (pλ[1] - y) / hλ / k, (pφ[0] - x) / hφ, (pφ[1] - y) / hφ];
+  };
+  var createField = function createField(columns, bounds, callback) {
+    /**
+     * @returns {Array} wind vector [u, v, magnitude] at the point (x, y), or [NaN, NaN, null] if wind
+     *          is undefined at that point.
+     */
+    function field(x, y) {
+      var column = columns[Math.round(x)];
+      return column && column[Math.round(y)] || NULL_WIND_VECTOR;
+    }
+
+    // Frees the massive "columns" array for GC. Without this, the array is leaked (in Chrome) each time a new
+    // field is interpolated because the field closure's context is leaked, for reasons that defy explanation.
+    field.release = function () {
+      columns = [];
+    };
+    field.randomize = function (o) {
+      // UNDONE: this method is terrible
+      var x, y;
+      var safetyNet = 0;
+      do {
+        x = Math.round(Math.floor(Math.random() * bounds.width) + bounds.x);
+        y = Math.round(Math.floor(Math.random() * bounds.height) + bounds.y);
+      } while (field(x, y)[2] === null && safetyNet++ < 30);
+      o.x = x;
+      o.y = y;
+      return o;
+    };
+    callback(bounds, field);
+  };
+  var buildBounds = function buildBounds(bounds, width, height) {
+    var upperLeft = bounds[0];
+    var lowerRight = bounds[1];
+    var x = Math.round(upperLeft[0]); //Math.max(Math.floor(upperLeft[0], 0), 0);
+    var y = Math.max(Math.floor(upperLeft[1], 0), 0);
+    var xMax = Math.min(Math.ceil(lowerRight[0], width), width - 1);
+    var yMax = Math.min(Math.ceil(lowerRight[1], height), height - 1);
+    return {
+      x: x,
+      y: y,
+      xMax: width,
+      yMax: yMax,
+      width: width,
+      height: height
+    };
+  };
+  var deg2rad = function deg2rad(deg) {
+    return deg / 180 * Math.PI;
+  };
+  var invert = function invert(x, y, windy) {
+    var latlon = params.map.containerPointToLatLng(BM.point(x, y));
+    return [latlon.lng, latlon.lat];
+  };
+  var project = function project(lat, lon, windy) {
+    var xy = params.map.latLngToContainerPoint(BM.latLng(lat, lon));
+    return [xy.x, xy.y];
+  };
+  var interpolateField = function interpolateField(grid, bounds, extent, callback) {
+    var projection = {}; // map.crs used instead
+    var mapArea = (extent.south - extent.north) * (extent.west - extent.east);
+    var velocityScale = VELOCITY_SCALE * Math.pow(mapArea, 0.4);
+    var columns = [];
+    var x = bounds.x;
+    function interpolateColumn(x) {
+      var column = [];
+      for (var y = bounds.y; y <= bounds.yMax; y += 2) {
+        var coord = invert(x, y);
+        if (coord) {
+          var λ = coord[0],
+            φ = coord[1];
+          if (isFinite(λ)) {
+            var wind = grid.interpolate(λ, φ);
+            if (wind) {
+              wind = distort(projection, λ, φ, x, y, velocityScale, wind);
+              column[y + 1] = column[y] = wind;
+            }
+          }
+        }
+      }
+      columns[x + 1] = columns[x] = column;
+    }
+    (function batchInterpolate() {
+      var start = Date.now();
+      while (x < bounds.width) {
+        interpolateColumn(x);
+        x += 2;
+        if (Date.now() - start > 1000) {
+          //MAX_TASK_TIME) {
+          setTimeout(batchInterpolate, 25);
+          return;
+        }
+      }
+      createField(columns, bounds, callback);
+    })();
+  };
+  var animationLoop;
+  var animate = function animate(bounds, field) {
+    function windIntensityColorScale(min, max) {
+      colorScale.indexFor = function (m) {
+        // map velocity speed to a style
+        return Math.max(0, Math.min(colorScale.length - 1, Math.round((m - min) / (max - min) * (colorScale.length - 1))));
+      };
+      return colorScale;
+    }
+    var colorStyles = windIntensityColorScale(MIN_VELOCITY_INTENSITY, MAX_VELOCITY_INTENSITY);
+    var buckets = colorStyles.map(function () {
+      return [];
+    });
+    var particleCount = Math.round(bounds.width * bounds.height * PARTICLE_MULTIPLIER);
+    if (isMobile()) {
+      particleCount *= PARTICLE_REDUCTION;
+    }
+    var fadeFillStyle = "rgba(0, 0, 0, ".concat(OPACITY, ")");
+    var particles = [];
+    for (var i = 0; i < particleCount; i++) {
+      particles.push(field.randomize({
+        age: Math.floor(Math.random() * MAX_PARTICLE_AGE) + 0
+      }));
+    }
+    function evolve() {
+      buckets.forEach(function (bucket) {
+        bucket.length = 0;
+      });
+      particles.forEach(function (particle) {
+        if (particle.age > MAX_PARTICLE_AGE) {
+          field.randomize(particle).age = 0;
+        }
+        var x = particle.x;
+        var y = particle.y;
+        var v = field(x, y); // vector at current position
+        var m = v[2];
+        if (m === null) {
+          particle.age = MAX_PARTICLE_AGE; // particle has escaped the grid, never to return...
+        } else {
+          var xt = x + v[0];
+          var yt = y + v[1];
+          if (field(xt, yt)[2] !== null) {
+            // Path from (x,y) to (xt,yt) is visible, so add this particle to the appropriate draw bucket.
+            particle.xt = xt;
+            particle.yt = yt;
+            buckets[colorStyles.indexFor(m)].push(particle);
+          } else {
+            // Particle isn't visible, but it still moves through the field.
+            particle.x = xt;
+            particle.y = yt;
+          }
+        }
+        particle.age += 1;
+      });
+    }
+    var g = params.canvas.getContext("2d");
+    g.lineWidth = PARTICLE_LINE_WIDTH;
+    g.fillStyle = fadeFillStyle;
+    g.globalAlpha = 0.6;
+    function draw() {
+      // Fade existing particle trails.
+      var prev = "lighter";
+      g.globalCompositeOperation = "destination-in";
+      g.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+      g.globalCompositeOperation = prev;
+      g.globalAlpha = OPACITY === 0 ? 0 : OPACITY * 0.9;
+
+      // Draw new particle trails.
+      buckets.forEach(function (bucket, i) {
+        if (bucket.length > 0) {
+          g.beginPath();
+          g.strokeStyle = colorStyles[i];
+          bucket.forEach(function (particle) {
+            g.moveTo(particle.x, particle.y);
+            g.lineTo(particle.xt, particle.yt);
+            particle.x = particle.xt;
+            particle.y = particle.yt;
+          });
+          g.stroke();
+        }
+      });
+    }
+    var then = Date.now();
+    (function frame() {
+      animationLoop = requestAnimationFrame(frame);
+      var now = Date.now();
+      var delta = now - then;
+      if (delta > FRAME_TIME) {
+        then = now - delta % FRAME_TIME;
+        evolve();
+        draw();
+      }
+    })();
+  };
+  var start = function start(bounds, width, height, extent) {
+    var mapBounds = {
+      south: deg2rad(extent[0][1]),
+      north: deg2rad(extent[1][1]),
+      east: deg2rad(extent[1][0]),
+      west: deg2rad(extent[0][0]),
+      width: width,
+      height: height
+    };
+    stop();
+
+    // build grid
+    buildGrid(gridData, function (grid) {
+      // interpolateField
+      interpolateField(grid, buildBounds(bounds, width, height), mapBounds, function (bounds, field) {
+        // animate the canvas with random points
+        windy.field = field;
+        animate(bounds, field);
+      });
+    });
+  };
+  var stop = function stop() {
+    if (windy.field) windy.field.release();
+    if (animationLoop) cancelAnimationFrame(animationLoop);
+  };
+  var windy = {
+    params: params,
+    start: start,
+    stop: stop,
+    createField: createField,
+    interpolatePoint: interpolate,
+    setData: setData,
+    setOptions: setOptions,
+    colorScale: colorScale
+  };
+  return windy;
+};
+if (!window.cancelAnimationFrame) {
+  window.cancelAnimationFrame = function (id) {
+    clearTimeout(id);
+  };
+}