您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
广东省气象业务网数值预报页面增强
- // ==UserScript==
- // @name NWP helper in GuangDong
- // @description 广东省气象业务网数值预报页面增强
- // @namespace minhill.com
- // @match http://10.148.8.228/to_fore_homepage.action*
- // @match http://10.148.8.18/ywwhome/vision/multiDataApply/gisloader.html*
- // @version 1.9.4
- // @require https://lib.baomitu.com/echarts/4.6.0/echarts.min.js
- // @require https://lib.baomitu.com/moment.js/2.24.0/moment.min.js
- // @require https://lib.baomitu.com/d3/5.15.0/d3.min.js
- // @grant GM_addStyle
- // @grant unsafeWindow
- // @grant GM_openInTab
- // @grant GM_xmlhttpRequest
- // @grant GM_notification
- // @license The MIT License (MIT); http://opensource.org/licenses/MIT
- // @connect 172.22.1.175
- // @connect 127.0.0.1:5000
- // @connect api.map.baidu.com
- // @connect trident.gdmo.gq
- // @connect research.gdmo.gq
- // @compatible firefox
- // @compatible chrome
- // @compatible edge
- // @note 2018/01/08 增加时效转换按钮
- // @note 2018/01/15 增加经纬度功能
- // @supportURL https://greasyfork.org/scripts/26259
- // @author Hanchy Hill
- // ==/UserScript==
- // TODO 数据格式错误时显示提示
- // TODO require resData
- // TODO 风向tooltip改进
- // TODO 增加气压
- // TODO 增加集合预报-32天预报
- // TODO 单站停止经纬度捕捉
- // TODO 分钟降水时时效切换错误
- // TODO 显示单击的点
- // TODO 垂直剖面NCL测试
- // TODO 垂直探空曲线
- // TODO 降水量, 风力分级
- // TODO 多图模式时次选择
- const modelMeta = [
- {
- "model": "grapes1km",
- "rule": "/{yyyymmdd}/{HH}/grapes1km_{range}_{name}_m{hhh}_{yyyy}{mm}{dd}{HH}{mi}.png",
- "modelName": "Grapes_gz_R_1km"
- },
- {
- "model": "grapesmeso_b",
- "rule": "grapesmeso_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_Meso"
- },
- {
- "model": "grapescma_b",
- "rule": "grapescma_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_全球"
- },
- {
- "model": "SCMOC",
- "rule": "SCMOC_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "客观短时预报"
- },
- {
- "model": "ecmwffine_b",
- "rule": "ecmwffine_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "ECMWF_细网格"
- },
- {
- "model": "ecmwfs2d_b",
- "rule": "ecmwfs2d_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "ECMWF_细网格(S2D)"
- },
- {
- "model": "ecmwfs2s",
- "rule": "ecmwfs2s_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "ECMWF细网格(S2S)"
- },
- {
- "model": "ecmwfc3e_b",
- "rule": "ecmwfc3e_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "ECMWF_集合"
- },
- {
- "model": "ecmwfs4f",
- "rule": "ecmwfs4f_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "ECMWF_32天"
- },
- {
- "model": "ecmwfEnsExt",
- "rule": "ecmwfEnsExt_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "ECMWF_46天"
- },
- {
- "model": "ecmwfc3y",
- "rule": "ecmwfc3y_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "ECMWF_C3Y"
- },
- {
- "model": "ncepgfs0p5",
- "rule": "ncepgfs0p5_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "NCEP"
- },
- {
- "model": "chaf",
- "rule": "chaf_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_gz_R_3km"
- },
- {
- "model": "GTRAMS3KMEC_b",
- "rule": "GTRAMS3KMEC_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_gz_3km"
- },
- {
- "model": "GTRAMS3KMNCEP_b",
- "rule": "GTRAMS3KMEC_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_gz_3km(N)"
- },
- {
- "model": "Gtrams3kmCNEC",
- "rule": "Gtrams3kmCN_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_gz_3km(CN)"
- },
- {
- "model": "Gtrams3kmCNGraGFS",
- "rule": "Gtrams3kmCN_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_gz_3km(G)"
- },
- {
- "model": "grapes9ec",
- "rule": "grapes9_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_gz_9km"
- },
- {
- "model": "grapes9",
- "rule": "grapes9_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_gz_9km(N)"
- },
- {
- "model": "grapes18kmec_b",
- "rule": "grapes18_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_gz_18km"
- },
- {
- "model": "grapes18km_b",
- "rule": "grapes18_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes_gz_18km(N)"
- },
- {
- "model": "wavepng_b",
- "rule": "wave_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes-海洋"
- },
- {
- "model": "seafog_b",
- "rule": "{name}{yyyy}{mm}{dd}{HH}result.gif",
- "modelName": "Grapes-海雾"
- },
- {
- "model": "graces_b",
- "rule": "graces_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "Grapes-环境"
- },
- {
- "model": "environment_b",
- "rule": "environment_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "CMA环境"
- },
- {
- "model": "fax_b",
- "modelName": "FAX传真图",
- "rule": ""
- },
- {
- "model": "obor_b",
- "rule": "ecmwfs2d_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "一带一路"
- },
- {
- "model": "clean_plot",
- "rule": "gz3km{yyyy}{mm}{dd}{HH}_{hhh}_{name}.png",
- "modelName": "Grapes_3km(CN)"
- },
- {
- "model": "cldas",
- "rule": "cldas_hn_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "国家局实况融合"
- },
- {
- "model": "OCEN_CODAS",
- "rule": "OCEN_CODAS_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "国家局海洋融合"
- },
- {
- "model": "SWMA",
- "rule": "swma_{range}_{name}_{hhh}_{yyyy}{mm}{dd}{HH}.png",
- "modelName": "热带所海面风融合"
- }
- ];
- let multiModelRule = [
- {
- rule: [
- ['ecmwffine_b', ['oy', 'cn', 'hn', 'gd',], null],
- ['ncepgfs0p5', ['oy', 'cn', 'hn', 'gd',], null],
- ['grapescma_b', ['oy', 'cn', 'hn', 'gd',], null],
- ['grapes9ec', ['oy', 'cn', 'hn', 'gd',], null],
- ],
- name: 'EC/NCEP/G全球/G9kmEC',
- description: 'ECMWF, NCEP, Grapes全球, 南海台风模式9km',
- opt: { stritFit: true }
- },
- {
- rule: [
- ['ecmwffine_b', ['oy', 'cn', 'hn', 'gd',], null],
- ['ncepgfs0p5', ['oy', 'cn', 'hn', 'gd',], null],
- ['grapes9ec', ['cn', 'hn', 'gd',], null],
- ['grapesmeso_b', ['cn', 'hn', 'gd',], null],
- ],
- name: 'EC/NCEP/G9kmEC/G-meso',
- description: 'ECMWF, NCEP, 南海台风模式9km, Grapes-Meso',
- opt: { stritFit: true }
- },
- {
- rule: [
- ['ecmwffine_b', ['oy', 'cn', 'hn', 'gd',], null],
- ['ncepgfs0p5', ['oy', 'cn', 'hn', 'gd',], null],
- ['grapes9ec', ['cn', 'hn', 'gd',], null],
- ['GTRAMS3KMEC_b', ['hn', 'gd',], null],
- ],
- name: 'EC/NCEP/G9kmEC/G-meso',
- description: 'ECMWF, NCEP, 南海台风模式9km, Grapes-Meso',
- opt: { stritFit: true }
- },
- ]
- let mvPatternList = [
- [{
- "elem": "t2mm",
- "elemCN": "2m气温",
- "region": "cn",
- "model": "ecmwffine_b",
- "modelFileName": "ecmwffine"
- },
- {
- "elem": "t2mm24",
- "elemCN": "2m气温24h变温",
- "region": "cn",
- "model": "ecmwffine_b",
- "modelFileName": "ecmwffine"
- },
- {
- "elem": "wind10m",
- "elemCN": "10m风",
- "region": "cn",
- "model": "ecmwffine_b",
- "modelFileName": "ecmwffine"
- },
- {
- "elem": "10gust3",
- "elemCN": "10m阵风(过去3h)",
- "region": "cn",
- "model": "ecmwffine_b",
- "modelFileName": "ecmwffine"
- }]
- ]
- let userConfig = { // 用户设置
- alterDate: false, // 默认不修改时次
- timelineMove: false,//是否启用滑动时间触发
- debug: false,
- mvMode:undefined,
- };
- let $ = unsafeWindow.$;
- const elemsConfig = {
- latLonInput: undefined,
- $doc: () => unsafeWindow.$doc,
- $settings: () => unsafeWindow.$settings,
- $home: unsafeWindow.$home,
- fixPoint: undefined,
- pointerPoint: { lat: 0, lon: 0 },// 地图锚点位置
- point01: undefined,
- point02: undefined,
- state: 'timeseries',//'vertical','skewT'
- compareImgDOM: { img: [], info: [] },//前后预报时次对比DOM引用
- mvImgDOM: {//四分图DOM引用
- img: [],
- info: [],
- mode: 'multiElem',//multiTime, multiModel, multiElem,multiInitime
- matchedSrcList: [],
- matchPattens: [{
- "elem": "t2mm",
- "elemCN": "2m气温",
- "region": "cn",
- "model": "ecmwffine_b",
- "modelFileName": "ecmwffine"
- },
- {
- "elem": "t2mm24",
- "elemCN": "2m气温24h变温",
- "region": "cn",
- "model": "ecmwffine_b",
- "modelFileName": "ecmwffine"
- },
- {
- "elem": "wind10m",
- "elemCN": "10m风",
- "region": "cn",
- "model": "ecmwffine_b",
- "modelFileName": "ecmwffine"
- },
- {
- "elem": "10gust3",
- "elemCN": "10m阵风(过去3h)",
- "region": "cn",
- "model": "ecmwffine_b",
- "modelFileName": "ecmwffine"
- },],
- },
- };
- let proxyConfig = new Proxy({
- showTcMode: false,
- showDetTcMode: true,
- showEnsTcMode: true,
- tcShowLock: false,
- preTime: '',
- preRegion: '',
- domTarget: {
- showTcMode: '#tc-mode-btn',
- showDetTcMode: '#tc-det-btn',
- showEnsTcMode: '#tc-ens-btn',
- },
- svgTarget: {
- showTcMode: '#wrap-draw-tc > svg',
- showDetTcMode: '#wrap-draw-tc > svg .svg-tc-det',
- showEnsTcMode: '#wrap-draw-tc > svg .svg-tc-ens',
- }
- }, {
- set: function (obj, prop, value, receiver) {
- if (prop === 'tcShowLock') return;
- const tcShowDom = document.querySelector(obj.domTarget.showTcMode);
- obj[prop] = value;
- // console.error(obj.showDetTcMode);
- // console.error(obj.showEnsTcMode);
- if (prop === 'showTcMode') {
- let detDom = document.querySelector(obj.domTarget['showDetTcMode']);
- let ensDom = document.querySelector(obj.domTarget['showEnsTcMode']);
- if (value === true) {
- tcShowDom.classList.add('active-button');
- detDom.classList.remove('display-none');
- ensDom.classList.remove('display-none');
- if (obj.showDetTcMode || obj.showEnsTcMode) showSvgTC();
- // 如果全为false则不执行showSvgTC();
- // TODO 显示SVG
- // 重绘SVG
- } else {
- tcShowDom.classList.remove('active-button');
- detDom.classList.add('display-none');
- ensDom.classList.add('display-none');
- let svgTC = document.querySelector('#wrap-draw-tc');
- if (svgTC) svgTC.classList.add('display-none');
- }
- } else if (prop == 'showDetTcMode' || prop == 'showEnsTcMode') {
- let targetDom = document.querySelector(obj.domTarget[prop]);
- if (value === true) {
- targetDom.classList.add('active-button');
- showSvgTC();
- } else {
- targetDom.classList.remove('active-button');
- let targetSvgGroup = document.querySelector(obj.svgTarget[prop]);
- if (targetSvgGroup) targetSvgGroup.classList.add('display-none');
- if (!obj.showDetTcMode && !obj.showEnsTcMode) {// 全为flase则取消台风选择
- receiver.showTcMode = false;
- }
- // svg-tc-ens
- // TODO 隐藏对应的<g>元素
- }
- }
- }
- })
- const helperConfig = {
- region: {
- hn: {//华南
- isMap: true,// 是否是等经纬地图
- projection: 'Equidistant',// 投影
- latLon: {
- xRight: 636.98, xLeft: 172.56,
- yTop: 56.516, yBottom: 547.576,
- lon0: 105.0, lon1: 120.0,
- lat0: 15.0, lat1: 30.0,
- },
- },
- cn: {//中国
- isMap: true,// 是否是等经纬地图
- projection: 'Lambert',
- latLon: {
- refLon0: 110.25, refLat0: 20,
- m0: 342.98333, n0: 382.51666,
- // refLon0:110,refLat0:20,
- // m0:338.98,n0:382.51,
- refLat1: 1.001, refLat2: 25.0,
- lonr: 80, latr: 40,
- mr: 94.983, nr: 167.51,
- },
- },
- oy: {//欧亚
- isMap: true,// 是否是等经纬地图
- projection: 'Mercator',
- latLon: {
- xRight: 692.9833, xLeft: 156.9833,
- yTop: 54.51666, yBottom: 533.51666,
- lon0: 60.0, lon1: 160.0,
- lat0: 10.0, lat1: 70.0,
- },
- },
- gd: {//广东
- isMap: true,// 是否是等经纬地图
- projection: 'Equidistant',// 投影
- latLon: {
- xRight: 589.98334, xLeft: 124.98334,
- yTop: 104.51666, yBottom: 437.51666,
- lon0: 110, lon1: 116,
- lat0: 21.0, lat1: 25.0,
- },
- },
- hy: {//海洋
- isMap: true,// 是否是等经纬地图
- projection: 'Lambert',// 投影
- latLon: {
- refLon0: 110, refLat0: 0,
- m0: 274.983, n0: 490.51666,
- refLat1: 1.001, refLat2: 25.0,
- lonr: 100, latr: 20,
- mr: 171.983, nr: 270.51666,
- },
- },
- '86st': {//单站
- isMap: false,
- },
- rainnest: {//雨涡
- isMap: false,
- },
- '5pro': {//雨涡
- isMap: false,
- },
- },
- currentRegion: 'hn',
- matchImgXY: () => { },// 根据经纬度获取图像位置
- matchLoc: () => { },// 获取经纬度的函数
- matchParam: '',// 调用上式的第二参数
- };
- //
- /**
- * unsafeWindow函数
- * selectProItem
- */
- const utils = {
- log(arg) {
- userConfig.debug ? console.log(arg) : '';
- },
- changeRegion(region) {
- helperConfig.currentRegion = region;
- return helperConfig.region[region].isMap;// 返回是否是地图
- },
- getJSON(url) {// 获取json数据
- return new Promise(function (resolve, reject) {
- GM_xmlhttpRequest({ //获取时间序列
- method: 'GET',
- synchronous: false,
- url: url,
- onload: function (reDetails) {
- if (reDetails.status !== 200 && reDetails.status !== 304) {
- console.error('获取URL错误');
- // showNotification('数据中心数据获取异常');
- let errorNotice = GM_notification({ text: '数据获取异常' + url, image: 'http://10.148.8.228/images/logo.png', title: '接口异常', timeout: 3000 });
- if (errorNotice) setTimeout(() => errorNotice.remove(), 3000);
- reject(new Error('数据获取异常' + url));
- }
- const data = JSON.parse(reDetails.responseText);
- //console.log(data.DATA);
- resolve(data);
- }
- });
- })
- },
- projection: {
- Mercator: {// 墨卡托投影
- calBasicInfo(lat1 = 0, lat2 = 0, n1 = 0, n2 = 0) {
- /*参数lat 纬度, n坐标数值
- n0 赤道,d0放大系数
- */
- const y1 = Math.log(Math.tan(lat1) + 1 / Math.cos(lat1));
- const y2 = Math.log(Math.tan(lat2) + 1 / Math.cos(lat2));
- const n0 = (n1 - (y1 / y2) * n2) / (1.0 - y1 / y2);
- const d0 = y1 / (n0 - n1);
- return { n0, d0 };
- },
- calLatLon(mouseXY, dims) {
- // console.log(dims);
- const n0 = dims.n0;
- const d0 = dims.d0;
- // console.log(Math.sinh((n0-mouseXY.y)*d0));
- const lat = Math.atan(Math.sinh((n0 - mouseXY.y) * d0));
- ///---------------//
- const r = dims.xLeft;
- const o = dims.xRight;
- const s = (dims.lon1 - dims.lon0) / (o - r);
- const u = dims.lon0 + (mouseXY.x - r) * s;
- return { lat: lat * 180 / Math.PI, lon: u };
- },
- calImgLoc(latlon, dims = { xLeft, xRight, lon1, lon0, n0, d0 }) {
- const n0 = dims.n0;
- const d0 = dims.d0;
- const sec = (x = 0) => 1 / Math.cos(x);// 正割
- const lon = latlon.lon;
- const r = dims.xLeft;
- const o = dims.xRight;
- const s = (dims.lon1 - dims.lon0) / (o - r);
- const x = (lon - dims.lon0) / s + r;
- const phi = latlon.lat / 180 * Math.PI;
- const y = n0 - Math.log(Math.tan(phi) + sec(phi)) / d0;
- const mouseXY = { x, y };
- return mouseXY;
- },
- },
- Equidistant: {//等经纬度
- calBasicInfo() {
- return helperConfig.region[helperConfig.currentRegion].latLon
- },
- calLatLon(mouseXY, dims) {
- // console.log(dims);
- const r = dims.xLeft;
- const o = dims.xRight;
- const i = dims.yTop;
- const l = dims.yBottom;
- const s = (dims.lon1 - dims.lon0) / (o - r); // o - r 内框宽度 -> s = lon/height
- const d = (dims.lat1 - dims.lat0) / (i - l);// i - l 内框高度 -> d = lat/width
- const u = dims.lon0 + (mouseXY.x - r) * s;
- const m = dims.lat1 + (mouseXY.y - i) * d;
- return { lat: m, lon: u };
- },
- calImgLoc(latlon = { lat, lon }, dims) {
- const r = dims.xLeft;
- const o = dims.xRight;
- const i = dims.yTop;
- const l = dims.yBottom;
- const s = (dims.lon1 - dims.lon0) / (o - r); // o - r 内框宽度 -> s = lon/height
- const d = (dims.lat1 - dims.lat0) / (i - l);// i - l 内框高度 -> d = lat/width
- const lat = latlon.lat;
- const lon = latlon.lon;
- const x = (lon - dims.lon0) / s + r;
- const y = (lat - dims.lat1) / d + i;
- const mouseXY = { x, y };
- return mouseXY;
- },
- },
- Lambert: {// 兰伯特投影
- calBasicInfo({ refLon0, refLat0, m0, n0, refLat1, refLat2, lonr, latr, mr, nr }) {
- /*
- refLat0,refLon0,m0,n0 参考纬度、经度,屏幕X坐标,Y坐标;
- 屏幕坐标与实际坐标映射:
- x = (m-m0)*dx // dx为x方向比例系数
- y = (n0-n)*dy // dy为y方向比例系数,y方向屏幕坐标反向,所以取反
- refLat1,refLat2 2个平行纬度
- latr,lonr,mr,nr 选取的另外一个点的经纬度和屏幕坐标
- phi 纬度,lambda经度
- */
- const ang2rad = (x = 0) => Math.PI * x / 180.0;
- const [phi0, phi1, phi2] = [ang2rad(refLat0), ang2rad(refLat1), ang2rad(refLat2)];
- //console.log(phi0,phi1,phi2);
- const lambda0 = ang2rad(refLon0);
- const [tan, cos, sin, pow, PI, ln] = [Math.tan, Math.cos, Math.sin, Math.pow, Math.PI, Math.log];
- const cot = (x = 0) => Math.cos(x) / Math.sin(x);// 余切
- const sec = (x = 0) => 1 / Math.cos(x);// 正割
- const n = ln(cos(phi1) * sec(phi2)) / ln(tan(0.25 * PI + 0.5 * phi2) * cot(0.25 * PI + 0.5 * phi1));
- const F = (cos(phi1) * pow(tan(0.25 * PI + 0.5 * phi1), n)) / n;
- // n,F常量参数
- let rho = (phi = 0) => F * pow(cot(0.25 * PI + 0.5 * phi), n); // rho变量
- let rho0 = rho(phi0);
- let fx = (phi, lambda) => rho(phi) * sin(n * (lambda - lambda0));
- let fy = (phi, lambda) => rho0 - rho(phi) * cos(n * (lambda - lambda0));
- const dx = fx(ang2rad(latr), ang2rad(lonr)) / (mr - m0);
- const dy = fy(ang2rad(latr), ang2rad(lonr)) / (n0 - nr);
- // console.log(dx,dy);
- return { dx, dy, F, n, rho, rho0, lambda0, m0, n0 };
- },
- calLatLon(mouseXY, { dx, dy, F, n, rho0, lambda0, m0, n0 }) {
- const x = (mouseXY.x - m0) * dx;
- const y = (n0 - mouseXY.y) * dy;
- let rho = (x, y) => Math.sign(n) * Math.sqrt(Math.pow(x, 2) + Math.pow((rho0 - y), 2));
- let theta = (x, y) => Math.atan(x / (rho0 - y));
- let phi = (rho) => 2 * Math.atan(Math.pow(F / rho, 1 / n)) - 0.5 * Math.PI;
- let lambda = (theta) => lambda0 + theta / n;
- const lat = phi(rho(x, y)) * 180 / Math.PI;
- const lon = lambda(theta(x, y)) * 180 / Math.PI;
- // console.log(mouseXY.x-m0,n0-mouseXY.y);
- //console.log(mouseXY.x - m0,n0-mouseXY.y);
- return { lat, lon };
- },
- calImgLoc(latlon, { dx, dy, rho = () => { }, rho0, m0, n0, lambda0, n }) {
- const [cos, sin, PI] = [Math.cos, Math.sin, Math.PI];
- const phi = latlon.lat * PI / 180;
- const lambda = latlon.lon * PI / 180;
- const originX = (phi, lambda) => rho(phi) * sin(n * (lambda - lambda0));
- const originY = (phi, lambda) => rho0 - rho(phi) * cos(n * (lambda - lambda0));
- let mouseXY = { x: 0, y: 0 };
- mouseXY.x = originX(phi, lambda) / dx + m0;
- mouseXY.y = n0 - originY(phi, lambda) / dy;
- return mouseXY;
- }
- }
- },
- debounce: (fn, delay, scope) => {
- let timer = null;
- // 返回函数对debounce作用域形成闭包
- return function () {
- // setTimeout()中用到函数环境总是window,故需要当前环境的副本;
- let context = scope || this, args = arguments;
- // 如果事件被触发,清除timer并重新开始计时
- clearTimeout(timer);
- timer = setTimeout(function () {
- fn.apply(context, args);
- }, delay);
- }
- },
- throttle(fn, threshold, scope) {
- let timer;
- let prev = Date.now();
- return function () {
- let context = scope || this, args = arguments;
- let now = Date.now();
- if (now - prev > threshold) {
- prev = now;
- fn.apply(context, args);
- }
- }
- },
- showSkewT(point = { lat: 21, lon: 120 }, runtime = '2019012018', fcHour = '18') {
- const latRange = [point.lat - 0.125 * 2, point.lat + 0.125 * 2];
- const lonRange = [point.lon - 0.125 * 2, point.lon + 0.125 * 2];
- let fcTime = utils.getFcTime();
- const initTime = moment(fcTime.date + fcTime.hr, 'YYYY-MM-DDHH');
- runtime = initTime.format('YYYYMMDDHH');
- fcHour = fcTime.fcHour;
- GM_openInTab(`https://www.tropicaltidbits.com/analysis/models/sounding/?model=gfs&runtime=${runtime}&fh=${fcHour}&domain=${lonRange[0].toFixed(2)},${lonRange[1].toFixed(2)},${latRange[0].toFixed(2)},${latRange[1].toFixed(2)}&stationID=&tc=&mode=regular`);
- // https://www.tropicaltidbits.com/analysis/models/sounding/?model=gfs&runtime=2018122418&fh=18&domain=120,122.5,20,22.5&stationID=&tc=&mode=regular
- },
- showVertical(p0 = { lat: 21, lon: 120 }, p1 = { lat: 23, lon: 130 }, runtime = '2019012018', fcHour = '18') {
- let fcTime = utils.getFcTime();
- const initTime = moment(fcTime.date + fcTime.hr, 'YYYY-MM-DDHH');
- runtime = initTime.format('YYYYMMDDHH');
- fcHour = fcTime.fcHour;
- let type = 'RH_and_Omega';//[FGEN,_%CE%B8%E2%82%91,_Omega,RH_and_Omega,Normal_Wind,In-Plane_Wind]
- GM_openInTab(`https://www.tropicaltidbits.com/analysis/models/xsection/?model=gfs&runtime=${runtime}&fh=${fcHour}&p0=${p0.lat.toFixed(2)},${p0.lon.toFixed(2)}&p1=${p1.lat.toFixed(2)},${p1.lon.toFixed(2)}&type=${type}&tc=`);
- // https://www.tropicaltidbits.com/analysis/models/xsection/?model=gfs&runtime=2018122500&fh=6&p0=31.23,-113.14&p1=39.72,-95.24&type=FGEN,_%CE%B8%E2%82%91,_Omega&tc=
- },
- showCross(p0 = { lat: 21, lon: 120 }, p1 = { lat: 23, lon: 130 }, runtime = '2020112812', fcHour = '18') {
- let fcTime = utils.getFcTime();
- const initTime = moment(fcTime.date + fcTime.hr, 'YYYY-MM-DDHH');
- runtime = initTime.format('YYYYMMDDHH');
- fcHour = fcTime.fcHour;
- // let type = 'RH_and_Omega';//[FGEN,_%CE%B8%E2%82%91,_Omega,RH_and_Omega,Normal_Wind,In-Plane_Wind]
- // GM_openInTab(`https://www.tropicaltidbits.com/analysis/models/xsection/?model=gfs&runtime=${runtime}&fh=${fcHour}&p0=${p0.lat.toFixed(2)},${p0.lon.toFixed(2)}&p1=${p1.lat.toFixed(2)},${p1.lon.toFixed(2)}&type=${type}&tc=`);
- GM_openInTab(`https://research.gdmo.gq/cross?source=ecmwf&method=cross&latA=${p0.lat.toFixed(2)}&lonA=${p0.lon.toFixed(2)}&latB=${p1.lat.toFixed(2)}&lonB=${p1.lon.toFixed(2)}&elems=rhum,uv&level=1000,200&initTime=${runtime}&fc=${fcHour}`);
- },
- showTimeSeries(point = { lat: 21, lon: 120 }) {
- utils.log(point);
- // showSvgTC()
- // .catch(err=>{
- // console.error(err);
- // });
- if (point.mouseXY) {
- const elem = document.getElementById('map-pointer');
- elem.style.marginLeft = point.mouseXY.x + 29.31 + 'px';
- elem.style.marginTop = point.mouseXY.y - 33.066 + 'px';
- }
- const fcTime = utils.getFcTime();
- const initTime = moment(fcTime.date + fcTime.hr, 'YYYY-MM-DDHH');
- const sT = initTime.format('YYYY-MM-DD%20HH:mm:ss');
- const eT = moment(initTime).add(10 * 24, 'hours').format('YYYY-MM-DD%20HH:mm:ss');
- point.lat = utils.fix2Grid(point.lat);
- point.lon = utils.fix2Grid(point.lon);//取格点位置
- getTimeSeries(model = 'ecmwfthin',
- sT, eT,
- lon = point.lon, lat = point.lat,
- eles = ['t2mm', 'mn2t', 'mx2t', 'u10m', 'v10m', 'tcco', 'lcco', 'tppm']);
- },
- fix2Grid(number, interval = 0.125) {
- let fixNum = Math.round(number / interval) * interval;
- return fixNum;
- },
- getFcTime() {
- const fcHour = typeof (unsafeWindow.forecastHour) === 'string' ? unsafeWindow.forecastHour : unsafeWindow.forecastHour[0];
- let idate = unsafeWindow.$settings.date;
- if (!idate.length) throw new Error('日期为空错误');
- if (idate[6] == '-') idate = idate.slice(0, 5) + '0' + idate.slice(5);
- if (idate.length === 9) idate = idate.slice(0, 8) + '0' + idate.slice(8);
- const hr = unsafeWindow.$settings.HH;
- return { date: idate, hr, fcHour };//format->date:'2019-01-22;, hr:'12';fcHour:'000'
- },
- getTimeSeries(point = { lat: 21, lon: 115 }, model = 'giftdaily', eles = [t2mm, tmax, tmin], start = '2014-11-22%2000:00:00') {
- //http://172.22.1.175/di/grid.action?userId=sqxt&pwd=shengqxt123&interfaceId=intGetMultElesDataTimeSerial&dataFormat=xml2&modelid=giftdaily&element=t2mm%20tmax%20tmin&level=1000&starttime=2014-11-22%2000:00:00&endtime=2014-11-25%2000:00:00&lon=113.5&lat=24.5
- },
- calWind(u10, v10) {
- const iSpeed = Math.sqrt(Math.pow(u10, 2) + Math.pow(v10, 2));//风速
- const iR = Math.sign(v10) * Math.acos(u10 / iSpeed);//标准坐标系弧度
- const arrowR = iR - Math.PI / 2;//矢量箭头偏移弧度
- let northDir = -(iR + Math.PI - Math.PI / 2);//与北向的角度差
- if (northDir < 0) {
- northDir = northDir + Math.PI * 2;
- }
- const dir = northDir / Math.PI * 180;
- if (dir > 360) dir = dir - 360;
- return { speed: iSpeed, rotation: arrowR, northDir: northDir };
- },
- renderArrow(param, api) {
- let arrowSize = 10;
- var point = api.coord([
- api.value(2),//dims.timeIndex
- api.value(0)//5//api.value(dims.windSpeed)
- ]);
- return {
- type: 'path',
- shape: {
- //pathData: 'M31 16l-15-15v9h-26v12h26v9z',
- pathData: 'M250 0 L140 350 L250 250 L360 350 Z',
- x: -arrowSize / 2,
- y: -arrowSize / 2,
- width: arrowSize,
- height: arrowSize
- },
- rotation: api.value(1),//api.value(dims.R),//Math.PI / 8 * index;
- position: point,
- style: api.style({
- stroke: '#555',
- lineWidth: 1,
- fill: 'green',
- })
- };
- },
- createElement(type = 'div', props = {}) {
- let newEle = document.createElement(type);
- for (let attr in props) {
- newEle.setAttribute(attr, props[attr]);
- }
- return newEle;
- },
- getImgNow(imgSrc) {
- // TODO 改进匹配规则
- let fcTime = utils.getFcTime();
- //const initTime = moment(fcTime.date+fcTime.hr,'YYYY-MM-DDHH');
- // runtime = initTime.format('YYYYMMDDHH');
- fcHour = fcTime.fcHour;
- let url = imgSrc || unsafeWindow.imgSrc[fcHour];
- if (!url) throw new Error('无法获取初始图像');
- // url = 'http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/20190128/ecmwffine_hn_mslp_000_2019012800.png';
- const reg = /(http:.*?\/)(\d{8})(.*?_)(\d+)_(\d+)(.*?$)/;
- const matchUrl = url.match(reg);
- /*0: "http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/20190128/ecmwffine_hn_mslp_030_2019012800.png"
- 1: "http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/"
- 2: "20190128"
- 3: "/ecmwffine_hn_mslp_"
- 4: "030"
- 5: "2019012800"
- 6: ".png"
- index: 0
- input: "http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/20190128/ecmwffine_hn_mslp_030_2019012800.png"
- length: 7 */
- const base = [matchUrl[1], matchUrl[3], matchUrl[6]];
- const model = base[0].match(/znwp\/(.*?)\//)[1];
- // console.log(base[1]);
- const eleName = base[1].match(/_.*?_(.+?)_$/)[1];
- const date = matchUrl[2];
- const hour = matchUrl[4];
- const initDate = matchUrl[5];
- const imgInfo = {
- url,
- date,
- base,
- hour,
- initDate,
- model,
- eleName,
- getUrl(date = date, hour = hour, initDate = initDate) {
- return base[0] + date + base[1] + hour + '_' + initDate + base[2];
- }
- }
- return imgInfo;
- },
- matchImgPattern(pat = { elem: "t2mm", elemCN: "2m气温", region: "cn", model: "ecmwffine_b", modelFileName: "ecmwffine" }) {
- let base0 = `http://10.148.8.228/files_home/znwp/${pat.model}/${pat.region}/`;
- let base1 = `/${pat.modelFileName}_${pat.region}_${pat.elem}_`;
- return {
- // base:['http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/','/ecmwffine_hn_mslp_','.png'],
- base: [base0, base1, '.png'],
- };
- },
- getImgUrl(base, date, hour, initDate) {
- return base[0] + date + base[1] + hour + '_' + initDate + base[2];
- },
- paddingInt(num, length = 3) {
- //这里用slice和substr均可
- return (Array(length).join("0") + num).slice(-length);
- },
- getElemRelPos(e, t, n) {// e.target, e.clientX, e.clientY
- var a = e.getBoundingClientRect(),
- r = getComputedStyle(e);
- return {
- x: t - (a.left + parseFloat(r.paddingLeft) + parseFloat(r.borderLeftWidth)),
- y: n - (a.top + parseFloat(r.paddingTop) + parseFloat(r.borderTopWidth))
- };
- },
- };
- var NWP_init = function () {
- var fcHour = document.getElementById('forecast_hour');
- var iniTime = document.getElementById('create_day');
- var infoBar = document.getElementById('pic_info');
- var referNode = document.getElementById('to_contrast');
- var divTime = document.createElement('span');
- divTime.textContent = 'hello world';
- divTime.setAttribute('class', 'lcTime');
- divTime.style.position = 'relative';
- divTime.style.float = 'right';
- divTime.style.right = '120px';
- infoBar.insertBefore(divTime, referNode);
- // document.querySelector("#forecast_hours div").textContent = "日期";
- // create an observer instance
- var UTC8 = new MutationObserver(function (mutations) {
- // TODO 对分钟变化变量的修正
- var dateString = iniTime.textContent.match(/(\d+).*?(\d+).*?(\d+).*?(\d+)/);
- var fcDate = [];
- fcDate[0] = Number(dateString[1]);
- fcDate[1] = Number(dateString[2]);
- fcDate[2] = Number(dateString[3]);
- fcDate[3] = Number(dateString[4]);
- fcDate[4] = Number(fcHour.textContent.match(/\d+/));
- fcDate[5] = new Date(fcDate[0], fcDate[1] - 1, fcDate[2], fcDate[3] + fcDate[4] + 8);
- var localTime = String(fcDate[5].getMonth() + 1) + '月' + fcDate[5].getDate() +
- '日' + fcDate[5].getHours() + '时 GMT+8';
- divTime.textContent = localTime;
- });
- // configuration of the observer:
- var config = {
- attributes: true,
- childList: true,
- characterData: true
- };
- UTC8.observe(fcHour, config);
- // later, you can stop observing
- //observer.disconnect();
- //
- //
- /////////////////////////////////////////////////////////////
- //
- ///
- ////////////////////修改时效列/////////////////////////////////////////
- var alterTimelist = function (mutations) {
- //alert(timeBar.length);
- // console.log('修改时效');
- if (userConfig.timelineMove) {
- timeMoveOver();//是否启用滑动时间触发
- }
- if (!userConfig.alterDate) return; // 不修改则直接返回
- var dateString = iniTime.textContent.match(/(\d+).*?(\d+).*?(\d+).*?(\d+)/);
- var fcDate = [];
- fcDate[0] = Number(dateString[1]);
- fcDate[1] = Number(dateString[2]);
- fcDate[2] = Number(dateString[3]);
- fcDate[3] = Number(dateString[4]);
- for (let i = 0; i < timeBar.length; i++) {
- let oValue = timeBar[i].value;
- fcDate[4] = Number(timeBar[i].value);
- fcDate[5] = new Date(fcDate[0], fcDate[1] - 1, fcDate[2], fcDate[3] + fcDate[4] + 8);
- let iday = String(fcDate[5].getDate());
- iday = Array(2 > iday.length ? 2 - iday.length + 1 || 0 : 0).join(0) + iday;
- let ihour = String(fcDate[5].getHours());
- ihour = Array(2 > ihour.length ? 2 - ihour.length + 1 || 0 : 0).join(0) + ihour;
- let localTime = iday + ' ' + ihour + ' ;';
- let styleText = '#' + timeBar[i].getAttribute("id") + ':before{white-space:pre;content: " ' + localTime + ' "}';
- GM_addStyle(styleText);
- switch (fcDate[5].getHours()) {
- // case 5:
- // timeBar[i].style.cssText = "border-left:2px solid #9B30FF";
- // break;
- // case 14:
- // timeBar[i].style.cssText = "border-left:2px solid #EE3B3B";
- // break;
- case 20:
- timeBar[i].style.cssText = "border-bottom:1px dotted #8E8E8E;border-left:2px solid #ffffff;";
- break;
- default:
- timeBar[i].style.cssText = "border-left:2px solid #ffffff;";
- }
- }
- };
- /////////////////////////////////////////////////////////////
- ///
- var selectObserver = new MutationObserver(alterTimelist);
- // configuration of the observer:
- var timeBar = document.querySelector("#forecast_hours select");
- var config2 = {
- attributes: false,
- childList: true,
- characterData: false,
- };
- selectObserver.observe(timeBar, config2);
- GM_addStyle("#forecast_hours option{width: 50px!important; overflow: hidden!important;}");
- //-----------------------------------------------------------------------------//
- //-- 添加多模式、多要素按钮mvBtnObesrver, initMvMode---//
- let imgObserver = new MutationObserver(fitImgLoc);
- imgObserver.observe(timeBar, config2);
- //-----------------------------------绑定坐标-----------------------------------//
- function fitImgLoc() { // 绑定img包含的div元素
- const isMap = utils.changeRegion(unsafeWindow._region); // 改变地图;
- // console.log(isMap);
- if (!isMap) {
- proxyConfig.showTcMode = false;
- return; // TODO 不是地图需要去除掉经纬度计算
- } else {
- if (proxyConfig.showTcMode) {
- let currentFcTime = utils.getFcTime();
- let currentTime = currentFcTime.date + currentFcTime.hr;
- let currentRegion = unsafeWindow._region;
- console.log(currentTime, proxyConfig.preTime);
- console.log(currentRegion, proxyConfig.preRegion);
- if (currentTime != proxyConfig.preTime || currentRegion != proxyConfig.preRegion) {
- showSvgTC(); // 绘制台风
- } else {
- '';
- }
- }
- /////TODO 判断地图逻辑分离, 不是地图应该取消掉交互模式和latlon显示功能
- const currMap = helperConfig.region[helperConfig.currentRegion];
- const currProjection = currMap.projection;
- //let matchLoc = ({});
- //let param = ({});
- switch (currProjection) {
- case 'Mercator': {
- const dims = currMap.latLon;
- const lat1 = Math.PI / 180.0 * dims.lat0;
- const lat2 = Math.PI / 180.0 * dims.lat1;
- const n1 = dims.yBottom;
- const n2 = dims.yTop;
- // console.log(dims);
- const param1 = utils.projection.Mercator.calBasicInfo(
- lat1, lat2, n1, n2
- );
- helperConfig.matchParam = {
- ...param1,
- xRight: dims.xRight,
- xLeft: dims.xLeft,
- lon0: dims.lon0,
- lon1: dims.lon1,
- };
- // console.log(helperConfig.matchParam);
- helperConfig.matchLoc = utils.projection.Mercator.calLatLon;
- helperConfig.matchImgXY = utils.projection.Mercator.calImgLoc;
- break;
- }
- case 'Lambert': {
- const LamDim = currMap.latLon;
- /* const LamParam1 =
- [ LamDim.refLon0, LamDim.refLat0, LamDim.m0, LamDim.n0,
- LamDim.refLat1, LamDim.refLat2,
- LamDim.lonr, LamDim.latr, LamDim.mr, LamDim.nr]; */
- const LamParam2 = utils.projection.Lambert.calBasicInfo(LamDim);
- // console.log(LamParam2);
- helperConfig.matchParam = LamParam2;
- helperConfig.matchLoc = utils.projection.Lambert.calLatLon;
- helperConfig.matchImgXY = utils.projection.Lambert.calImgLoc;
- break;
- }
- default:
- helperConfig.matchParam = currMap.latLon;
- helperConfig.matchLoc = utils.projection.Equidistant.calLatLon;
- helperConfig.matchImgXY = utils.projection.Equidistant.calImgLoc;
- break;
- }
- //let wrapDiv = document.querySelector('#pic_frame div');
- let wrapDiv = document.querySelector('#pic_frame');
- // document.addEventListener('keyup', console.log(elemsConfig.fixPoint));
- if (wrapDiv) {
- wrapDiv.addEventListener('mousemove', utils.debounce(getMouseLatLon, 100));
- // wrapDiv.addEventListener('mousemove', getMouseLatLon);
- // console.log(wrapDiv.clientWidth);// offsetWidth , clientWidth, scrollWidth
- }
- }
- }
- function getElemRelPos(e, t, n) {// e.target, e.clientX, e.clientY
- var a = e.getBoundingClientRect(),
- r = getComputedStyle(e);
- /**
- * e.getBoundingClientRect()
- * bottom: 916.1999969482422
- height: 716
- left: 686.9000244140625
- right: 1565.1333618164062
- top: 200.1999969482422
- width: 878.2333374023438
- x: 686.9000244140625
- y: 200.1999969482422
- borderLeftWidth: "1px"
- borderTopWidth: "1px"
- paddingLeft: "0px"
- paddingTop: "0px"
- */
- return {
- x: t - (a.left + parseFloat(r.paddingLeft) + parseFloat(r.borderLeftWidth)),
- y: n - (a.top + parseFloat(r.paddingTop) + parseFloat(r.borderTopWidth))
- };
- }
- function getMouseLatLon(event) {
- // console.log(event);
- // console.log(event.target);
- // let target = event.target;//
- let target = document.querySelector('#pic_frame img[style~="inline;"]');//
- // console.log(target);
- const mouseXY = getElemRelPos(target, event.clientX, event.clientY); // 相对图像的像素位置{x,y}
- const loc = helperConfig.matchLoc(mouseXY, helperConfig.matchParam);
- elemsConfig.latLonInput.lat.innerHTML = loc.lat; // mouseXY.y
- elemsConfig.latLonInput.lon.innerHTML = loc.lon; // mouseXY.x
- // elemsConfig.latLonInput.lat.innerHTML = mouseXY.y
- // elemsConfig.latLonInput.lon.innerHTML = mouseXY.x
- elemsConfig.fixPoint = { lat: loc.lat, lon: loc.lon, mouseXY };
- return { lat: loc.lat, lon: loc.lon, mouseXY };
- }
- //------------------------------24小时跳跃-------------------------------------//
- const timeJump = function () {
- //var hourBar = document.getElementById('from_hour');float-l
- var jumpParent = document.querySelector('.float-l');
- var pre24 = document.createElement('button');
- pre24.addEventListener("click", function () { timeTrigger(-24); });
- pre24.textContent = "-24";
- jumpParent.appendChild(pre24);
- var next24 = document.createElement('button');
- next24.addEventListener("click", function () { timeTrigger(24); });
- next24.textContent = "+24";
- jumpParent.appendChild(next24);
- var timeTrigger = function (timer) {
- let selectedVal = timeBar[timeBar.selectedIndex].getAttribute("data-hour");
- let nextVal = String(Number(selectedVal) + timer);
- var posi = 3;
- nextVal = Array(posi > nextVal.length ? posi - nextVal.length + 1 || 0 : 0).join(0) + nextVal;
- let nextopt = timeBar.querySelector("#option_" + nextVal);
- //alert(nextopt);
- if (!nextopt) return;
- timeBar[timeBar.selectedIndex].selected = false;
- nextopt.selected = true;
- // var changeEvt = document.createEvent('HTMLEvents');
- // changeEvt.initEvent('change',true,true);
- // timeBar.dispatchEvent(changeEvt);
- var changeEvt = new Event('change', { 'bubbles': true });
- timeBar.dispatchEvent(changeEvt);
- };
- };
- timeJump();
- /////切换时效
- function switchDate() {
- userConfig.alterDate = !userConfig.alterDate;
- if (userConfig.alterDate) {
- switchDateBtn.textContent = "切换成时效";
- alterTimelist();
- }
- else {
- switchDateBtn.textContent = "切换成日期";
- for (let ele of timeBar) {
- ele.style.cssText = '';
- let styleText = '#' + ele.getAttribute("id") + ':before{white-space:pre;content: ""}';
- GM_addStyle(styleText);
- }
- }
- }
- var switchParent = document.querySelector('.float-l');
- let switchDateBtn = document.createElement('button');
- switchDateBtn.addEventListener("click", switchDate);
- switchDateBtn.textContent = "切换成日期";
- switchParent.appendChild(switchDateBtn);
- /////end 切换时效 /////
- //设置鼠标事件//
- document.onkeydown = function (evt) {
- if (evt.key == 'x' && !evt.ctrlKey) {
- console.log(utils.showSkewT(elemsConfig.fixPoint));
- }
- else if (evt.key == 'x' && evt.ctrlKey) {
- if (!elemsConfig.point01) {
- elemsConfig.point01 = Object.assign({}, elemsConfig.fixPoint);
- }
- else {
- elemsConfig.point02 = Object.assign({}, elemsConfig.fixPoint);
- console.log(elemsConfig.point01, elemsConfig.point02);
- utils.showVertical(elemsConfig.point01, elemsConfig.point02);
- elemsConfig.point01 = null;
- elemsConfig.point02 = null;
- }
- }
- if (evt.key == 'c' && !evt.ctrlKey && !evt.altKey) {
- utils.showTimeSeries(elemsConfig.fixPoint);
- }
- }
- //设置鼠标事件//
- /**
- * 时间鼠标滑过
- */
- function timeMoveOver() {
- // var changeEvent = document.createEvent('HTMLEvents');
- // changeEvent.initEvent("change", true, true);
- var changeEvent = new Event('change', { 'bubbles': true });
- var clickOpt = (evt) => {
- console.log(evt.target);
- timeBar[timeBar.selectedIndex].selected = false;
- evt.target.selected = true;
- timeBar.dispatchEvent(changeEvent);
- }
- var timeBar = document.querySelector("#forecast_hours select");
- var opts = document.querySelectorAll('#forecast_hours option');
- opts.forEach(item => {
- item.addEventListener('mouseover', clickOpt);
- });
- }
- };
- function toggleSelectMode() {
- let mapPointer = document.getElementById('map-pointer');
- let bodyDOM = document.getElementsByTagName('body')[0];
- let linePanel = document.getElementById('line_panel');
- let selectModePanel = document.getElementById('select-mode-panel');
- if (bodyDOM.classList.contains("full-screen-mode")) {
- bodyDOM.classList.remove("full-screen-mode");
- linePanel.style.display = 'none';
- selectModePanel.style.display = 'none';
- mapPointer.classList.add("display-none");
- let crossCanvas = document.getElementById('cv-draw-line');
- crossCanvas.classList.add('display-none');
- let activeBtn = document.getElementById('edit-helper-panel');
- activeBtn.classList.remove('active-button');
- let crossBtn = document.getElementById('helper_cross');
- crossBtn ? crossBtn.classList.remove('active-button') : '';
- return;
- } else {
- bodyDOM.classList.add("full-screen-mode");
- let contentWidth = window.innerWidth - document.body.clientWidth - 40;
- if (contentWidth < 200) {
- linePanel.style.width = '220px';
- } else {
- linePanel.style.width = contentWidth + 'px';
- }
- linePanel.style.display = 'block';
- selectModePanel.style.display = 'block';
- mapPointer.classList.add("display-none");
- mapPointer.classList.remove("display-none");
- let activeBtn = document.getElementById('edit-helper-panel');
- activeBtn.classList.add('active-button');
- // let crossBtn = document.getElementById('helper_cross');
- // activeBtn.classList.add('active-button');
- }
- const imgXY = latlon2XY({ lon: 113.375, lat: 23.125 });
- utils.showTimeSeries({ lon: '113.375', lat: '23.125', mouseXY: imgXY });
- }
- /**
- * 切换垂直剖面
- */
- function toggleCrossSection() {
- let crossCanvas = document.getElementById('cv-draw-line');
- let activeBtn = document.getElementById('helper_cross');
- crossCanvas.classList.toggle('display-none');
- if (crossCanvas.classList.contains('display-none')) {
- activeBtn.classList.remove('active-button');
- } else {
- activeBtn.classList.add('active-button');
- }
- }
- // http://172.22.1.175/di/grid.action?userId=idc&pwd=U3cuYV&interfaceId=intGetMultElesDataTimeSerial&dataFormat=xml2&modelid=giftdaily&element=t2mm%20tmax%20tmin&level=1000&starttime=2014-11-22%2000:00:00&endtime=2014-11-25%2000:00:00&lon=113.5&lat=24.5
- function getTimeSeries(model = 'ecmwfthin', sT = '2019-01-22%2012:00:00', eT = '2019-02-01%2012:00:00', lon = '113.0', lat = '23.5', eles = ['t2mm', 'mn2t', 'mx2t', 'u10m', 'v10m', 'tcco', 'lcco', 'tppm']) {
- const url = `http://research.gdmo.gq/api/di/grid.action?dataFormat=json&interfaceId=intGetMultElesDataTimeSerial&modelid=${model}&element=${eles.join('%20')}&level=0&starttime=${sT}&endtime=${eT}&lon=${lon}&lat=${lat}`;
- utils.log('获取数据');
- // showNotification('正在从数据中心获取数据');
- let notification = GM_notification({ text: '正在从数据中心获取数据!', image: 'http://10.148.8.228/images/logo.png', title: '提示', timeout: 3000 });
- // console.log(notification);
- if (notification) setTimeout(() => notification.remove(), 3000);
- // console.log(url);
- GM_xmlhttpRequest({ //获取时间序列
- method: 'GET',
- synchronous: false,
- url: url,
- onload: function (reDetails) {
- if (reDetails.status !== 200 && reDetails.status !== 304) {
- console.error('获取URL错误');
- // showNotification('数据中心数据获取异常');
- let errorNotice = GM_notification({ text: '数据中心数据获取异常', image: 'http://10.148.8.228/images/logo.png', title: '接口异常', timeout: 3000 });
- if (errorNotice) setTimeout(() => errorNotice.remove(), 3000);
- return;
- }
- getLocation(lat, lon);
- const data = JSON.parse(reDetails.responseText);
- //console.log(data.DATA);
- if (data.DATA.length == 0) {
- console.error('此时次数据为空,请等待更新');
- // showNotification('此时次数据为空,请等待更新');
- let errorNotice = GM_notification({ text: '此时次数据为空,请等待更新', image: 'http://10.148.8.228/images/logo.png', title: '接口异常', timeout: 3000 });
- if (errorNotice) setTimeout(() => errorNotice.remove(), 3000);
- return;
- }
- let series = decodeSeries(data.DATA, 241);
- series[1] = mixUndefined(series[0].map(v => v[1]), series[1]);
- series[2] = mixUndefined(series[0].map(v => v[1]), series[2]);
- //console.log(series[1]);
- drawLine(series);
- }
- });
- }
- /**
- * 从百度接口获取地址
- * @param {Number} lat 纬度
- * @param {Number} lon 经度
- */
- function getLocation(lat, lon) {
- let ak = 'kMW5fXfhhsMat6Ud9jYPqnxCRQGbl2eV';
- let url = `http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location=${lat},${lon}&output=json&pois=1&ak=${ak}`;
- let latlonSpan = document.querySelectorAll('#line_info > span');
- latlonSpan[0].innerHTML = lat;
- latlonSpan[1].innerHTML = lon;
- latlonSpan[2].innerHTML = '';
- // console.log(url);
- GM_xmlhttpRequest({ //获取时间序列
- method: 'GET',
- synchronous: false,
- url: url,
- onload: function (reDetails) {
- if (reDetails.status !== 200 && reDetails.status !== 304) {
- console.error('获取百度地址异常');
- //showNotification('数据中心数据获取异常');
- return;
- }
- let raw = reDetails.responseText.replace('renderReverse&&renderReverse(', '').slice(0, -1);
- const addreJSON = JSON.parse(raw);
- if (addreJSON.result.formatted_address == '') {
- return;
- } else {
- latlonSpan[2].innerHTML = ' 地址: ' + addreJSON.result.formatted_address;
- }
- //console.log(data);
- }
- });
- }
- function mixUndefined(index, data) {
- let newData = [];
- for (let i of index) {
- let value = data.find(v => v[1] == i);
- if (value === undefined) {
- newData.push([undefined, i]);
- } else {
- newData.push([value[0], i]);
- }
- }
- return newData
- }
- /**解析数据 */
- function decodeSeries(data = [], len = 241) {
- if (!data.length) return [];
- let splitData = [];
- let eles = data.length / len;//元素个数
- for (let ie = 0; ie < eles; ie++) {//看有几个要素
- splitData.push(data.slice(ie * len, (ie + 1) * len));
- }
- splitData = splitData.map(data => data.map((v, i) => [Number(v), i]).filter(v => v[0] > -999));//分离出[数值,时效]//-999.900024
- // console.log(splitData);
- return splitData;
- }
- function drawLine(series = []) {
- // getTimeSeries();
- utils.log('绘图');
- if (series.length == 0) return console.log('空数据');
- const tempChart = echarts.init(document.getElementById('show-temp'));
- let fcTime = utils.getFcTime();
- let initTime = moment(fcTime.date + fcTime.hr, 'YYYY-MM-DDHH').add(8, 'hours');//北京时
- let temp = series[0].map(v => (v[0] - 273.15).toFixed(2));
- let mn2t = series[1].map(v => {
- if (v[0] === undefined) {
- return undefined;
- } else {
- return (v[0] - 273.15).toFixed(2);
- }
- });
- let mx2t = series[2].map(v => {
- if (v[0] === undefined) {
- return undefined;
- } else {
- return (v[0] - 273.15).toFixed(2);
- }
- });
- let xTime = series[0].map(v => {
- const hour = v[1];
- return moment(initTime).add(hour, 'hours').format('DD-HH');
- });
- // console.log(mn2t);
- // 指定图表的配置项和数据
- const OptionTemp = {
- /* title: {
- text: 'Temp.',
- // left: 'center'
- }, */
- tooltip: {
- trigger: 'axis',
- },
- toolbox: {
- // y: '30px',
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- },
- restore: {},
- //saveAsImage: {}
- }
- },
- grid: { top: 10, bottom: 45, right: 11, left: 25 },
- dataZoom: [
- {
- show: true,
- realtime: true,
- start: 0,
- end: 80,
- // handleSize: '50%',
- height: '20',
- bottom: '0',
- },
- {
- type: 'inside',
- realtime: true,
- start: 0,
- end: 80,
- }
- ],
- legend: {
- y: '-5',
- data: ['Temp', 'Pre6min', 'Pre6max']
- },
- xAxis: {
- type: 'category',
- data: xTime,
- // boundaryGap : false,
- //splitArea : {show : true},
- splitLine: { show: true },
- axisLine: { onZero: true },
- },
- yAxis: [{
- name: '℃',
- type: 'value',
- scale: true,
- axisLabel: {
- formatter: '{value}'
- },
- },
- ],
- series: [
- {
- name: 'Temp',
- smooth: true,
- //symbol: 'triangle',
- //symbolSize: 5,
- lineStyle: { normal: { color: 'green', width: 2, } },//type: 'dashed'
- //itemStyle: {normal: {borderWidth: 1,borderColor: 'green',color: 'green'}},
- type: 'line',
- data: temp,
- },
- {
- name: 'Pre6min',
- smooth: true,
- connectNulls: true,
- symbolSize: 0,
- lineStyle: { normal: { color: 'blue', width: 1, type: 'dashed' } },//type: 'dashed'
- type: 'line',
- data: mn2t,
- },
- {
- name: 'Pre6max',
- smooth: true,
- connectNulls: true,
- symbolSize: 0,
- lineStyle: { normal: { color: 'red', width: 1, type: 'dashed' } },//type: 'dashed'
- type: 'line',
- data: mx2t,
- },
- ]
- };
- // 使用刚指定的配置项和数据显示图表。
- tempChart.setOption(OptionTemp);
- /**
- * 风
- */
- const windChart = echarts.init(document.getElementById('show-wind'));
- let wind = series[3].map((v, i) => utils.calWind(v[0], series[4][i][0]));
- let speed = wind.map(v => v.speed);
- let rotation = wind.map(v => v.rotation);
- let windData = speed.map((v, i) => [v, rotation[i], i]);
- let dims = {
- speed: 0,
- rotation: 1,
- timeIndex: 2,
- }
- const optionWind = {
- /* title: {
- text: 'Wind',
- }, */
- tooltip: {
- trigger: 'axis',
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- },
- // restore: {},
- //saveAsImage: {}
- }
- },
- grid: { show: true, top: 10, bottom: 45, right: 11, left: 25 },
- dataZoom: [
- {
- show: true,
- realtime: true,
- start: 0,
- end: 80,
- // handleSize: '50%',
- height: '20',
- bottom: '0',
- },
- {
- type: 'inside',
- realtime: true,
- start: 0,
- end: 80,
- }
- ],
- legend: {
- y: '-5',
- data: ['w10m'],
- },
- xAxis: {
- type: 'category',
- data: xTime,
- splitLine: { show: true },
- axisLine: { onZero: true },
- },
- yAxis: {
- name: 'm/s',
- type: 'value',
- axisLabel: {
- formatter: '{value}'
- },
- },
- series: [
- {
- name: 'w10m',
- type: 'line',
- smooth: true,
- lineStyle: { normal: { width: 2, } },//type: 'dashed'
- itemStyle: { normal: { borderWidth: 1, borderColor: 'black', color: 'black' } },
- data: speed.map(v => v.toFixed(1)),
- },
- {
- type: 'custom',
- name: 'dir',
- renderItem: utils.renderArrow,
- encode: {
- x: dims.timeIndex,
- y: dims.speed,
- },
- data: windData,
- z: 10
- },
- ]
- };
- windChart.setOption(optionWind);
- /**
- * 云
- */
- const cloudChart = echarts.init(document.getElementById('show-cloud'));
- let totalCloud = series[5].map(v => v[0] * 100);
- let lowCloud = series[6].map(v => v[0] * 100);
- const optionCloud = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- },
- // restore: {},//saveAsImage: {}
- }
- },
- grid: { show: true, top: 10, bottom: 45, right: 11, left: 30 },
- dataZoom: [
- {
- show: true,
- realtime: true,
- start: 0,
- end: 80,
- height: '20',
- bottom: '0',
- },
- {
- type: 'inside',
- realtime: true,
- start: 0,
- end: 80,
- }
- ],
- legend: {
- y: '-5',
- data: ['中高云', '低云'],
- },
- xAxis: {
- type: 'category',
- data: xTime,
- splitLine: { show: true },
- axisLine: { onZero: true },
- },
- yAxis: {
- name: '%',
- type: 'value',
- axisLabel: {
- formatter: '{value}'
- },
- },
- series: [
- {
- name: '低云',
- type: 'bar',
- stack: '云量',
- data: lowCloud.map(v => v.toFixed(1)),
- },
- {
- name: '中高云',
- type: 'bar',
- stack: '云量',
- data: totalCloud.map((v, i) => (v - lowCloud[i]).toFixed(1)),
- },
- ]
- };
- cloudChart.setOption(optionCloud);
- /**
- * 降水
- */
- const preChart = echarts.init(document.getElementById('show-pre'));
- let preSeri = series[7];
- let precipitaion = preSeri.map((v, i) => {
- let pre = i === 0 ? v[0] : v[0] - preSeri[i - 1][0]; //(v[0]*1000).toFixed(1)
- return (pre * 1000).toFixed(1);
- }
- );
- //let lowCloud = series[6].map(v=>v[0]);
- const optionPre = {
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器,坐标轴触发有效
- type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
- }
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- },
- }
- },
- grid: { show: true, top: 10, bottom: 45, right: 11, left: 30 },
- dataZoom: [
- {
- show: true,
- realtime: true,
- start: 0,
- end: 80,
- height: '20',
- bottom: '0',
- },
- {
- type: 'inside',
- realtime: true,
- start: 0,
- end: 80,
- }
- ],
- legend: {
- y: '-5',
- data: ['Precipitaion'],
- },
- xAxis: {
- type: 'category',
- data: xTime,
- splitLine: { show: true },
- axisLine: { onZero: true },
- },
- yAxis: {
- name: 'mm',
- type: 'value',
- axisLabel: {
- formatter: '{value}'
- },
- },
- series: [
- {
- name: 'Precipitaion',
- type: 'bar',
- stack: 'Rain',
- data: precipitaion,
- },
- ]
- };
- preChart.setOption(optionPre);
- }
- function createPanel() {
- //-创建面板-//
- const panelWrap = document.createElement("div");
- panelWrap.setAttribute("id", "helper_panel");
- panelWrap.setAttribute("class", "top_panel show_panel");
- panelWrap.innerHTML = '多图模式: ';
- /* 设置添加对比模式*/
- const compareMode = utils.createElement('div', { class: 'single-btn' });
- compareMode.innerHTML = `<span class="panel-button" id="open-compare">多起报</span>`;
- panelWrap.appendChild(compareMode);
- /* 设置添加多时效模式*/
- const mvTime = utils.createElement('div', { class: 'single-btn' });
- mvTime.innerHTML = `<span class="panel-button" id="open-mvTime">多时效</span>`;
- panelWrap.appendChild(mvTime);
- /* 添加多模式 */
- const mvModelBtn = utils.createElement('div', { class: 'dropdown mv-model-panel' });
- mvModelBtn.innerHTML =
- `<button class="dropbtn"><div class="tooltip">多模式<span class="tooltiptext">ECMWF, NCEP, Grapes全球, 南海台风模式9km</span></div></button>
- <div class="dropdown-content">
- <a href="#" class="tooltip">
- EC/NCEP/G全球/G9km
- <span class="tooltiptext">ECMWF, NCEP, Grapes全球, Grages9kmEC</span>
- </a>
- <a href="#" class="tooltip">
- EC/NCEP/G9km/G-meso
- <span class="tooltiptext">ECMWF, NCEP, Grages9kmEC, Grapes-Meso</span>
- </a>
- <a href="#" class="tooltip">
- EC/NCEP/G9km/GZ-3km
- <span class="tooltiptext">ECMWF, NCEP, Grages9kmEC, 华南3km高分辨率</span>
- </a>
- </div>
- `;
- panelWrap.appendChild(mvModelBtn);
- /* 设置添加多图模式
- const mvElem = document.createElement('div');
- mvElem.innerHTML = `<span class="panel-button" id="open-mv">多要素</span>`;
- panelWrap.appendChild(mvElem);*/
- /* 设置添加点选模式*/
- const panelWrap2 = utils.createElement('div', { id: 'edit-helper-panel', class: 'top_panel show_panel' });
- const pointMode = utils.createElement('div', { class: 'single-btn' });
- pointMode.innerHTML = `<span class="panel-button">交互模式</span>`;
- panelWrap2.appendChild(pointMode);
- pointMode.addEventListener('click', () => { toggleSelectMode() });
- /* 设置Lat lon面板*/
- //-------//
- //-注册到全局变量-//
- elemsConfig.latLonInput = {
- lat: document.getElementById('helper_lat'),
- lon: document.getElementById('helper_lon'),
- };
- /* 设置添加增强显示*/
- const panelWrap3 = utils.createElement('div', { id: 'enhanced-helper-panel', class: 'top_panel show_panel' });
- const tcModeBtn = utils.createElement('div', { class: 'single-btn', id: 'tc-mode-btn' });
- tcModeBtn.innerHTML = `<span class="panel-button">台风路径</span>`;
- panelWrap3.appendChild(tcModeBtn);
- tcModeBtn.addEventListener('click', () => { toggleTCMode('tcShow') });
- const detTCbtn = utils.createElement('div', { class: 'single-btn display-none active-button', id: 'tc-det-btn' });
- detTCbtn.innerHTML = `<span class="panel-button">EC确定性预报</span>`;
- panelWrap3.appendChild(detTCbtn);
- detTCbtn.addEventListener('click', () => { toggleTCMode('detShow') });
- const ensTCbtn = utils.createElement('div', { class: 'single-btn display-none active-button', id: 'tc-ens-btn' });
- ensTCbtn.innerHTML = `<span class="panel-button">EC集合预报</span>`;
- panelWrap3.appendChild(ensTCbtn);
- ensTCbtn.addEventListener('click', () => { toggleTCMode('ensShow') });
- /* 注册到body*/
- const ibody = document.getElementsByTagName("body")[0];
- ibody.appendChild(panelWrap);
- ibody.appendChild(panelWrap2);
- ibody.appendChild(panelWrap3);
- }
- // 添加面板样式
- function createTlinePanel() {
- //-创建面板-//
- const fragment = document.createDocumentFragment();
- const panelWrap = document.createElement("div");
- panelWrap.setAttribute("id", "line_panel");
- panelWrap.setAttribute("class", "show_panel");
- panelWrap.style.display = 'none';
- const infoWrap = document.createElement('div');
- infoWrap.setAttribute("id", "line_info");
- infoWrap.innerHTML = 'EC模式预报<br>纬度:<span></span> 经度:<span></span><span></span>';
- panelWrap.appendChild(infoWrap);
- /* 设置添加temp*/
- const tempWrap = document.createElement('div');
- tempWrap.innerHTML = `温度<div id="show-temp"></div>`;
- panelWrap.appendChild(tempWrap);
- const windWrap = document.createElement('div');
- windWrap.innerHTML = `风MSLP<div id="show-wind"></div>`;
- panelWrap.appendChild(windWrap);
- const preWrap = document.createElement('div');
- preWrap.innerHTML = `降水<div id="show-pre"></div>`;
- panelWrap.appendChild(preWrap);
- const cloudWrap = document.createElement('div');
- cloudWrap.innerHTML = `云量<div id="show-cloud"></div>`;
- panelWrap.appendChild(cloudWrap);
- fragment.appendChild(panelWrap);
- const ibody = document.getElementsByTagName("body")[0];
- ibody.appendChild(fragment);
- //-------//
- }
- function createSelectModePanel() {
- //-创建面板-//
- const fragment = document.createDocumentFragment();
- const panelWrap = document.createElement("div");
- panelWrap.setAttribute("id", "select-mode-panel");
- panelWrap.setAttribute("class", "show_panel");
- panelWrap.style.display = 'none';
- panelWrap.innerHTML = `快捷键[C] -> 单点时间序列`;
- /*<br>
- [X] -> 垂直探空; 两次[Ctrl+X] -> 垂直剖面
- */
- fragment.appendChild(panelWrap);
- const ibody = document.getElementsByTagName("body")[0];
- ibody.appendChild(fragment);
- /* 设置Lat lon面板*/
- const latLonWarp = document.createElement("div");
- latLonWarp.setAttribute("id", "helper_latLon");
- latLonWarp.setAttribute("class", "show_latLon");
- latLonWarp.innerHTML = '<span>Lat <span class="fixLoc" id="helper_lat"></span> Lon <span class="fixLoc" id="helper_lon"></span></span>';
- panelWrap.appendChild(latLonWarp);
- /* 设置垂直剖面面板*/
- const crossWrap = utils.createElement('div', { id: 'helper_cross', class: 'top_panel' })
- crossWrap.innerHTML = `<div class="panel-button single-btn">垂直剖面</div>`;
- panelWrap.appendChild(crossWrap);
- crossWrap.addEventListener('click', () => { toggleCrossSection() });
- //-------//
- }
- //console.log(compareMode.imgDOM);
- // compareMode.forward();
- /**绑定多模式 */
- function bindingMvModel() {
- let dropList = document.querySelectorAll('.mv-model-panel .dropdown-content>a');
- for (let elem of dropList) {
- elem.addEventListener('click', clickDrop);
- }
- let dropBtn = document.querySelector('.dropbtn');
- dropBtn.addEventListener('click', clickDrop);
- function clickDrop(evt) {
- const current = evt.currentTarget;
- let index;
- // console.log(current.classList);
- if (current.classList.contains('dropbtn')) {
- index = 0;
- } else {
- // console.log(current);
- const parent = current.parentElement;
- index = Array.from(parent.children).indexOf(current);
- // parent.style.display='none';
- }
- let currentImgInfo = utils.getImgNow();
- matchedRule = multiModelRule[index];
- let srcList = getMVSrcListFromRule(currentImgInfo.url, matchedRule);
- // console.log(srcList);
- elemsConfig.mvImgDOM.matchedSrcList = srcList;
- elemsConfig.mvImgDOM.mode = 'multiModel';
- // elemsConfig.mvImgDOM.mode = 'multiModel';
- userConfig.mvMode.openCompare();
- }
- }
- //创建对比框
- function createComparePanel() {
- const panel = document.createDocumentFragment();
- const mainWrapper = utils.createElement('div', { id: 'compare-main', class: 'display-none' });
- const controlWrapper = utils.createElement('div', { class: 'compare-warpper' });
- controlWrapper.innerHTML = `<div id="compare-backward" class="my-button">step -6</div><div class="my-button" id="compare-foreward">step +6</div>`;
- controlWrapper.innerHTML += `<select id="compare-interval"><option value="48">起报间隔48小时</option>
- <option value="24">起报间隔24小时</option>
- <option selected="selected" value="12">起报间隔12小时</option></select>
- <div id="close-compare" class="my-button">关闭对比</div>
- <span class="info"></span>`;
- const imgWrapper = utils.createElement('div', { class: 'compare-img-main' });
- imgWrapper.innerHTML =
- `<div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
- <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
- <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
- <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>`;
- panel.append(mainWrapper);
- mainWrapper.append(controlWrapper, imgWrapper);
- //mainWrapper.append(forewardBut,backwardBut,intervalInput);
- document.body.append(panel);
- }
- function createCompareMode() {
- const compareHandler = {
- set(obj, prop, value, receiver) {
- if (prop === 'interval') {
- obj.interval = value;
- receiver.firstImg = obj.firstImg;
- //obj.img[1] = obj.img[0] + value;
- //obj.img[2] = obj.img[0] + value*2;
- //obj.img[3] = obj.img[0] + value*3;
- } else if (prop === 'firstHr') {
- // console.log(obj.imgInfo.toSource());
- // const initURL = obj.imgInfo.url;
- const date = obj.imgInfo.date;
- const initDate = obj.imgInfo.initDate;
- const hour = utils.paddingInt(value, 3);
- const url = obj.imgInfo.getUrl(date, hour, initDate)
- receiver.firstImg = url;
- //receiver.interval = obj.interval;
- } else if (prop === 'imgInfo') {
- console.log('设置初始图像为:' + value.url);
- } else if (prop === 'firstImg') {
- const imgList = obj.fit2sameday(value);
- // console.log(imgList);
- obj.showInfo(value);
- imgList.forEach((imgSrc, i) => {
- receiver.img[i] = imgSrc;
- })
- //obj.img[0] = imgList;
- // obj.img[1] = ;
- }
- Reflect.set(obj, prop, value);
- },
- };
- const imgHandler = {
- set(obj, prop, value, receiver) {
- utils.log(`第${Number(prop) + 1}个图像地址为${value}`);
- elemsConfig.compareImgDOM.img[prop].src = value;
- iImgInfo = utils.getImgNow(value);
- const initTime = moment(iImgInfo.initDate, 'YYYYMMDDHH');
- const nowTime = moment(initTime).add(Number.parseInt(iImgInfo.hour) + 8, 'hours');
- elemsConfig.compareImgDOM.info[prop].innerHTML =
- `起报: ${initTime.format('MM-DD HH')} UTC, 【北京时${nowTime.format('MM月DD日HH时')}(${iImgInfo.hour}h)】${iImgInfo.model}, ${iImgInfo.eleName}`;
- //console.log(value);
- //let imgDom = document.querySelectorAll('.compare .imgSrc');
- //imgDom[prop].src = value;
- Reflect.set(obj, prop, value);
- },
- };
- let imgSrc = new Proxy([1, 2, 3, 4], imgHandler);
- const modeProto = {
- img: imgSrc,
- firstImg: '',
- interval: 12,
- foreward(step = 6) {
- this.firstHr = this.firstHr + step;
- // console.log('步进');
- },
- backward(step = 6) {
- if (this.firstHr - step >= 0) {
- this.firstHr = this.firstHr - step;
- } else {
- alert('不能再退了');
- }
- },
- firstHr: 1,
- urlMode(base = 'http://10.148') {
- let url = base;
- return url;
- },
- initIMG() {// TODO addEventListener('error',(evt)=>{evt.srcElement.src})
- let DOMs = document.querySelectorAll('#compare-main .compare-img');
- let imgDOM = [];
- for (let img of DOMs) {
- img.addEventListener('error', (evt) => { let ele = evt.target; ele.onerror = null; ele.src = '/images/weather/nopic_800_600.jpg'; });
- imgDOM.push(img);
- };
- elemsConfig.compareImgDOM.img = imgDOM;
- let infoDOMs = document.querySelectorAll('#compare-main .compare-img-info');
- let infoList = [];
- for (let ele of infoDOMs) {
- infoList.push(ele);
- };
- elemsConfig.compareImgDOM.info = infoList;
- //return imgDOM;
- },
- imgInfo: {},
- openCompare() {
- const wrapper = document.getElementById('compare-main');
- //if(wrapper.classList.contains('display-none')) wrapper.classList.remove('display-none')
- wrapper.classList.remove('display-none');
- try {
- this.imgInfo = utils.getImgNow();
- this.firstHr = Number.parseInt(this.imgInfo.hour);
- } catch (err) {
- alert(err.message);
- console.error(err);
- }
- },
- closeCompare() {
- const wrapper = document.getElementById('compare-main');
- //if(wrapper.classList.contains('display-none')) wrapper.classList.remove('display-none')
- wrapper.classList.add('display-none');
- // this.imgInfo = utils.getImgNow();
- },
- fit2sameday(firstImg) {
- const interval = this.interval;
- const firstInfo = utils.getImgNow(firstImg);
- // console.log(firstImg);
- // console.log(firstInfo);
- const imgList = [firstImg];
- const iniTime = moment(firstInfo.initDate, 'YYYYMMDDHH');
- for (let i = 1; i < 4; i++) {
- const fitTime = moment(iniTime).add(-1 * interval * i, 'hours');
- const iDate = moment(fitTime).format('YYYYMMDD');
- const iInit = moment(fitTime).format('YYYYMMDDHH');
- const hour = Number.parseInt(firstInfo.hour) + interval * i;
- // console.log('预报时效'+hour);
- const iHour = utils.paddingInt(hour, 3);
- const url = firstInfo.getUrl(iDate, iHour, iInit);
- imgList.push(url);
- }
- return imgList;
- },
- changeInterval(evt) {
- this.interval = Number.parseInt(evt.target.value);
- // console.log(evt);
- },
- showInfo(img) {
- const controlInfo = document.querySelector('#compare-main .compare-warpper .info');
- const imgInfo = utils.getImgNow(img);
- const nowTime = moment(imgInfo.initDate, 'YYYYMMDDHH').add(Number.parseInt(imgInfo.hour) + 8, 'hours');
- controlInfo.innerHTML = ' UTC+8 ' + nowTime.format('YYYY年MM月DD日HH时');
- controlInfo.innerHTML += ' | GMT' + nowTime.add(-8, 'hours').format('YYYY-MM-DD HH:00');
- },
- };
- const compareMode = new Proxy(modeProto, compareHandler);
- return compareMode;
- }
- //compareMode.imgInfo = utils.getImgNow();
- //创建多视窗对比框
- function createMVPanel() {
- const panel = document.createDocumentFragment();
- const mainWrapper = utils.createElement('div', { id: 'multiviews-main', class: 'display-none' });
- const controlWrapper = utils.createElement('div', { class: 'compare-warpper' });
- controlWrapper.innerHTML = `<div id="mv-backward" class="my-button">step -6</div><div class="my-button" id="mv-foreward">step +6</div>`;
- controlWrapper.innerHTML += `<select id="mv-interval"><option selected="selected" value="6">间隔6小时</option>
- <option value="12">间隔12小时</option>
- <option value="24">间隔24小时</option></select>
- <div id="close-mv" class="my-button">关闭多图模式</div>
- <span class="info"></span>`;
- const imgWrapper = utils.createElement('div', { class: 'compare-img-main' });
- imgWrapper.innerHTML =
- `<div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
- <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
- <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
- <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>`;
- panel.append(mainWrapper);
- mainWrapper.append(controlWrapper, imgWrapper);
- //mainWrapper.append(forewardBut,backwardBut,intervalInput);
- document.body.append(panel);
- }
- function createMultiviewsMode() {
- const compareHandler = {
- set(obj, prop, value, receiver) {
- if (prop === 'interval') {
- obj.interval = value;
- // receiver.firstImg = obj.firstImg;
- receiver.step = value * obj.imgArr.length;
- const firstImg = obj.imgArr[0];
- let imgInfo = utils.getImgNow(firstImg);
- let iHour = Number.parseInt(imgInfo.hour);
- for (let i = 0; i < obj.imgArr.length; i++) {
- let currentHour = iHour + i * value;
- const hourString = utils.paddingInt(currentHour);
- obj.imgArr[i] = utils.getImgUrl(imgInfo.base, imgInfo.date, hourString, imgInfo.initDate);
- }
- } else if (prop === 'firstHr') {
- const date = obj.imgInfo.date;
- const initDate = obj.imgInfo.initDate;
- const hour = utils.paddingInt(value, 3);
- const url = obj.imgInfo.getUrl(date, hour, initDate)
- receiver.firstImg = url;
- } else if (prop === 'step') {
- // console.log('step');
- // obj.step = value;
- document.getElementById('mv-foreward').innerText = 'step +' + value;
- document.getElementById('mv-backward').innerText = 'step -' + value;
- } else if (prop === 'imgInfo') {
- console.log('设置初始图像为:' + value.url);
- } else if (prop === 'firstImg') {
- const imgList = obj.fit2sameday(value);
- // console.log(imgList);
- obj.showInfo(value);
- imgList.forEach((imgSrc, i) => {
- receiver.imgArr[i] = imgSrc;
- })
- //obj.img[0] = imgList;
- // obj.img[1] = ;
- }
- Reflect.set(obj, prop, value);
- },
- };
- const imgHandler = {
- set(obj, prop, value) {
- utils.log(`第${Number(prop) + 1}个图像地址为${value}`);
- elemsConfig.mvImgDOM.img[prop].src = value;
- iImgInfo = utils.getImgNow(value);
- const initTime = moment(iImgInfo.initDate, 'YYYYMMDDHH');
- const nowTime = moment(initTime).add(Number.parseInt(iImgInfo.hour) + 8, 'hours');
- // controlInfo.innerHTML = ' UTC+8 '+ nowTime.format('YYYY年MM月DD日HH时');
- elemsConfig.mvImgDOM.info[prop].innerHTML =
- `【北京时${nowTime.format('MM月DD日HH时')}(${iImgInfo.hour}h)】${iImgInfo.model}, ${iImgInfo.eleName}, 起报: ${initTime.format('MM-DD HH')} UTC`;
- Reflect.set(obj, prop, value);
- },
- };
- let imgSrc = new Proxy([1, 2, 3, 4], imgHandler);
- const modeProto = {
- imgArr: imgSrc,
- firstImg: '',
- interval: 6,
- step: 6,
- foreward(step = 6) {
- // this.firstHr = this.firstHr + step;
- // console.log(this);
- this.changeHour(this.step);
- // console.log('步进');
- },
- backward(step = -6) {
- let imgInfo = utils.getImgNow(this.imgArr[0]);
- // console.dir(imgInfo);
- // console.log(Number.parseInt(imgInfo.hour) - this.step>=0)
- if (Number.parseInt(imgInfo.hour) - this.step >= 0) {
- this.changeHour(-1 * this.step);
- // console.log('步退');
- } else {
- alert('不能再退了');
- }
- },
- changeHour(hr = 6) {
- let hour = parseInt(hr);
- for (let i = 0; i < this.imgArr.length; i++) {
- let iInfo = utils.getImgNow(this.imgArr[i]);
- let newHour = parseInt(iInfo.hour) + hour;
- // console.log(newHour);
- this.imgArr[i] = iInfo.getUrl(iInfo.date, utils.paddingInt(newHour), iInfo.initDate);
- }
- },
- firstHr: 1,
- urlMode(base = 'http://10.148') {
- let url = base;
- return url;
- },
- initIMG() {// TODO addEventListener('error',(evt)=>{evt.srcElement.src})
- let DOMs = document.querySelectorAll('#multiviews-main .compare-img');
- let imgDOM = [];
- for (let img of DOMs) {
- img.addEventListener('error', (evt) => { let ele = evt.target; ele.onerror = null; ele.src = '/images/weather/nopic_800_600.jpg'; });
- imgDOM.push(img);
- };
- elemsConfig.mvImgDOM.img = imgDOM;
- let infoDOMs = document.querySelectorAll('#multiviews-main .compare-img-info');
- let infoList = [];
- for (let ele of infoDOMs) {
- infoList.push(ele);
- };
- elemsConfig.mvImgDOM.info = infoList;
- //return imgDOM;
- },
- imgInfo: {},
- openCompare() {
- const wrapper = document.getElementById('multiviews-main');
- //if(wrapper.classList.contains('display-none')) wrapper.classList.remove('display-none')
- wrapper.classList.remove('display-none');
- document.getElementById('mv-interval').classList.remove('display-none');
- try {
- let imgInfo = utils.getImgNow();
- if (elemsConfig.mvImgDOM.mode === 'multiElem') {
- for (let i = 0; i < this.imgArr.length; i++) {
- const iPatt = elemsConfig.mvImgDOM.matchPattens[i];
- // console.log(iPatt);
- const iMatch = utils.matchImgPattern(iPatt);
- console.log(iMatch);
- this.imgArr[i] = utils.getImgUrl(iMatch.base, imgInfo.date, imgInfo.hour, imgInfo.initDate);
- }
- } else if (elemsConfig.mvImgDOM.mode === 'multiTime') {
- this.step = this.interval * this.imgArr.length;
- let iHour = Number.parseInt(imgInfo.hour);
- for (let i = 0; i < this.imgArr.length; i++) {
- let currentHour = iHour + i * this.interval;
- const hourString = utils.paddingInt(currentHour);
- this.imgArr[i] = utils.getImgUrl(imgInfo.base, imgInfo.date, hourString, imgInfo.initDate);
- }
- } if (elemsConfig.mvImgDOM.mode === 'multiModel' || elemsConfig.mvImgDOM.mode === 'multiElems') {
- for (let i = 0; i < elemsConfig.mvImgDOM.matchedSrcList.length; i++) {
- this.imgArr[i] = elemsConfig.mvImgDOM.matchedSrcList[i];
- }
- document.getElementById('mv-interval').classList.add('display-none');
- this.step = 6;
- }
- } catch (err) {
- alert(err.message);
- console.error(err);
- }
- },
- closeCompare() {
- const wrapper = document.getElementById('multiviews-main');
- //if(wrapper.classList.contains('display-none')) wrapper.classList.remove('display-none')
- wrapper.classList.add('display-none');
- // this.imgInfo = utils.getImgNow();
- },
- fit2sameday(firstImg) {
- const interval = this.interval;
- const firstInfo = utils.getImgNow(firstImg);
- // console.log(firstImg);
- // console.log(firstInfo);
- const imgList = [firstImg];
- const iniTime = moment(firstInfo.initDate, 'YYYYMMDDHH');
- for (let i = 1; i < 4; i++) {
- const fitTime = moment(iniTime).add(-1 * interval * i, 'hours');
- const iDate = moment(fitTime).format('YYYYMMDD');
- const iInit = moment(fitTime).format('YYYYMMDDHH');
- const hour = Number.parseInt(firstInfo.hour) + interval * i;
- // console.log('预报时效'+hour);
- const iHour = utils.paddingInt(hour, 3);
- const url = firstInfo.getUrl(iDate, iHour, iInit);
- imgList.push(url);
- }
- return imgList;
- },
- changeInterval(evt) {
- if (elemsConfig.mvImgDOM.mode === 'multiModel' || elemsConfig.mvImgDOM.mode === 'multiElems') {
- return confirm('多模式下不支持调整间隔');
- }
- this.interval = Number.parseInt(evt.target.value);
- // console.log(evt);
- },
- showInfo(img) {
- const controlInfo = document.querySelector('#multiviews-main .compare-warpper .info');
- const imgInfo = utils.getImgNow(img);
- const nowTime = moment(imgInfo.initDate, 'YYYYMMDDHH').add(Number.parseInt(imgInfo.hour) + 8, 'hours');
- controlInfo.innerHTML = ' UTC+8 ' + nowTime.format('YYYY年MM月DD日HH时');
- controlInfo.innerHTML += ' | GMT' + nowTime.add(-8, 'hours').format('YYYY-MM-DD HH:00');
- },
- };
- const compareMode = new Proxy(modeProto, compareHandler);
- return compareMode;
- }
- if (location.href.includes('to_fore_homepage.action')) {
- if (window.frames.length != parent.frames.length) {
- return;
- }
- createSelectModePanel();
- createPanel();
- NWP_init();
- createTlinePanel();
- bindingMvModel();
- createComparePanel();
- const compareMode = createCompareMode();//创建对比DOM框架
- compareMode.hook = function (selector = '', listener = '', callback = () => { }, bindObj = compareMode) {
- var targetEle = document.querySelector(selector);
- targetEle.addEventListener(listener, () => callback.call(bindObj), false);
- };
- compareMode.hook('#compare-backward', 'click', compareMode.backward, compareMode);
- compareMode.hook('#compare-foreward', 'click', compareMode.foreward, compareMode);
- compareMode.hook('#open-compare', 'click', compareMode.openCompare, compareMode);
- compareMode.hook('#close-compare', 'click', compareMode.closeCompare, compareMode);
- //compareMode.hook('#compare-interval','change',(evt)=>compareMode.changeInterval(evt),compareMode);
- document.getElementById('compare-interval').addEventListener('change', (evt) => compareMode.changeInterval(evt));
- compareMode.initIMG();
- createMVPanel();//创建对比DOM框架
- const mvMode = createMultiviewsMode();
- mvMode.hook = function (selector = '', listener = '', callback = () => { }, bindObj = mvMode) {
- var targetEle = document.querySelector(selector);
- targetEle.addEventListener(listener, () => callback.call(bindObj), false);
- };
- mvMode.hook('#mv-backward', 'click', mvMode.backward, mvMode);
- mvMode.hook('#mv-foreward', 'click', mvMode.foreward, mvMode);
- mvMode.hook('#close-mv', 'click', mvMode.closeCompare, mvMode);
- //compareMode.hook('#compare-interval','change',(evt)=>compareMode.changeInterval(evt),compareMode);
- document.getElementById('mv-interval').addEventListener('change', (evt) => mvMode.changeInterval(evt));
- mvMode.initIMG();
- userConfig.mvMode = mvMode;
- let openMvTime = document.getElementById('open-mvTime');
- // console.log(openMvTime)
- openMvTime.addEventListener('click', () => {
- elemsConfig.mvImgDOM.mode = 'multiTime';
- mvMode.openCompare();
- });
- createMapIndicator();
- }
- if (location.href.includes('to_fore_homepage.action')) {
- GM_addStyle(`
- /* Style The Dropdown Button */
- /*background-color: #4CAF50;*/
- .dropbtn {
- background-color: rgb(45,53,63);
- color: white;
- font-size: 16px;
- cursor: pointer;
- border: none;
- padding: 5px;
- border: 1px solid white;
- }
- /* The container <div> - needed to position the dropdown content */
- .dropdown {
- position: relative;
- display: inline-block;
- margin-left:5px;
- margin-right:5px;
- }
- .dropbtn .tooltiptext{
- width: intrinsic;
- width: -webkit-max-content;
- width:-moz-max-content;
- width: max-content;
- }
- /* Dropdown Content (Hidden by Default) */
- .dropdown-content {
- display: none;
- position: absolute;
- left: 0px;
- top: 30px;
- background-color: #f9f9f9;
- box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
- z-index: 1;
- width: intrinsic;
- width: -webkit-max-content;
- width:-moz-max-content;
- width: max-content;
- }
- /* Links inside the dropdown */
- .dropdown-content>a {
- color: black;
- padding: 6px 8px;
- text-decoration: none;
- display: block;
- border-bottom: 1px dashed #4CAF50;
- }
- /* Change color of dropdown links on hover */
- .dropdown-content a:hover {
- background-color: rgb(150, 185, 125);
- font-weight: bold;
- color: rgb(255, 255, 255);
- }
- /* Show the dropdown menu on hover */
- .dropdown:hover .dropdown-content {
- display: inline-block;
- }
- /* Change the background color of the dropdown button when the dropdown content is shown */
- .dropdown:hover .dropbtn {
- background-color: #3e8e41;
- font-weight: bold;
- }
- .tooltip {
- position: relative;
- display: inline-block;
- /*border-bottom: 1px dotted black;*/
- }
- .tooltip .tooltiptext {
- visibility: hidden;
- min-width: 120px;
- background-color: black;
- color: #fff;
- text-align: center;
- border-radius: 6px;
- padding: 5px;
- position: absolute;
- z-index: 2;
- top: -5px;
- left: 110%;
- opacity: 0.8;
- word-break: keep-all;
- }
- .tooltip .tooltiptext::after {
- content: "";
- position: absolute;
- top: 50%;
- right: 100%;
- margin-top: -5px;
- border-width: 5px;
- border-style: solid;
- border-color: transparent black transparent transparent;
- }
- .tooltip:hover .tooltiptext {
- visibility: visible;
- }
- `);
- GM_addStyle(`
- .show_panel{
- z-index:11;
- font-size: 18px;
- }
- .top_panel{
- background-color: rgb(45,53,63);
- border-bottom: 0px solid rgb(20,20,20); padding:5px;
- border-bottom: 0px solid rgb(20,20,20);border-radius: 4px;border: 1px solid rgb(22,25,28);
- box-shadow:0 1px 0 rgba(162,184,204,0.25) inset,0 0 4px hsla(0,0%,0%,0.95);
- color: white;
- }
- #helper_panel{
- position:absolute;
- top:5px;
- left:740px;
- display: flex;
- align-items: center;
- }
- #edit-helper-panel{
- position:absolute;
- top:50px;
- left:740px;
- }
- #enhanced-helper-panel{
- position:absolute;
- top:50px;
- left:848px;
- }
- .panel-button{
- cursor:pointer;
- }
- #select-mode-panel{
- position:absolute; top:5px;left:370px;
- background-color: rgb(45,53,63);
- border-bottom: 0px solid rgb(20,20,20); padding:5px;
- border-bottom: 0px solid rgb(20,20,20);border-radius: 4px;border: 1px solid rgb(22,25,28);
- box-shadow:0 1px 0 rgba(162,184,204,0.25) inset,0 0 4px hsla(0,0%,0%,0.95);
- color: white;}
- `);
- /**暂时隐藏按钮 */
- GM_addStyle(`#helper_latLon .fixLoc{display:inline-block;width:55px;height:15px;overflow:hidden;}`);
- //GM_addStyle(`#helper_latLon{display:none;}`);
- /**重要添加十字鼠标 */
- // GM_addStyle('#pic_frame div{border:1px solid !important;cursor:crosshair !important;}');
- GM_addStyle(`
- #line_panel {
- position: absolute;
- top: 5px;
- right: 5px;
- background-color: #f5f5f5;
- border-bottom: 0px solid rgb(20, 20, 20);
- padding: 5px;
- border-radius: 4px;
- border: 1px solid rgb(22, 25, 28);
- box-shadow: 0 1px 0 rgba(162, 184, 204, 0.25) inset, 0 0 4px hsla(0, 0%, 0%, 0.95);
- color: black;
- width: 0px;
- }
- #show-temp,#show-wind,#show-pre,#show-cloud{
- width: 100%;
- height:210px;
- }
- #show-pre{
- display:block;
- }
- .full-screen-mode{
- float:left;
- padding-left:10px;
- }
- .full-screen-mode #float_icons{
- display:none!important;
- }
- .full-screen-mode #pic_frame div{
- border:1px solid;
- cursor:crosshair !important;
- }
- .top_panel .single-btn{
- display:inline-block;
- margin-left:5px;
- margin-right:5px;
- padding:5px;
- border: 1px solid white;
- /*background-color: #4CAF50;*/
- }
- .top_panel .single-btn:hover{
- background-color:#47CB89;
- }
- .active-button > div, .active-button.single-btn{
- background-color:green;
- }
- #compare-main, #multiviews-main{
- z-index: 12;
- position: absolute;
- top: 0px;
- right: 1%;
- bottom: 1%;
- left: 1%;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- #float_icons{
- display:none!important;
- }
- .compare-warpper {
- display: flex;
- justify-content: center;
- min-width: 1000px;
- background: white;
- font-size: 18px;
- align-items: center;
- }
- .compare-img-main {
- border: 1px dotted red;
- max-width: 1520px;
- height: 100%;
- display: grid;
- grid-template-columns: 1fr 1fr;
- background-color: white;
- }
- .compare-img-main .compare-img-wrapper {
- border: 2px solid blue;
- overflow: hidden;
- position:relative;
- }
- .compare-img-main .compare-img {
- position: relative;
- top: -50px;
- height: 120%;
- }
- .my-button{
- cursor:pointer;
- margin-left:2px;
- margin-right:2px;
- padding:1px;
- background-color: rgb(45,53,63);
- border-bottom: 0px solid rgb(20,20,20); padding:5px;
- border-bottom: 0px solid rgb(20,20,20);border-radius: 4px;border: 1px solid rgb(22,25,28);
- box-shadow:0 1px 0 rgba(162,184,204,0.25) inset,0 0 4px hsla(0,0%,0%,0.95);
- color: white;
- }
- .my-button:hover{
- background-color:orange;
- }
- .display-none{
- display:none!important;
- }
- .compare-img-info {
- position: absolute;
- top: 0;
- left: 0;
- background-color: rgba(0, 121, 13, 0.6);
- color: white;
- padding:2px;
- font-size:20px;
- font-family:"Arial","Microsoft YaHei","黑体","STXihei","华文细黑";
- }
- `);
- GM_addStyle(`
- .water-dot {
- position: relative;
- display: inline-block;
- height: 26px;
- width: 16px;
- }
- .water-dot:before,
- .water-dot:after {
- content: '';
- position: absolute;
- display: inline-block;
- }
- .water-dot:before {
- left: 0;
- width: 16px;
- height: 16px;
- border-radius: 50%;
- background-image: repeating-radial-gradient(8px 8px at 50% 8px, transparent 0%, transparent 3px, #dd1010 3px, #dd1010 100%);
- }
- .water-dot:after {
- bottom: 0;
- left: 50%;
- border: 14px solid #dd1010;
- border-bottom-width: 0;
- border-right-width: 7px;
- border-left-width: 7px;
- transform: translate(-50%,0);
- border-bottom-color: transparent;
- border-right-color: transparent;
- border-left-color: transparent;
- }
- .water-dot.scale-lg{
- transform: scale(1.5);
- }
- `);
- GM_addStyle(`.show_panel{z-index:11;}
- #pic_frame,#main_frame{
- position:relative;
- }
- #map-pointer {
- position: absolute;
- top: 22px;
- left: 0px;
- /*background-color: rgba(0, 152, 50, 0.7);*/
- color: white;
- /*width:15px;*/
- /*height:15px;*/
- display:inline-block;
- padding:2px;
- z-index:10;
- cursor:pointer;
- }
- #cv-draw-line{
- position: absolute;
- z-index:9;
- left:0px;
- cursor:crosshair;
- }
- #wrap-draw-tc{
- display: inline-block;
- position: absolute !important;
- z-index: 1;
- border:none !important;
- margin-left: 37px;
- pointer-events:none;
- left: 0;
- top: 0 !important;
- }
- `);
- }
- // let openMv = document.getElementById('open-mv');
- // openMv.addEventListener('click',()=>{
- // elemsConfig.mvImgDOM.mode = 'multiElem';
- // });
- /**
- * 地图单点标志
- */
- function createMapIndicator() {
- let wrapDiv = document.querySelector('#main_frame');
- let pointer = utils.createElement('div', { id: 'map-pointer', draggable: 'true', class: 'display-none' });
- pointer.innerHTML = '<span class="water-dot scale-lg"></span>'
- wrapDiv.insertAdjacentElement('afterbegin', pointer);
- //保存位置的状态值
- var pos = {
- // parent_top:0,
- // parent_left:0,
- // cur_top:0,
- // cur_left:0,
- x_diff: 0,// 鼠标相对目标物的位置
- y_diff: 0,
- }
- function allowDrop(ev) { //ev是事件对象
- ev.preventDefault(); //取消事件已经关联的默认活动
- }
- function drag(ev) {
- //dataTransfer是一个媒介,将目标对象放入媒介
- //dataTransfer对象用来保存被拖动的数据,仅在拖动事件有效
- //这里将被拖动元素的id保存为名为Text的键值对中
- ev.dataTransfer.setData("Pointer", ev.target.id);
- //获取被拖动对象相对于上层元素顶边和左边位置
- let mouseXY = utils.getElemRelPos(ev.currentTarget, ev.clientX, ev.clientY);
- // let eStyle = getComputedStyle(ev.target);
- pos.x_diff = mouseXY.x;
- pos.y_diff = mouseXY.y;
- // console.log('current');
- // console.log(ev.currentTarget);
- // console.log(ev.target);
- // pos.parent_top=ev.target.offsetTop;
- // pos.parent_left=ev.target.offsetLeft;
- // pos.cur_top=ev.screenY;
- // pos.cur_left=ev.screenX;
- // console.log(mouseXY);
- // console.log(eStyle.marginLeft);
- // console.log(ev);
- }
- function drop(ev) {
- var new_top, new_left;
- ev.preventDefault();
- // alert(2);
- var data = ev.dataTransfer.getData("Pointer"); //从媒介中获取目标对象
- var elem = document.getElementById(data);
- //这里不能这样使用,因为offset*的值是只读的,不能改变
- // elem.offsetLeft=v.parent_left+ev.screenX-v.cur_left+"px";
- // elem.offsetTop=v.parent_top+ev.screenY-v.cur_top+"px";
- let target = document.querySelector('#pic_frame img[style~="inline;"]');
- let mouseXY = utils.getElemRelPos(target, ev.clientX, ev.clientY);
- // let mouseXY = utils.getElemRelPos(ev.target,ev.clientX, ev.clientY);
- // console.log(ev.target);
- // let eStyle = getComputedStyle(elem);
- // console.log(mouseXY);
- // console.log(mouseXY.x+eStyle.width);
- // 此处有微小的位移
- elem.style.marginLeft = mouseXY.x - pos.x_diff + 35.8 + "px";
- elem.style.marginTop = mouseXY.y - pos.y_diff + "px";
- // console.log([parseFloat(elem.style.marginTop)+23.2 + 12.3,parseFloat(elem.style.marginLeft)+10]);
- let newMouseXY = {
- x: parseFloat(elem.style.marginLeft) - 29.31,
- // x:parseFloat(elem.style.marginLeft) + 5.0,
- y: parseFloat(elem.style.marginTop) + 33.066,
- };
- const loc = helperConfig.matchLoc(newMouseXY, helperConfig.matchParam);
- elemsConfig.latLonInput.lat.innerHTML = loc.lat; // mouseXY.y
- elemsConfig.latLonInput.lon.innerHTML = loc.lon; // mouseXY.x
- elemsConfig.fixPoint = { lat: loc.lat, lon: loc.lon };
- // console.log(elemsConfig.fixPoint);
- utils.showTimeSeries(elemsConfig.fixPoint);
- // elem.style.marginLeft=pos.parent_left+ev.screenX-pos.cur_left-1+"px";
- // elem.style.marginTop=pos.parent_top+ev.screenY-pos.cur_top-23.2+"px";
- /* TODO
- const imgXY = {
- x: elem.style.marginLeft;
- y: elem.style.marginTop;
- }
- const loc = helperConfig.matchLoc(imgXY, helperConfig.matchParam);
- elemsConfig.pointerPoint.lat = loc.lat;
- elemsConfig.pointerPoint.lon = loc.lon;
- utils.showTimeSeries(elemsConfig.pointerPoint);
- */
- }
- pointer.addEventListener('dragstart', drag);
- wrapDiv.addEventListener('dragover', allowDrop);
- wrapDiv.addEventListener('drop', drop);
- }
- /**
- * 经纬度到图像位置
- */
- function latlon2XY(loc = { lat: 10, lon: 120 }) {
- const imgXY = helperConfig.matchImgXY(loc, helperConfig.matchParam);
- return imgXY;
- }
- function createCrossSectionCanvas() {
- // let wrapDiv = document.querySelector('#main_frame');
- let wrapDiv = document.querySelector('#pic_frame');
- const cv = utils.createElement('canvas', { id: 'cv-draw-line', class: 'display-none', width: "800", height: "600", style: "border:1px solid #d3d3d3;" });
- wrapDiv.insertAdjacentElement('afterbegin', cv);
- const ctx = cv.getContext('2d');
- const line = { start: [0, 0], end: [0, 0], init: false };
- const cvMsMove = function (ev) {
- // console.log('test2');
- ctx.clearRect(0, 0, 800, 600);
- ctx.beginPath();
- ctx.lineWidth = 3;
- let mouseXY = utils.getElemRelPos(ev.target, ev.clientX, ev.clientY);
- line.end = [mouseXY.x, mouseXY.y];
- ctx.moveTo(...line.start);
- ctx.lineTo(...line.end);
- ctx.strokeStyle = "green";
- ctx.stroke();
- // console.log(line);
- }
- const cvMsClick = function (ev) {
- // console.log('test');
- if (line.init) {
- cv.removeEventListener('mousemove', cvMsMove, false);
- // console.log(elemsConfig.latLonInput.lon.innerText,elemsConfig.latLonInput.lat.innerText);
- const deltaX = 37.11666870117187;
- line.startLatlon = {
- x: line.start[0] - deltaX,
- y: line.start[1],
- }
- line.endLatlon = {
- x: line.end[0] - deltaX,
- y: line.end[1],
- }
- line.startLatlon.loc = helperConfig.matchLoc(line.startLatlon, helperConfig.matchParam);
- line.endLatlon.loc = helperConfig.matchLoc(line.endLatlon, helperConfig.matchParam);
- console.log(line);
- utils.showCross(line.startLatlon.loc, line.endLatlon.loc)
- line.init = false;
- } else {
- // ctx.beginPath();
- // ctx.lineWidth=10;
- // ctx.moveTo(0,0);
- // ctx.lineTo(50,50);
- // ctx.strokeStyle="green";
- // ctx.stroke();
- let mouseXY = utils.getElemRelPos(ev.target, ev.clientX, ev.clientY);
- line.start = [mouseXY.x, mouseXY.y];
- cv.addEventListener('mousemove', cvMsMove, false);
- line.init = true;
- }
- }
- cv.addEventListener('click', cvMsClick, false);
- ctx.fillStyle = 'rgba(255,255,255,0)';
- }
- setTimeout(() => { createCrossSectionCanvas() }, 5000);
- /*
- 绘制台风部分
- */
- function createSvgTC() {
- let wrapDiv = document.querySelector('#pic_frame');
- const svgTc = utils.createElement('span', { id: 'wrap-draw-tc', class: 'display-none', width: "800", height: "600" });
- wrapDiv.insertAdjacentElement('afterbegin', svgTc);
- // console.log('getTime');
- }
- // setTimeout(()=>{createSvgTC()},5000);
- async function showSvgTC() {
- // if(proxyConfig.tcShowLock) return;
- // proxyConfig.tcShowLock = true;
- let svgTC = document.querySelector('#wrap-draw-tc');
- if (!svgTC) {
- createSvgTC();
- svgTC = document.querySelector('#wrap-draw-tc');
- }
- svgTC.classList.remove('display-none');
- const fcTime = utils.getFcTime();
- proxyConfig.preRegion = unsafeWindow._region;
- proxyConfig.preTime = fcTime.date + fcTime.hr;
- const initTime = moment(fcTime.date + fcTime.hr, 'YYYY-MM-DDHH');
- const sT = moment(initTime).add(7, 'hours').format('YYYY-MM-DD%20HH:mm');
- const eT = moment(initTime).add(9, 'hours').format('YYYY-MM-DD%20HH:mm');
- // demoUrl = 'https://trident.gdmo.gq/api?interface=tc-ens>=2020-07-29%2007:00<=2020-07-29%2009:00&dateFormat=YYYY-MM-DD%20HH:mm&ins=ecmwf&basin=WPAC&spe=all';
- // 接口为北京时
- const url = `https://trident.gdmo.gq/api?interface=tc-ens>=${sT}<=${eT}&dateFormat=YYYY-MM-DD%20HH:mm&ins=ecmwf&basin=WPAC&spe=all`;
- let jsonRaw = await utils.getJSON(url)
- .catch(err => {
- // proxyConfig.tcShowLock = false;
- throw err;
- });
- // proxyConfig.tcShowLock = false;
- let tcArr = jsonRaw.data;
- if (tcArr.length) {
- let allTC = tcUtil.catTC(tcArr);
- let cyclonesWrap = allTC[0].ins[0];
- if (!cyclonesWrap) return console.error('没数据');
- // console.log(cyclonesWrap);
- drawTCMap(cyclonesWrap.tc);
- } else {
- let errorNotice = GM_notification({ text: '当前没有台风数据', image: 'http://10.148.8.228/images/logo.png', title: '数据缺失', timeout: 3000 });
- if (errorNotice) setTimeout(() => errorNotice.remove(), 3000);
- d3.select("#wrap-draw-tc > svg").remove();
- }
- }
- function toggleTCMode(whichBtn) {
- if (whichBtn === 'tcShow') {
- proxyConfig.showTcMode = !proxyConfig.showTcMode;
- } else if (whichBtn === 'detShow') {
- proxyConfig.showDetTcMode = !proxyConfig.showDetTcMode;
- } else if (whichBtn === 'ensShow') {
- proxyConfig.showEnsTcMode = !proxyConfig.showEnsTcMode;
- } else {
- console.error('不正确的参数 in toggleTCMode')
- }
- }
- function drawTCMap(multiTC) {
- // console.log(multiTC);
- // TODO 缺少 projection 和 path 函数
- let timeInterval = tcUtil.model[multiTC[0].ins].interval;
- function path(geoData = { type: "LineString", coordinates: [111.5, 23.5] }) {
- if (geoData.type === "LineString") {
- let loc0 = { lon: geoData.coordinates[0][0], lat: geoData.coordinates[0][1] };
- let iXY0 = latlon2XY(loc0);// {x,y}
- let loc1 = { lon: geoData.coordinates[1][0], lat: geoData.coordinates[1][1] };
- let iXY1 = latlon2XY(loc1);// {x,y}
- let svgDstring = `M${iXY0.x},${iXY0.y} L${iXY1.x},${iXY1.y}`;
- return svgDstring;
- } else {
- let loc = { lon: geoData.coordinates[0][0], lat: geoData.coordinates[0][1] };
- let iXY = latlon2XY(loc);
- return iXY;
- }
- }
- let allLineArr = new Array();
- for (let iTc = 0; iTc < multiTC.length; iTc++) {
- let tcRaw = multiTC[iTc];
- let catArr = tcRaw.tracks
- .map(member => member.track)
- .map(track => {
- let twoPointLineArr = [];
- for (let i = 0; i < track.length - 1; i++) {
- let point0 = track[i][1];
- let point1 = track[i + 1][1];
- let nextWind = track[i + 1][3];
- let nextCat = tcUtil.wind2cat(nextWind);
- let nextColor = tcUtil.tcColor[nextCat];
- let time0 = track[i][0];
- let time1 = track[i + 1][0];
- if (time1 - time0 > timeInterval * 2) continue;
- const distance = Math.sqrt(Math.pow(point1[0] - point0[0], 2) + Math.pow(point1[1] - point0[1], 2));
- if (distance > 9) continue; // 如果大于9个经纬度则断线
- twoPointLineArr.push({
- line: { type: "LineString", coordinates: [point0, point1] },
- nextCat,
- nextColor,
- curCat: tcUtil.wind2cat(track[i][3])
- });
- }
- return twoPointLineArr;
- })
- .reduce((acc, val) => acc.concat(val), []);
- allLineArr.push(catArr);
- }
- allLineArr = allLineArr.reduce((acc, val) => acc.concat(val), []);
- d3.select("#wrap-draw-tc > svg").remove();
- let baseMap = d3
- .select('#wrap-draw-tc')
- .append("svg")
- .attr("width", 800)
- .attr("height", 600)
- .attr("class", "map-svg");
- let tcEnsSvgG = baseMap.append("g").attr("class", "svg-tc-ens");
- if (proxyConfig.showEnsTcMode) {
- tcEnsSvgG
- .selectAll("path")
- .data(allLineArr)
- .enter()
- .append("path")
- .attr("d", d => path(d.line))
- .attr("class", d => `track-line ${d.nextCat}`)
- .style("stroke", d => 'rgb(74, 80, 87)')
- .attr("opacity", 0.6);
- // .style("stroke", d => d.nextColor)
- let allPointArr = new Array();
- for (let iTc = 0; iTc < multiTC.length; iTc++) {
- let tcRaw = multiTC[iTc];
- let pointArr = tcRaw.tracks
- .map(member => member.track)
- .map(track =>
- track.map(point => {
- let cat = tcUtil.wind2cat(point[3]);
- return {
- pointXY: path({ type: "Point", coordinates: [point[1]] }),
- // project: projection(point[1]),
- color: tcUtil.tcColor[cat],
- cat
- };
- })
- )
- .reduce((acc, val) => acc.concat(val), []);
- // console.log(pointArr);
- allPointArr = allPointArr.concat(pointArr);
- }
- // console.log(allPointArr);
- let pointSvg = tcEnsSvgG.append("g");
- pointSvg.attr("class", "point-g");
- pointSvg
- .selectAll("circle")
- .data(allPointArr)
- .enter()
- .append("circle")
- .attr("class", "point")
- .attr("cx", d => d.pointXY.x)
- .attr("cy", d => d.pointXY.y)
- .attr("r", 3)
- .attr("opacity", 0.8)
- .style("stroke", d => d.color)
- .style("stroke-width", 1.0)
- .style("fill", 'none');
- }
- if (proxyConfig.showDetTcMode) {
- /* 确定性预报 */
- let allDetCatArr = new Array();
- for (let iTc = 0; iTc < multiTC.length; iTc++) {
- let tcRaw = multiTC[iTc];
- if (!tcRaw.detTrack || !tcRaw.detTrack.track) continue;//不存在退出
- let detArr = (() => {
- let track = tcRaw.detTrack.track
- let twoPointLineArr = [];
- for (let i = 0; i < track.length - 1; i++) {
- let point0 = track[i][1];
- let point1 = track[i + 1][1];
- let nextWind = track[i + 1][3];
- let nextCat = tcUtil.wind2cat(nextWind);
- let nextColor = tcUtil.tcColor[nextCat];
- let time0 = track[i][0];
- let time1 = track[i + 1][0];
- if (time1 - time0 > timeInterval * 2) continue;// 大于时间间隔跳过连线
- const distance = Math.sqrt(Math.pow(point1[0] - point0[0], 2) + Math.pow(point1[1] - point0[1], 2));
- if (distance > 9) continue; // 如果大于9个经纬度则断线
- twoPointLineArr.push({
- line: { type: "LineString", coordinates: [point0, point1] },
- nextCat,
- nextColor,
- curCat: tcUtil.wind2cat(track[i][3])
- });
- }
- return twoPointLineArr;
- })();
- allDetCatArr.push(detArr);
- }
- allDetCatArr = allDetCatArr.reduce((acc, val) => acc.concat(val), []);
- let allDetPointArr = new Array();
- for (let iTc = 0; iTc < multiTC.length; iTc++) {
- let tcRaw = multiTC[iTc];
- if (!tcRaw.detTrack || !tcRaw.detTrack.track) continue;//不存在退出
- const detPoints = tcRaw.detTrack.track
- .map(point => {
- let cat = tcUtil.wind2cat(point[3]);
- return {
- pointXY: path({ type: "Point", coordinates: [point[1]] }),
- color: tcUtil.tcColor[cat],
- cat
- };
- });
- allDetPointArr = allDetPointArr.concat(detPoints);
- }
- const detTrackSvg = baseMap.append("g").attr("class", "svg-tc-det");
- detTrackSvg
- .selectAll("path")
- .data(allDetCatArr)
- .enter()
- .append("path")
- .attr("d", d => path(d.line))
- .attr("class", d => `track-line-det ${d.nextCat}`)
- .style("stroke", d => d.nextColor)
- .style("stroke-width", 3);
- const detPointSvg = detTrackSvg.append("g");
- detPointSvg.attr("class", "point-g");
- detPointSvg
- .selectAll("circle")
- .data(allDetPointArr)
- .enter()
- .append("circle")
- .attr("class", "point")
- .attr("cx", d => d.pointXY.x)
- .attr("cy", d => d.pointXY.y)
- .attr("r", 3.5)
- .style("fill", d => d.color)
- .style("stroke", d => d.color)
- .style("stroke-width", 1.0)
- }
- }
- let tcUtil = {
- worldGeo: null,
- geoMap: [],
- tcColor: {
- SuperTY: "rgb(128,0,255)",
- STY: "rgb(153,20,8)",
- TY: "rgb(255,0,0)",
- STS: "rgb(255,128,0)",
- TS: "rgb(0,0,255)",
- TD: "rgb(105,163,74)",
- LOW: "rgb(85,85,79)"
- },
- wind2cat(wind) {
- if (wind >= 10.8 && wind < 17.2) {
- return "TD";
- } else if (wind >= 17.2 && wind < 24.5) {
- return "TS";
- } else if (wind >= 24.5 && wind < 32.7) {
- return "STS";
- } else if (wind >= 32.7 && wind < 41.5) {
- return "TY";
- } else if (wind >= 41.5 && wind < 51.0) {
- return "STY";
- } else if (wind >= 51.0) {
- return "SuperTY";
- } else {
- return "LOW";
- }
- },
- timeColor: [
- { name: "H24", color: "rgb(0,0,0)" },
- { name: "H48", color: "rgb(255,0,0)" },
- { name: "H72", color: "rgb(0,140,48)" },
- { name: "H96", color: "rgb(255,128,0)" },
- { name: "H120", color: "rgb(0,0,102)" },
- { name: "H144", color: "rgb(0,255,0)" },
- { name: "H168", color: "rgb(153,20,8)" },
- { name: "H192", color: "rgb(0,255,255)" },
- { name: "H216", color: "rgb(255,0,255)" },
- { name: "H240", color: "rgb(178,178,178)" }
- ],
- matchTimeColor(time = 24) {
- let count = Math.ceil(time / 24) - 1;
- if (count === -1) count = 0; // 颜色下边界
- let colorLen = tcUtil.timeColor.length;
- if (count > colorLen - 1) count = colorLen - 1; //超过颜色上界
- return tcUtil.timeColor[count].color;
- },
- model: {
- ecmwf: {
- enNumber: 51,
- interval: 6,
- timeRange() {
- return Array.from(new Array(40), (val, index) => index * 6);
- }
- },
- NCEP: {
- enNumber: 21,
- interval: 6,
- timeRange() {
- return Array.from(new Array(40), (val, index) => index * 6);
- }
- },
- "ncep-R": {
- enNumber: 21,
- interval: 12,
- timeRange() {
- return Array.from(new Array(30), (val, index) => index * 12);
- }
- },
- "ukmo-R": {
- enNumber: 35,
- interval: 12,
- timeRange() {
- return Array.from(new Array(30), (val, index) => index * 12);
- }
- },
- "ecmwf-R": {
- enNumber: 35,
- interval: 12,
- timeRange() {
- return Array.from(new Array(30), (val, index) => index * 12);
- }
- },
- UKMO: {}
- },
- catTC(tcArr = []) {
- let timeSet = new Set(tcArr.map(tc => tc.initTime)); //选出日期并去重
- let insSet = new Set(tcArr.map(tc => tc.ins));
- let tcAll = []
- for (let iTime of timeSet) {
- let timeWrap = { time: iTime, ins: [] };
- let sameTime = tcArr.filter(tc => tc.initTime == iTime);
- for (let iIns of insSet) {
- let insWrap = { ins: iIns, tc: [] }
- let sameIns = sameTime.filter(tc => tc.ins == iIns);
- insWrap.tc = sameIns;
- timeWrap.ins.push(insWrap);
- }
- tcAll.push(timeWrap);
- }
- // [ { time: '2020-05-15T00:00:00.000Z', ins: [ {} ] } ]
- return tcAll;
- },
- };
- /** 多模式部分代码 */
- function GetURLFromRule({ year = '2020', month = '02', day = '25', hour = '12', fc = '000', minute = '', region, eleName, modelFileName, model }) {
- let imgUrl = this.rule.replace(/{yyyy}/g, year)
- .replace(/{mm}/g, month)
- .replace(/{dd}/g, day)
- .replace(/{HH}/g, hour)
- .replace(/{hhh}/g, fc)
- .replace(/{mi}/g, minute)
- .replace(/{yyyymmdd}/g, year + month + day)
- .replace(/{date}/g, year + month + day)
- return imgUrl;
- }
- function GetTimeInfo() {
- let timeInfo = {
- year: this.year,
- month: this.month,
- day: this.day,
- hour: this.hour,
- fc: this.fc,
- minute: this.minute ? this.minute : undefined,
- }
- return timeInfo;
- }
- function getImgInfoFromURL(url = 'http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/20200225/ecmwffine_hn_mslp_000_2020022512.png') {
- let model, region, date, modelFileName, eleName, fc, year, month, day, hour, minute;
- let regPatten;
- let reg = /http:.*?\/znwp\/(.*?)\/(.*?)\/(\d{8})\/(.*?)_(.*?)_(.*?)_(\d{3})_(\d{4})(\d{2})(\d{2})(\d{2})(.*?$)/;
- let matchUrl = url.match(reg);
- if (matchUrl) {
- regPatten = 0;
- model = matchUrl[1];
- region = matchUrl[2];
- date = matchUrl[3];
- modelFileName = matchUrl[4];
- eleName = matchUrl[6];
- fc = matchUrl[7];
- year = matchUrl[8];
- month = matchUrl[9];
- day = matchUrl[10];
- hour = matchUrl[11];
- }
- else {
- let reg2 = /http:.*?\/znwp\/(.*?)\/(.*?)\/+(\d{8})\/(\d{2})\/(.*?)_(.*?)_(.*?)_m(\d{3})_(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(.*?$)/;
- matchUrl = url.match(reg2);
- if (matchUrl) {
- regPatten = 1;
- model = matchUrl[1];
- region = matchUrl[2];
- date = matchUrl[3];
- modelFileName = matchUrl[5];
- eleName = matchUrl[7];
- fc = matchUrl[8];
- year = matchUrl[9];
- month = matchUrl[10];
- day = matchUrl[11];
- hour = matchUrl[12];
- minute = matchUrl[12];
- } else {
- throw new Error('无法匹配的图像地址:' + url)
- }
- }
- // ["http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/20200225/ecmwffine_hn_mslp_000_2020022512.png", "ecmwffine_b", "hn", "20200225", "ecmwffine", "hn", "mslp", "000", "2020", "02", "25", "12", ".png"]
- let info = { regPatten, model, region, date, modelFileName, eleName, fc, year, month, day, hour, minute };
- info.getTimeInfo = GetTimeInfo;
- return info;
- }
- function matchModel2Rule(model = '', region, eleName) {
- let matchModel = modelMeta.find(v => v.model === model);
- if (!matchModel) throw new new ReferenceError('未找到匹配的模式');
- const rule = matchModel.rule;
- //TODO: 有些特殊模式需要特殊判断
- let newRule = `http://10.148.8.228/files_home/znwp/${model}/{range}/{yyyy}{mm}{dd}/` + rule;
- if (model === 'grapes1km') newRule = `http://10.148.8.228/files_home/znwp/${model}/{range}/` + rule;
- newRule = newRule.replace(/{range}/g, region)
- .replace(/{name}/g, eleName);
- const newInfo = {
- model,
- region,
- eleName,
- modelName: matchModel.modelName,
- modelFileName: matchModel.modelName,
- };
- newInfo.getUrl = GetURLFromRule;
- newInfo.rule = newRule;
- return newInfo;
- }
- // testMain();
- function matchMVRule(url = 'http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/20200225/ecmwffine_hn_mslp_000_2020022512.png', mvRule) {
- const imgInfo = getImgInfoFromURL(url);
- const infoList = [imgInfo.model, imgInfo.region, imgInfo.eleName];
- let matchedRules = [];
- function isMatchCondition(iInfo, rule) {
- let condition = false;
- if (Array.isArray(rule)) {
- condition = rule.includes(iInfo);
- } else if (typeof (rule) === 'string') {
- condition = rule === iInfo;
- } else if (!Boolean(rule)) {// rule === null
- condition = true;
- } else {
- throw new TypeError('无法识别的规则类型:' + item);
- }
- return condition;
- }
- for (let item of mvRule) {
- // console.log(mvRule);
- const fitIndex = item.rule.findIndex(list => {// 查找四个规则中是哪个匹配
- let isMatch = list.every((rule, i) => {
- const iInfo = infoList[i];
- return isMatchCondition(iInfo, rule);
- });
- return isMatch;
- })
- if (fitIndex === -1) {
- continue;
- } else {
- let copyItem = Object.assign({}, item);
- copyItem.fitIndex = fitIndex;
- matchedRules.push(copyItem);
- }
- }
- return matchedRules;
- }
- function getMVSrcListFromRule(url, ruleItem = { rule: [] }) {
- let imgList = [0, 0, 0, 0];
- const imgInfo = getImgInfoFromURL(url);
- const infoList = [imgInfo.model, imgInfo.region, imgInfo.eleName];
- const rule = ruleItem.rule;
- for (let i = 0; i < rule.length; i++) {// rule.length = 4;
- if (i === ruleItem.fitIndex) {
- imgList[i] = url;
- } else {
- let iRule = rule[i];// ['ncep',['oy','cn','hn','gd',],null],
- let iBaseInfo = iRule.map((ele, j) => {
- if (Array.isArray(ele)) {
- return infoList[j];
- } else if (typeof (ele) === 'string') {
- return ele;
- } else if (!Boolean(ele)) {// rule === null
- return infoList[j];
- } else {
- throw new TypeError('无法识别的规则类型:' + iRule);
- }
- })
- const iImgRule = matchModel2Rule(iBaseInfo[0], iBaseInfo[1], iBaseInfo[2]);
- imgList[i] = iImgRule.getUrl(imgInfo.getTimeInfo());
- }
- }
- return imgList;
- }
- if(location.href.includes('gisloader')){
- GM_addStyle(`
- .maps-more-image .maps-more-header {
- position: absolute !important;
- font-size: 22px !important;
- z-index: 20;
- background-color: #ededed6e !important;
- color: #1400ff !important;
- text-shadow: #FC0 1px 0 10px;
- left: 5%;
- }
- #mapMain .maps-more-image .maps-header-info {
- font-size: 20px !important;
- }
- #mapMain .maps-more-image .map-img {
- top: 49%!important;
- left: 47%!important;
- height: 123%!important;
- }
- .group-mode-instruction {
- height: auto;
- }
- .group-mode[data-drop-index="0"] {
- z-index: 10!important;
- }
- .group-mode[data-drop-index="1"] {
- z-index: 9!important;
- }
- .group-mode[data-drop-index="2"] {
- z-index: 8;
- }
- .group-mode[data-drop-index="3"] {
- z-index: 7;
- }
- .group-mode[data-drop-index="4"] {
- z-index: 6;
- }
- .group-mode[data-drop-index="5"] {
- z-index: 5;
- }
- .group-mode[data-drop-index="6"] {
- z-index: 4;
- }
- .group-mode[data-drop-index="7"] {
- z-index: 3;
- }
- .group-mode[data-drop-index="8"] {
- z-index: 2;
- }
- #mapMain .maps-more-image .maps-more-body {
- overflow: hidden;
- height: 100%!important;
- }
- `);
- }