☰

NWP helper in GuangDong

广东省气象业务网数值预报页面增强

当前为 2020-05-14 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        NWP helper in GuangDong
  3. // @description 广东省气象业务网数值预报页面增强
  4. // @namespace   minhill.com
  5. // @include     http://10.148.8.228/to_fore_homepage.action*
  6. // @version     1.5.3
  7. // @require     https://lib.baomitu.com/echarts/4.6.0/echarts.min.js
  8. // @require     https://lib.baomitu.com/moment.js/2.24.0/moment.min.js
  9. // @grant       GM_addStyle
  10. // @grant       @grant unsafeWindow
  11. // @grant       GM_openInTab
  12. // @grant       GM_xmlhttpRequest
  13. // @license     The MIT License (MIT); http://opensource.org/licenses/MIT
  14. // @connect     172.22.1.175
  15. // @connect     api.map.baidu.com
  16. // @compatible  firefox
  17. // @compatible  chrome
  18. // @note        2018/01/08 增加时效转换按钮
  19. // @note        2018/01/15 增加经纬度功能
  20. // @supportURL  https://greasyfork.org/scripts/26259
  21. // @author      Hanchy Hill
  22. // TODO 数据格式错误时显示提示
  23. // TODO require resData
  24. // TODO 风向tooltip改进
  25. // TODO 增加气压
  26. // TODO 增加集合预报-32天预报
  27. // TODO 单站停止经纬度捕捉
  28. // TODO 分钟降水时时效切换错误
  29. // TODO 显示单击的点
  30. // TODO 垂直剖面NCL测试
  31. // TODO 垂直探空曲线
  32. // TODO 降水量, 风力分级
  33. // ==/UserScript==
  34.  
  35. let mvPatternList = [
  36.   [{
  37.       "elem": "t2mm",
  38.       "elemCN": "2m气温",
  39.       "region": "cn",
  40.       "model": "ecmwffine_b",
  41.       "modelFileName":"ecmwffine"
  42.     },
  43.     {
  44.       "elem": "t2mm24",
  45.       "elemCN": "2m气温24h变温",
  46.       "region": "cn",
  47.       "model": "ecmwffine_b",
  48.       "modelFileName":"ecmwffine"
  49.     },
  50.     {
  51.       "elem": "wind10m",
  52.       "elemCN": "10m风",
  53.       "region": "cn",
  54.       "model": "ecmwffine_b",
  55.       "modelFileName":"ecmwffine"
  56.     },
  57.     {
  58.       "elem": "10gust3",
  59.       "elemCN": "10m阵风(过去3h)",
  60.       "region": "cn",
  61.       "model": "ecmwffine_b",
  62.       "modelFileName":"ecmwffine"
  63.     }]
  64. ]
  65.  
  66. let userConfig = { // 用户设置
  67.   alterDate : false, // 默认不修改时次
  68.   timelineMove: false,//是否启用滑动时间触发
  69. };
  70.  
  71. let $ = unsafeWindow.$;
  72.  
  73. const elemsConfig = {
  74.   latLonInput: undefined,
  75.   $doc:()=>unsafeWindow.$doc,
  76.   $settings:()=>unsafeWindow.$settings,
  77.   $home:unsafeWindow.$home,
  78.   fixPoint: undefined,
  79.   pointerPoint:{lat:0,lon:0},// 地图锚点位置
  80.   point01: undefined,
  81.   point02: undefined,
  82.   state:'timeseries',//'vertical','skewT'
  83.   compareImgDOM:{img:[],info:[]},//前后预报时次对比DOM引用
  84.   mvImgDOM:{//四分图DOM引用
  85.     img:[],
  86.     info:[],
  87.     mode:'multiElem',//multiTime, multiModel, multiElem,multiInitime
  88.     matchPattens:[  {
  89.       "elem": "t2mm",
  90.       "elemCN": "2m气温",
  91.       "region": "cn",
  92.       "model": "ecmwffine_b",
  93.       "modelFileName":"ecmwffine"
  94.     },
  95.     {
  96.       "elem": "t2mm24",
  97.       "elemCN": "2m气温24h变温",
  98.       "region": "cn",
  99.       "model": "ecmwffine_b",
  100.       "modelFileName":"ecmwffine"
  101.     },
  102.     {
  103.       "elem": "wind10m",
  104.       "elemCN": "10m风",
  105.       "region": "cn",
  106.       "model": "ecmwffine_b",
  107.       "modelFileName":"ecmwffine"
  108.     },
  109.     {
  110.       "elem": "10gust3",
  111.       "elemCN": "10m阵风(过去3h)",
  112.       "region": "cn",
  113.       "model": "ecmwffine_b",
  114.       "modelFileName":"ecmwffine"
  115.     },],
  116.   },
  117. };
  118.  
  119. const helperConfig = {
  120.   region:{
  121.     hn:{//华南
  122.       isMap: true,// 是否是等经纬地图
  123.       projection:'Equidistant',// 投影
  124.       latLon:{
  125.         xRight:636.98, xLeft:172.56,
  126.         yTop:56.516, yBottom:547.576,
  127.         lon0:105.0, lon1:120.0,
  128.         lat0:15.0, lat1:30.0,
  129.       },
  130.     },
  131.     cn:{//中国
  132.       isMap: true,// 是否是等经纬地图
  133.       projection:'Lambert',
  134.       latLon:{
  135.         refLon0:110.25,refLat0:20,
  136.         m0:342.98333,n0:382.51666,
  137.         // refLon0:110,refLat0:20,
  138.         // m0:338.98,n0:382.51,
  139.         refLat1:1.001,refLat2:25.0,
  140.         lonr : 80,latr :40,
  141.         mr:94.983,nr:167.51,
  142.       },
  143.  
  144.     },
  145.     oy:{//欧亚
  146.       isMap: true,// 是否是等经纬地图
  147.       projection:'Mercator',
  148.       latLon:{
  149.         xRight:692.9833, xLeft:156.9833,
  150.         yTop:54.51666, yBottom:533.51666,
  151.         lon0:60.0, lon1:160.0,
  152.         lat0:10.0, lat1:70.0,
  153.       },
  154.     },
  155.     gd:{//广东
  156.       isMap: true,// 是否是等经纬地图
  157.       projection:'Equidistant',// 投影
  158.       latLon:{
  159.         xRight:589.98334, xLeft:124.98334,
  160.         yTop:104.51666, yBottom:437.51666,
  161.         lon0:110, lon1:116,
  162.         lat0:21.0, lat1:25.0,
  163.       },
  164.     },
  165.     hy:{//海洋
  166.       isMap: true,// 是否是等经纬地图
  167.       projection:'Lambert',// 投影
  168.       latLon:{
  169.         refLon0:110,refLat0:0,
  170.         m0:274.983,n0:490.51666,
  171.         refLat1:1.001,refLat2:25.0,
  172.         lonr : 100,latr: 20,
  173.         mr:171.983,nr:270.51666,
  174.       },
  175.     },
  176.     '86st':{//单站
  177.       isMap: false,
  178.     },
  179.     rainnest:{//雨涡
  180.       isMap: false,
  181.     },
  182.  
  183.   },
  184.   currentRegion:'hn',
  185.   matchImgXY:()=>{},// 根据经纬度获取图像位置
  186.   matchLoc:()=>{},// 获取经纬度的函数
  187.   matchParam:'',// 调用上式的第二参数
  188. };
  189.  
  190.  
  191. //
  192. /**
  193.  * unsafeWindow函数
  194.  * selectProItem
  195.  */
  196.  
  197. const utils = {
  198.   changeRegion(region){
  199.     helperConfig.currentRegion = region;
  200.     return helperConfig.region[region].isMap;// 返回是否是地图
  201.   },
  202.   projection:{
  203.     Mercator:{// 墨卡托投影
  204.       calBasicInfo(lat1=0,lat2=0,n1=0,n2=0){
  205.         /*参数lat 纬度, n坐标数值
  206.         n0 赤道，d0放大系数
  207.         */
  208.         const y1 = Math.log(Math.tan(lat1)+1/Math.cos(lat1));
  209.         const y2 = Math.log(Math.tan(lat2)+1/Math.cos(lat2));
  210.         const n0 = (n1 - (y1/y2) * n2) / (1.0 - y1/y2);
  211.         const d0 = y1/(n0 - n1);
  212.         return {n0,d0};
  213.       },
  214.       calLatLon(mouseXY,dims){
  215.         // console.log(dims);
  216.         const n0 = dims.n0;
  217.         const d0 = dims.d0;
  218.         // console.log(Math.sinh((n0-mouseXY.y)*d0));
  219.         const lat = Math.atan(Math.sinh((n0-mouseXY.y)*d0));
  220.         ///---------------//
  221.         const r = dims.xLeft;
  222.         const o = dims.xRight;
  223.         const s = (dims.lon1 - dims.lon0) / (o - r);
  224.         const u = dims.lon0 + (mouseXY.x - r) * s;
  225.         return {lat:lat*180/Math.PI,lon:u};
  226.       },
  227.       calImgLoc(latlon, dims={xLeft, xRight,lon1,lon0,n0,d0}){
  228.         const n0 = dims.n0;
  229.         const d0 = dims.d0;
  230.         const sec = (x=0)=> 1/Math.cos(x);// 正割
  231.  
  232.         const lon = latlon.lon;
  233.         const r = dims.xLeft;
  234.         const o = dims.xRight;
  235.         const s = (dims.lon1 - dims.lon0) / (o - r);
  236.         const x = (lon - dims.lon0)/s + r;
  237.  
  238.         const phi = latlon.lat/180*Math.PI;
  239.         const y = n0 - Math.log(Math.tan(phi) + sec(phi))/d0;
  240.         const mouseXY = {x,y};
  241.         return mouseXY;
  242.       },
  243.     },
  244.     Equidistant:{//等经纬度
  245.       calBasicInfo(){
  246.         return helperConfig.region[helperConfig.currentRegion].latLon
  247.       },
  248.       calLatLon(mouseXY,dims){
  249.         // console.log(dims);
  250.         const r = dims.xLeft;
  251.         const o = dims.xRight;
  252.         const i = dims.yTop;
  253.         const l = dims.yBottom;
  254.         const s = (dims.lon1 - dims.lon0) / (o - r); // o - r 内框宽度 -> s = lon/height
  255.         const d = (dims.lat1 - dims.lat0) / (i - l);// i - l 内框高度  -> d = lat/width
  256.         const u = dims.lon0 + (mouseXY.x - r) * s;
  257.         const m = dims.lat1 + (mouseXY.y - i) * d;
  258.         return {lat:m,lon:u};
  259.       },
  260.       calImgLoc(latlon={lat,lon},dims){
  261.         const r = dims.xLeft;
  262.         const o = dims.xRight;
  263.         const i = dims.yTop;
  264.         const l = dims.yBottom;
  265.         const s = (dims.lon1 - dims.lon0) / (o - r); // o - r 内框宽度 -> s = lon/height
  266.         const d = (dims.lat1 - dims.lat0) / (i - l);// i - l 内框高度  -> d = lat/width
  267.         const lat = latlon.lat;
  268.         const lon = latlon.lon;
  269.         const x = (lon - dims.lon0)/s + r;
  270.         const y = (lat - dims.lat1)/d + i;
  271.         const mouseXY = {x,y};
  272.         return mouseXY;
  273.       },
  274.  
  275.     },
  276.     Lambert:{// 兰伯特投影
  277.       calBasicInfo({refLon0,refLat0,m0,n0, refLat1,refLat2,lonr,latr,mr,nr}){
  278.         /*
  279.         refLat0,refLon0，m0,n0 参考纬度、经度，屏幕X坐标，Y坐标；
  280.         屏幕坐标与实际坐标映射：
  281.           x = (m-m0)*dx // dx为x方向比例系数
  282.           y = (n0-n)*dy // dy为y方向比例系数，y方向屏幕坐标反向，所以取反
  283.         refLat1,refLat2  2个平行纬度
  284.         latr,lonr,mr,nr 选取的另外一个点的经纬度和屏幕坐标
  285.  
  286.         phi 纬度,lambda经度
  287.  
  288.          */
  289.         const ang2rad = (x=0)=> Math.PI * x/180.0;
  290.         const [phi0,phi1,phi2] = [ang2rad(refLat0),ang2rad(refLat1),ang2rad(refLat2)];
  291.         //console.log(phi0,phi1,phi2);
  292.         const lambda0 = ang2rad(refLon0);
  293.         const [tan,cos,sin,pow,PI,ln] = [Math.tan,Math.cos,Math.sin,Math.pow,Math.PI,Math.log];
  294.         const cot = (x=0)=> Math.cos(x)/Math.sin(x);// 余切
  295.         const sec = (x=0)=> 1/Math.cos(x);// 正割
  296.  
  297.         const n = ln(cos(phi1)*sec(phi2))/ln(tan(0.25*PI+0.5*phi2)*cot(0.25*PI+0.5*phi1));
  298.         const F = (cos(phi1)*pow(tan(0.25*PI+0.5*phi1),n))/n;
  299.         // n,F常量参数
  300.         let rho = (phi=0)=>F*pow(cot(0.25*PI+0.5*phi),n); // rho变量
  301.         let rho0 = rho(phi0);
  302.         let fx = (phi,lambda)=>rho(phi)*sin(n*(lambda-lambda0));
  303.         let fy = (phi,lambda)=>rho0 - rho(phi)*cos(n*(lambda-lambda0));
  304.         const dx = fx(ang2rad(latr),ang2rad(lonr))/(mr-m0);
  305.         const dy = fy(ang2rad(latr),ang2rad(lonr))/(n0-nr);
  306.         // console.log(dx,dy);
  307.         return {dx, dy, F, n, rho, rho0, lambda0, m0, n0};
  308.       },
  309.       calLatLon(mouseXY,{dx,dy,F,n,rho0, lambda0, m0,n0}){
  310.         const x = (mouseXY.x - m0)*dx;
  311.         const y = (n0-mouseXY.y)*dy;
  312.  
  313.         let rho = (x,y)=>Math.sign(n)*Math.sqrt(Math.pow(x,2)+Math.pow((rho0-y),2));
  314.  
  315.         let theta = (x,y)=>Math.atan(x/(rho0-y));
  316.         let phi = (rho)=>2*Math.atan(Math.pow(F/rho,1/n))-0.5*Math.PI;
  317.         let lambda = (theta)=>lambda0 + theta/n;
  318.         const lat = phi(rho(x,y))*180/Math.PI;
  319.         const lon = lambda(theta(x,y))*180/Math.PI;
  320.         // console.log(mouseXY.x-m0,n0-mouseXY.y);
  321.         //console.log(mouseXY.x - m0,n0-mouseXY.y);
  322.         return {lat,lon};
  323.       },
  324.       calImgLoc(latlon,{dx, dy, rho=()=>{},rho0,m0,n0, lambda0}){
  325.         const [cos,sin,PI] = [Math.cos,Math.sin,Math.PI];
  326.         const phi = latlon.lat*PI/180;
  327.         const lambda = latlon.lon*PI/180;
  328.         const originX = (phi,lambda)=>rho(phi)*sin(n*(lambda-lambda0));
  329.         const originY = (phi,lambda)=>rho0 - rho(phi)*cos(n*(lambda-lambda0));
  330.         let mouseXY = {x:0, y:0};
  331.         mouseXY.x = originX(phi,lambda)/dx + m0;
  332.         mouseXY.y = n0 - originY(phi,lambda)/dy;
  333.         return mouseXY;
  334.       }
  335.     }
  336.  
  337.   },
  338.   debounce:(fn, delay, scope)=>{
  339.     let timer = null;
  340.     // 返回函数对debounce作用域形成闭包
  341.     return function () {
  342.         // setTimeout()中用到函数环境总是window,故需要当前环境的副本；
  343.         let context = scope || this, args = arguments;
  344.         // 如果事件被触发，清除timer并重新开始计时
  345.         clearTimeout(timer);
  346.         timer = setTimeout(function () {
  347.             fn.apply(context, args);
  348.         }, delay);
  349.     }
  350.   },
  351.   throttle(fn, threshold, scope) {
  352.       let timer;
  353.       let prev = Date.now();
  354.       return function () {
  355.           let context = scope || this, args = arguments;
  356.           let now = Date.now();
  357.           if (now - prev > threshold) {
  358.               prev = now;
  359.               fn.apply(context, args);
  360.           }
  361.       }
  362.   },
  363.   showSkewT(point={lat:21,lon:120},runtime='2019012018',fcHour='18'){
  364.     const latRange = [point.lat-0.125*2,point.lat+0.125*2];
  365.     const lonRange = [point.lon-0.125*2,point.lon+0.125*2];
  366.     let fcTime = utils.getFcTime();
  367.     const initTime = moment(fcTime.date+fcTime.hr,'YYYY-MM-DDHH');
  368.     runtime = initTime.format('YYYYMMDDHH');
  369.     fcHour = fcTime.fcHour;
  370.     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`);
  371.     //            https://www.tropicaltidbits.com/analysis/models/sounding/?model=gfs&runtime=2018122418&fh=18&domain=120,122.5,20,22.5&stationID=&tc=&mode=regular
  372.   },
  373.   showVertical(p0={lat:21,lon:120},p1={lat:23,lon:130},runtime='2019012018',fcHour='18'){
  374.     let fcTime = utils.getFcTime();
  375.     const initTime = moment(fcTime.date+fcTime.hr,'YYYY-MM-DDHH');
  376.     runtime = initTime.format('YYYYMMDDHH');
  377.     fcHour = fcTime.fcHour;
  378.     let type = 'RH_and_Omega';//[FGEN,_%CE%B8%E2%82%91,_Omega,RH_and_Omega,Normal_Wind,In-Plane_Wind]
  379.     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=`);
  380.     //  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=
  381.   },
  382.   showTimeSeries(point={lat:21,lon:120}){
  383.     console.log(point);
  384.     if(point.mouseXY){
  385.       const elem = document.getElementById('map-pointer');
  386.       elem.style.marginLeft = point.mouseXY.x + 29.31 + 'px';
  387.       elem.style.marginTop = point.mouseXY.y - 33.066 + 'px';
  388.     }
  389.     const fcTime = utils.getFcTime();
  390.     const initTime = moment(fcTime.date+fcTime.hr,'YYYY-MM-DDHH');
  391.     const sT = initTime.format('YYYY-MM-DD%20HH:mm:ss');
  392.     const eT = moment(initTime).add(10*24,'hours').format('YYYY-MM-DD%20HH:mm:ss');
  393.     point.lat = utils.fix2Grid(point.lat);
  394.     point.lon = utils.fix2Grid(point.lon);//取格点位置
  395.     getTimeSeries(model='ecmwfthin',
  396.     sT,eT,
  397.     lon=point.lon,lat=point.lat,
  398.     eles=['t2mm','mn2t','mx2t','u10m','v10m','tcco','lcco','tppm']);
  399.   },
  400.   fix2Grid(number,interval=0.125){
  401.     let fixNum = Math.round(number/interval)*interval;
  402.     return fixNum;
  403.   },
  404.   getFcTime(){
  405.     const fcHour = typeof(unsafeWindow.forecastHour)==='string'?unsafeWindow.forecastHour:unsafeWindow.forecastHour[0];
  406.     let idate = unsafeWindow.$settings.date;
  407.     if(!idate.length) throw new Error('日期为空错误');
  408.     if(idate[6]=='-') idate = idate.slice(0,5)+'0'+idate.slice(5);
  409.     if(idate.length===9) idate = idate.slice(0,8)+'0'+idate.slice(8);
  410.     const hr = unsafeWindow.$settings.HH;
  411.     return {date:idate,hr,fcHour};//format->date:'2019-01-22;, hr:'12';fcHour:'000'
  412.   },
  413.   getTimeSeries(point={lat:21,lon:115},model='giftdaily',eles=[t2mm,tmax,tmin],start='2014-11-22%2000:00:00'){
  414.  
  415.     //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
  416.   },
  417.   calWind(u10,v10){
  418.     const iSpeed = Math.sqrt(Math.pow(u10,2)+Math.pow(v10,2));//风速
  419.     const iR = Math.sign(v10)*Math.acos(u10/iSpeed);//标准坐标系弧度
  420.     const arrowR = iR - Math.PI/2;//矢量箭头偏移弧度
  421.     let northDir =  -(iR + Math.PI - Math.PI/2);//与北向的角度差
  422.     if(northDir<0){
  423.       northDir = northDir + Math.PI*2;
  424.     }
  425.     const dir = northDir/Math.PI*180;
  426.     if(dir>360) dir = dir - 360;
  427.     return {speed:iSpeed,rotation:arrowR,northDir:northDir};
  428.   },
  429.   renderArrow(param, api) {
  430.     let arrowSize = 10;
  431.     var point = api.coord([
  432.         api.value(2),//dims.timeIndex
  433.         api.value(0)//5//api.value(dims.windSpeed)
  434.     ]);
  435.  
  436.     return {
  437.       type: 'path',
  438.       shape: {
  439.         //pathData: 'M31 16l-15-15v9h-26v12h26v9z',
  440.         pathData:'M250 0 L140 350 L250 250 L360 350 Z',
  441.         x: -arrowSize / 2,
  442.         y: -arrowSize / 2,
  443.         width: arrowSize,
  444.         height: arrowSize
  445.       },
  446.       rotation: api.value(1),//api.value(dims.R),//Math.PI / 8 * index;
  447.       position: point,
  448.       style: api.style({
  449.         stroke: '#555',
  450.         lineWidth: 1,
  451.         fill:'green',
  452.       })
  453.     };
  454.   },
  455.   createElement(type='div',props={}){
  456.     let newEle = document.createElement(type);
  457.     for(let attr in props){
  458.       newEle.setAttribute(attr,props[attr]);
  459.     }
  460.     return newEle;
  461.   },
  462.   getImgNow(imgSrc){
  463.     // TODO 改进匹配规则
  464.     let fcTime = utils.getFcTime();
  465.     //const initTime = moment(fcTime.date+fcTime.hr,'YYYY-MM-DDHH');
  466.     // runtime = initTime.format('YYYYMMDDHH');
  467.     fcHour = fcTime.fcHour;
  468.     let url = imgSrc||unsafeWindow.imgSrc[fcHour];
  469.     if(!url) throw new Error('无法获取初始图像');
  470.     
  471.     // url = 'http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/20190128/ecmwffine_hn_mslp_000_2019012800.png';
  472.     const reg = /(http:.*?\/)(\d{8})(.*?_)(\d+)_(\d+)(.*?$)/;
  473.     const matchUrl = url.match(reg);
  474.     /*0: "http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/20190128/ecmwffine_hn_mslp_030_2019012800.png"
  475. 1: "http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/"
  476. 2: "20190128"
  477. 3: "/ecmwffine_hn_mslp_"
  478. 4: "030"
  479. 5: "2019012800"
  480. 6: ".png"
  481. index: 0
  482. input: "http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/20190128/ecmwffine_hn_mslp_030_2019012800.png"
  483. length: 7 */
  484.  
  485.     const base = [matchUrl[1],matchUrl[3],matchUrl[6]];
  486.     const model = base[0].match(/znwp\/(.*?)\//)[1];
  487.     // console.log(base[1]);
  488.     const eleName = base[1].match(/_.*?_(.+?)_$/)[1];
  489.     const date = matchUrl[2];
  490.     const hour = matchUrl[4];
  491.     const initDate = matchUrl[5];
  492.  
  493.     const imgInfo = {
  494.       url,
  495.       date,
  496.       base,
  497.       hour,
  498.       initDate,
  499.       model,
  500.       eleName,
  501.       getUrl(date=date,hour=hour,initDate=initDate){
  502.         return base[0]+date+base[1]+hour+'_'+initDate+base[2];
  503.       }
  504.     }
  505.     return imgInfo;
  506.   },
  507.   matchImgPattern(pat={elem: "t2mm",elemCN: "2m气温",region: "cn",model: "ecmwffine_b",modelFileName:"ecmwffine"}){
  508.     let base0 = `http://10.148.8.228/files_home/znwp/${pat.model}/${pat.region}/`;
  509.     let base1 = `/${pat.modelFileName}_${pat.region}_${pat.elem}_`;
  510.     return {
  511.       // base:['http://10.148.8.228/files_home/znwp/ecmwffine_b/hn/','/ecmwffine_hn_mslp_','.png'],
  512.       base:[base0,base1,'.png'],
  513.     };
  514.   },
  515.   getImgUrl(base,date,hour,initDate){
  516.     return base[0]+date+base[1]+hour+'_'+initDate+base[2];
  517.   },
  518.   paddingInt(num, length=3) {
  519.     //这里用slice和substr均可
  520.     return (Array(length).join("0") + num).slice(-length);
  521.   },
  522.   getElemRelPos (e, t, n) {// e.target, e.clientX, e.clientY
  523.     var a = e.getBoundingClientRect(),
  524.         r = getComputedStyle(e);
  525.     return {
  526.         x: t - (a.left + parseFloat(r.paddingLeft) + parseFloat(r.borderLeftWidth)),
  527.         y: n - (a.top + parseFloat(r.paddingTop) + parseFloat(r.borderTopWidth))
  528.     };
  529.   },
  530. };
  531.  
  532.  
  533. var NWP_init = function(){
  534.     var fcHour = document.getElementById('forecast_hour');
  535.     var iniTime = document.getElementById('create_day');
  536.     var infoBar = document.getElementById('pic_info');
  537.     var referNode = document.getElementById('to_contrast');
  538.     var divTime = document.createElement('span');
  539.     divTime.textContent = 'hello world';
  540.     divTime.setAttribute('class', 'lcTime');
  541.     divTime.style.position = 'relative';
  542.     divTime.style.float = 'right';
  543.     divTime.style.right = '120px';
  544.     infoBar.insertBefore(divTime, referNode);
  545.     // document.querySelector("#forecast_hours div").textContent = "日期";
  546.  
  547.     // create an observer instance
  548.     var UTC8 = new MutationObserver(function (mutations) {
  549.       var dateString = iniTime.textContent.match(/(\d+).*?(\d+).*?(\d+).*?(\d+)/);
  550.       var fcDate = [];
  551.       fcDate[0] = Number(dateString[1]);
  552.       fcDate[1] = Number(dateString[2]);
  553.       fcDate[2] = Number(dateString[3]);
  554.       fcDate[3] = Number(dateString[4]);
  555.       fcDate[4] = Number(fcHour.textContent.match(/\d+/));
  556.       fcDate[5] = new Date(fcDate[0], fcDate[1] - 1, fcDate[2], fcDate[3] + fcDate[4] + 8);
  557.       var localTime = String(fcDate[5].getMonth() + 1) + '月' + fcDate[5].getDate() +
  558.       '日' + fcDate[5].getHours() + '时 GMT+8';
  559.       divTime.textContent = localTime;
  560.     });
  561.     // configuration of the observer:
  562.     var config = {
  563.       attributes: true,
  564.       childList: true,
  565.       characterData: true
  566.     };
  567.     UTC8.observe(fcHour, config);
  568.     // later, you can stop observing
  569.     //observer.disconnect();
  570.     //
  571.     //
  572.     /////////////////////////////////////////////////////////////
  573.  
  574.  
  575.     //
  576.     ///
  577.     ////////////////////修改时效列/////////////////////////////////////////
  578.     var alterTimelist = function (mutations) {
  579.       //alert(timeBar.length);
  580.       if(userConfig.timelineMove){
  581.         timeMoveOver();//是否启用滑动时间触发
  582.       }
  583.       if(!userConfig.alterDate) return; // 不修改则直接返回
  584.       var dateString = iniTime.textContent.match(/(\d+).*?(\d+).*?(\d+).*?(\d+)/);
  585.       var fcDate = [];
  586.         fcDate[0] = Number(dateString[1]);
  587.         fcDate[1] = Number(dateString[2]);
  588.         fcDate[2] = Number(dateString[3]);
  589.         fcDate[3] = Number(dateString[4]);
  590.       for (let i = 0; i < timeBar.length; i++) {
  591.         let oValue = timeBar[i].value;
  592.         fcDate[4] = Number(timeBar[i].value);
  593.  
  594.         fcDate[5] = new Date(fcDate[0], fcDate[1] - 1, fcDate[2], fcDate[3] + fcDate[4] + 8);
  595.  
  596.         let iday = String(fcDate[5].getDate());
  597.         iday = Array(2 > iday.length ? 2 - iday.length + 1 || 0 : 0).join(0) + iday;
  598.  
  599.         let ihour = String(fcDate[5].getHours());
  600.         ihour = Array(2 > ihour.length ? 2 - ihour.length + 1 || 0 : 0).join(0) + ihour;
  601.  
  602.         let localTime = iday+' ' + ihour+'     ;';
  603.         let styleText = '#'+timeBar[i].getAttribute("id")+':before{white-space:pre;content: "  '+localTime+'  "}';
  604.         GM_addStyle(styleText);
  605.  
  606.         switch(fcDate[5].getHours()){
  607.           // case 5:
  608.           //   timeBar[i].style.cssText = "border-left:2px solid #9B30FF";
  609.           //   break;
  610.           // case 14:
  611.           //   timeBar[i].style.cssText = "border-left:2px solid #EE3B3B";
  612.           //   break;
  613.           case 20:
  614.             timeBar[i].style.cssText = "border-bottom:1px dotted #8E8E8E;border-left:2px solid #ffffff;";
  615.             break;
  616.           default:
  617.             timeBar[i].style.cssText = "border-left:2px solid #ffffff;";
  618.         }
  619.       }
  620.     };
  621.     /////////////////////////////////////////////////////////////
  622.     ///
  623.     var selectObserver = new MutationObserver(alterTimelist);
  624.     // configuration of the observer:
  625.     var timeBar = document.querySelector("#forecast_hours select");
  626.     var config2 = {
  627.       attributes: false,
  628.       childList: true,
  629.       characterData: false,
  630.     };
  631.     selectObserver.observe(timeBar, config2);
  632.     GM_addStyle("#forecast_hours option{width: 50px!important; overflow: hidden!important;}");
  633.  
  634.     //-----------------------------------------------------------------------------//
  635.     let imgObserver = new MutationObserver(fitImgLoc);
  636.     imgObserver.observe(timeBar, config2);
  637.     //-----------------------------------绑定坐标-----------------------------------//
  638.     function fitImgLoc(){ // 绑定img包含的div元素
  639.       // console.log(unsafeWindow._region);
  640.       // TODO
  641.       const isMap = utils.changeRegion(unsafeWindow._region); // 改变地图;
  642.       if(!isMap) return; // 如果不是地图直接返回
  643.       /////TODO 判断地图逻辑分离
  644.       const currMap = helperConfig.region[helperConfig.currentRegion];
  645.       const currProjection = currMap.projection;
  646.       //let matchLoc = ({});
  647.       //let param = ({});
  648.       switch (currProjection) {
  649.         case 'Mercator':{
  650.           const dims = currMap.latLon;
  651.           const lat1 = Math.PI/180.0 * dims.lat0;
  652.           const lat2 = Math.PI/180.0 *dims.lat1;
  653.           const n1 = dims.yBottom;
  654.           const n2 = dims.yTop;
  655.           // console.log(dims);
  656.           const param1 = utils.projection.Mercator.calBasicInfo(
  657.             lat1, lat2, n1, n2
  658.           );
  659.           helperConfig.matchParam = {...param1,
  660.                   xRight:dims.xRight,
  661.                   xLeft:dims.xLeft,
  662.                   lon0:dims.lon0,
  663.                   lon1:dims.lon1,
  664.                   };
  665.           // console.log(helperConfig.matchParam);
  666.           helperConfig.matchLoc = utils.projection.Mercator.calLatLon;
  667.           helperConfig.matchImgXY = utils.projection.Mercator.calImgLoc;
  668.           break;
  669.         }
  670.         case 'Lambert':{
  671.           const LamDim = currMap.latLon;
  672. /*           const LamParam1 =
  673.                 [ LamDim.refLon0, LamDim.refLat0, LamDim.m0, LamDim.n0,
  674.                   LamDim.refLat1, LamDim.refLat2,
  675.                   LamDim.lonr, LamDim.latr, LamDim.mr, LamDim.nr]; */
  676.           const LamParam2 = utils.projection.Lambert.calBasicInfo(LamDim);
  677.           // console.log(LamParam2);
  678.           helperConfig.matchParam = LamParam2;
  679.           helperConfig.matchLoc = utils.projection.Lambert.calLatLon;
  680.           helperConfig.matchImgXY = utils.projection.Lambert.calImgLoc;
  681.           break;
  682.         }
  683.         default:
  684.           helperConfig.matchParam = currMap.latLon;
  685.           helperConfig.matchLoc = utils.projection.Equidistant.calLatLon;
  686.           helperConfig.matchImgXY = utils.projection.Equidistant.calImgLoc;
  687.           break;
  688.       }
  689.  
  690.       //let wrapDiv = document.querySelector('#pic_frame div');
  691.       let wrapDiv = document.querySelector('#pic_frame');
  692.       // document.addEventListener('keyup', console.log(elemsConfig.fixPoint));
  693.       if(wrapDiv){
  694.         wrapDiv.addEventListener('mousemove', utils.debounce(getMouseLatLon,100));
  695.         // wrapDiv.addEventListener('mousemove', getMouseLatLon);
  696.         // console.log(wrapDiv.clientWidth);// offsetWidth , clientWidth, scrollWidth
  697.       }
  698.     }
  699.  
  700.      function getElemRelPos (e, t, n) {// e.target, e.clientX, e.clientY
  701.       var a = e.getBoundingClientRect(),
  702.           r = getComputedStyle(e);
  703.       /**
  704.        * e.getBoundingClientRect()
  705.        * bottom: 916.1999969482422
  706.           height: 716          ​
  707.           left: 686.9000244140625          ​
  708.           right: 1565.1333618164062          ​
  709.           top: 200.1999969482422          ​
  710.           width: 878.2333374023438          ​
  711.           x: 686.9000244140625          ​
  712.           y: 200.1999969482422
  713.           borderLeftWidth: "1px"
  714.           borderTopWidth: "1px"
  715.           paddingLeft: "0px"
  716.           paddingTop: "0px"
  717.        */
  718.       return {
  719.           x: t - (a.left + parseFloat(r.paddingLeft) + parseFloat(r.borderLeftWidth)),
  720.           y: n - (a.top + parseFloat(r.paddingTop) + parseFloat(r.borderTopWidth))
  721.       };
  722.     }
  723.  
  724.     function getMouseLatLon(event){
  725.       // console.log(event);
  726.       // console.log(event.target);
  727.       // let target = event.target;//
  728.       let target = document.querySelector('#pic_frame img[style~="inline;"]');//
  729.       // console.log(target);
  730.       const mouseXY = getElemRelPos(target, event.clientX, event.clientY); // 相对图像的像素位置{x,y}
  731.       const loc = helperConfig.matchLoc(mouseXY, helperConfig.matchParam);
  732.       elemsConfig.latLonInput.lat.innerHTML = loc.lat; // mouseXY.y
  733.       elemsConfig.latLonInput.lon.innerHTML = loc.lon; // mouseXY.x
  734.       // elemsConfig.latLonInput.lat.innerHTML = mouseXY.y
  735.       // elemsConfig.latLonInput.lon.innerHTML = mouseXY.x
  736.       elemsConfig.fixPoint = {lat: loc.lat, lon: loc.lon,mouseXY};
  737.       return {lat: loc.lat, lon: loc.lon,mouseXY};
  738.     }
  739.     //------------------------------24小时跳跃-------------------------------------//
  740.     const timeJump = function(){
  741.       //var hourBar = document.getElementById('from_hour');float-l
  742.       var jumpParent = document.querySelector('.float-l');
  743.       var pre24 = document.createElement('button');
  744.       pre24.addEventListener("click", function(){timeTrigger(-24);});
  745.       pre24.textContent = "-24";
  746.       jumpParent.appendChild(pre24);
  747.  
  748.       var next24 = document.createElement('button');
  749.       next24.addEventListener("click", function(){timeTrigger(24);});
  750.       next24.textContent = "+24";
  751.       jumpParent.appendChild(next24);
  752.  
  753.       var timeTrigger = function(timer){
  754.         let selectedVal = timeBar[timeBar.selectedIndex].getAttribute("data-hour");
  755.         let nextVal = String(Number(selectedVal) + timer);
  756.         var posi = 3;
  757.         nextVal = Array(posi > nextVal.length ? posi - nextVal.length + 1 || 0 : 0).join(0) + nextVal;
  758.         let nextopt = timeBar.querySelector("#option_"+nextVal);
  759.         //alert(nextopt);
  760.         if(!nextopt) return;
  761.         timeBar[timeBar.selectedIndex].selected = false;
  762.         nextopt.selected = true;
  763.  
  764.         // var changeEvt = document.createEvent('HTMLEvents');
  765.         // changeEvt.initEvent('change',true,true);
  766.         // timeBar.dispatchEvent(changeEvt);
  767.         var changeEvt = new Event('change', { 'bubbles': true });
  768.         timeBar.dispatchEvent(changeEvt);
  769.       };
  770.     };
  771.  
  772.     timeJump();
  773.     /////切换时效
  774.  
  775.     function switchDate(){
  776.       userConfig.alterDate = !userConfig.alterDate;
  777.       if(userConfig.alterDate){
  778.         switchDateBtn.textContent = "切换成时效";
  779.         alterTimelist();
  780.       }
  781.       else{
  782.         switchDateBtn.textContent = "切换成日期";
  783.         for(let ele of timeBar){
  784.           ele.style.cssText = '';
  785.           let styleText = '#'+ele.getAttribute("id")+':before{white-space:pre;content: ""}';
  786.         GM_addStyle(styleText);
  787.         }
  788.       }
  789.     }
  790.  
  791.     var switchParent = document.querySelector('.float-l');
  792.     let switchDateBtn = document.createElement('button');
  793.     switchDateBtn.addEventListener("click", switchDate);
  794.     switchDateBtn.textContent = "切换成日期";
  795.     switchParent.appendChild(switchDateBtn);
  796.     /////end 切换时效 /////
  797.  
  798.     //设置鼠标事件//
  799.     document.onkeydown = function(evt){
  800.       if(evt.key=='x'&&!evt.ctrlKey){
  801.         console.log(utils.showSkewT(elemsConfig.fixPoint));
  802.       }
  803.       else if(evt.key=='x'&&evt.ctrlKey){
  804.         if(!elemsConfig.point01){
  805.           elemsConfig.point01 = Object.assign({},elemsConfig.fixPoint);
  806.         }
  807.         else{
  808.           elemsConfig.point02 = Object.assign({},elemsConfig.fixPoint);
  809.           console.log(elemsConfig.point01,elemsConfig.point02);
  810.           utils.showVertical(elemsConfig.point01,elemsConfig.point02);
  811.           elemsConfig.point01 = null;
  812.           elemsConfig.point02 = null;
  813.         }
  814.       }
  815.       if(evt.key=='c'&&!evt.ctrlKey&&!evt.altKey){
  816.         utils.showTimeSeries(elemsConfig.fixPoint);
  817.       }
  818.     }
  819.     //设置鼠标事件//
  820.  
  821.     /**
  822.      * 时间鼠标滑过
  823.      */
  824.     function timeMoveOver(){
  825.       // var changeEvent = document.createEvent('HTMLEvents');
  826.       // changeEvent.initEvent("change", true, true);
  827.       var changeEvent = new Event('change', { 'bubbles': true });
  828.       
  829.       var clickOpt = (evt)=>{
  830.         console.log(evt.target);
  831.         timeBar[timeBar.selectedIndex].selected = false;
  832.         evt.target.selected = true;
  833.         timeBar.dispatchEvent(changeEvent);
  834.       }
  835.       var timeBar = document.querySelector("#forecast_hours select");
  836.       var opts = document.querySelectorAll('#forecast_hours option');
  837.       opts.forEach(item => {
  838.         item.addEventListener('mouseover',clickOpt);
  839.       });
  840.     }
  841.   };
  842.  
  843. function showNotification(text='测试'){
  844.   // 先检查浏览器是否支持
  845.   if (!("Notification" in window)) {
  846.     alert("This browser does not support desktop notification");
  847.   }
  848.  
  849.   // 检查用户是否同意接受通知
  850.   else if (Notification.permission === "granted") {
  851.     // If it's okay let's create a notification
  852.     var notification = new Notification(text);
  853.   }
  854.  
  855.   // 否则我们需要向用户获取权限
  856.   else if (Notification.permission !== 'denied') {
  857.     Notification.requestPermission(function (permission) {
  858.       // 如果用户同意，就可以向他们发送通知
  859.       if (permission === "granted") {
  860.         var notification = new Notification(text);
  861.       }
  862.     });
  863.   }
  864. }
  865.  
  866. function toggleSelectMode(){
  867.   let mapPointer = document.getElementById('map-pointer');
  868.   let bodyDOM = document.getElementsByTagName('body')[0];
  869.   let linePanel = document.getElementById('line_panel');
  870.   let selectModePanel = document.getElementById('select-mode-panel');
  871.   if(bodyDOM.classList.contains("full-screen-mode")){
  872.     bodyDOM.classList.remove("full-screen-mode");
  873.     linePanel.style.display='none';
  874.     selectModePanel.style.display='none';
  875.     mapPointer.classList.add("display-none");
  876.     return;
  877.   }else{
  878.     bodyDOM.classList.add("full-screen-mode");
  879.     let contentWidth = window.innerWidth - document.body.clientWidth - 40;
  880.     if(contentWidth<200){
  881.       linePanel.style.width='220px';
  882.     }else{
  883.       linePanel.style.width=contentWidth+'px';
  884.     }
  885.     linePanel.style.display='block';
  886.     selectModePanel.style.display='block';
  887.     mapPointer.classList.add("display-none");
  888.     mapPointer.classList.remove("display-none");
  889.   }
  890.   const imgXY = latlon2XY({lon:113.375,lat:23.125});
  891.  
  892.   utils.showTimeSeries({lon:'113.375',lat:'23.125',mouseXY:imgXY});
  893. }
  894. // 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
  895. 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']){
  896.  
  897.   const url = `http://172.22.1.175/di/grid.action?userId=sqxt&pwd=shengqxt123&dataFormat=json&interfaceId=intGetMultElesDataTimeSerial&modelid=${model}&element=${eles.join('%20')}&level=0&starttime=${sT}&endtime=${eT}&lon=${lon}&lat=${lat}`;
  898.   console.log('获取数据');
  899.   showNotification('正在从数据中心获取数据');
  900.   console.log(url);
  901.   GM_xmlhttpRequest({ //获取时间序列
  902.     method : 'GET',
  903.     synchronous : false,
  904.     url : url,
  905.     onload : function (reDetails) {
  906.       if (reDetails.status !== 200&&reDetails.status !== 304){
  907.         console.error('获取URL错误');
  908.         showNotification('数据中心数据获取异常');
  909.         return;
  910.       }
  911.       getLocation(lat,lon);
  912.       const data = JSON.parse(reDetails.responseText);
  913.       //console.log(data.DATA);
  914.       if(data.DATA.length==0){
  915.         console.error('此时次数据为空,请等待更新');
  916.         showNotification('此时次数据为空,请等待更新');
  917.         return;
  918.       }
  919.       let series = decodeSeries(data.DATA, 241);
  920.       series[1] = mixUndefined(series[0].map(v=>v[1]),series[1]);
  921.       series[2] = mixUndefined(series[0].map(v=>v[1]),series[2]);
  922.       //console.log(series[1]);
  923.       drawLine(series);
  924.     }
  925.   });
  926. }
  927.  
  928. /**
  929.  * 从百度接口获取地址
  930.  * @param {Number} lat 纬度
  931.  * @param {Number} lon 经度
  932.  */
  933. function getLocation(lat,lon){
  934.   let ak = 'kMW5fXfhhsMat6Ud9jYPqnxCRQGbl2eV';
  935.   let url = `http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location=${lat},${lon}&output=json&pois=1&ak=${ak}`;
  936.   let latlonSpan = document.querySelectorAll('#line_info > span');
  937.   latlonSpan[0].innerHTML = lat;
  938.   latlonSpan[1].innerHTML = lon;
  939.   latlonSpan[2].innerHTML = '';
  940.   console.log(url);
  941.   GM_xmlhttpRequest({ //获取时间序列
  942.     method : 'GET',
  943.     synchronous : false,
  944.     url : url,
  945.     onload : function (reDetails) {
  946.       if (reDetails.status !== 200&&reDetails.status !== 304){
  947.         console.error('获取百度地址异常');
  948.         //showNotification('数据中心数据获取异常');
  949.         return;
  950.       }
  951.       let raw = reDetails.responseText.replace('renderReverse&&renderReverse(','').slice(0,-1);
  952.       const addreJSON = JSON.parse(raw);
  953.       if(addreJSON.result.formatted_address==''){
  954.         return;
  955.       }else{
  956.         latlonSpan[2].innerHTML = '&nbsp; 地址: '+ addreJSON.result.formatted_address;
  957.       }
  958.       //console.log(data);
  959.     }
  960.   });
  961. }
  962.  
  963. function mixUndefined(index,data){
  964.   let newData = [];
  965.   for(let i of index){
  966.     let value = data.find(v=>v[1]==i);
  967.     if(value===undefined){
  968.       newData.push([undefined,i]);
  969.     }else{
  970.       newData.push([value[0],i]);
  971.     }
  972.   }
  973.   return newData
  974. }
  975.  
  976. /**解析数据 */
  977. function decodeSeries(data=[], len=241){
  978.   if(!data.length) return [];
  979.   let splitData = [];
  980.   let eles = data.length/len;//元素个数
  981.   for(let ie=0;ie<eles;ie++){//看有几个要素
  982.     splitData.push(data.slice(ie*len,(ie+1)*len));
  983.   }
  984.   splitData = splitData.map(data=>data.map((v,i)=>[Number(v),i]).filter(v=>v[0]>-999));//分离出[数值,时效]//-999.900024
  985.   // console.log(splitData);
  986.   return splitData;
  987. }
  988.  
  989. function drawLine(series=[]){
  990.   // getTimeSeries();
  991.   console.log('绘图');
  992.   if(series.length==0) return console.log('空数据');
  993.   const tempChart = echarts.init(document.getElementById('show-temp'));
  994.   let fcTime = utils.getFcTime();
  995.   let initTime = moment(fcTime.date+fcTime.hr,'YYYY-MM-DDHH').add(8,'hours');//北京时
  996.   let temp = series[0].map(v=>(v[0]-273.15).toFixed(2));
  997.   let mn2t = series[1].map(v=>{
  998.     if(v[0]===undefined){
  999.       return undefined;
  1000.     }else{
  1001.       return (v[0]-273.15).toFixed(2);
  1002.     }
  1003.   });
  1004.   let mx2t = series[2].map(v=>{
  1005.     if(v[0]===undefined){
  1006.       return undefined;
  1007.     }else{
  1008.       return (v[0]-273.15).toFixed(2);
  1009.     }
  1010.   });
  1011.   let xTime = series[0].map(v=>{
  1012.     const hour = v[1];
  1013.     return moment(initTime).add(hour,'hours').format('DD-HH');
  1014.   });
  1015.   // console.log(mn2t);
  1016.   // 指定图表的配置项和数据
  1017.   const OptionTemp = {
  1018.     /* title: {
  1019.       text: 'Temp.',
  1020.       // left: 'center'
  1021.     }, */
  1022.     tooltip: {
  1023.       trigger: 'axis',
  1024.     },
  1025.     toolbox: {
  1026.       // y: '30px',
  1027.       feature: {
  1028.         dataZoom: {
  1029.           yAxisIndex: 'none'
  1030.         },
  1031.         restore: {},
  1032.         //saveAsImage: {}
  1033.       }
  1034.     },
  1035.     grid: {top:10,bottom:45,right:11,left:25},
  1036.     dataZoom: [
  1037.       {
  1038.         show: true,
  1039.         realtime: true,
  1040.         start: 0,
  1041.         end: 80,
  1042.         // handleSize: '50%',
  1043.         height: '20',
  1044.         bottom: '0',
  1045.       },
  1046.       {
  1047.           type: 'inside',
  1048.           realtime: true,
  1049.           start: 0,
  1050.           end: 80,
  1051.       }
  1052.     ],
  1053.     legend: {
  1054.       y: '-5',
  1055.       data:['Temp','Pre6min','Pre6max']
  1056.     },
  1057.     xAxis: {
  1058.       type : 'category',
  1059.       data: xTime,
  1060.       // boundaryGap : false,
  1061.       //splitArea : {show : true},
  1062.       splitLine:{show: true},
  1063.       axisLine: {onZero: true},
  1064.       
  1065.     },
  1066.     yAxis: [{
  1067.       name:'℃',
  1068.       type: 'value',
  1069.       scale:true,
  1070.       axisLabel: {
  1071.         formatter: '{value}'
  1072.       },
  1073.     },
  1074.     ],
  1075.     series: [
  1076.       {
  1077.         name: 'Temp',
  1078.         smooth: true,
  1079.         //symbol: 'triangle',
  1080.         //symbolSize: 5,
  1081.         lineStyle: {normal: {color: 'green',width: 2,}},//type: 'dashed'
  1082.         //itemStyle: {normal: {borderWidth: 1,borderColor: 'green',color: 'green'}},
  1083.         type: 'line',
  1084.         data: temp,
  1085.       }, 
  1086.       {
  1087.         name: 'Pre6min',
  1088.         smooth: true,
  1089.         connectNulls: true,
  1090.         symbolSize: 0,
  1091.         lineStyle: {normal: {color: 'blue',width: 1,type: 'dashed'}},//type: 'dashed'
  1092.         type: 'line',
  1093.         data: mn2t,
  1094.       },
  1095.       {
  1096.         name: 'Pre6max',
  1097.         smooth: true,
  1098.         connectNulls: true,
  1099.         symbolSize: 0,
  1100.         lineStyle: {normal: {color: 'red',width: 1,type: 'dashed'}},//type: 'dashed'
  1101.         type: 'line',
  1102.         data: mx2t,
  1103.       },
  1104.     ]
  1105.   };
  1106.     // 使用刚指定的配置项和数据显示图表。
  1107.   tempChart.setOption(OptionTemp);
  1108.   /**
  1109.    * 风
  1110.    */
  1111.   const windChart = echarts.init(document.getElementById('show-wind'));
  1112.   let wind = series[3].map((v,i)=>utils.calWind(v[0],series[4][i][0]));
  1113.   let speed = wind.map(v=>v.speed);
  1114.   let rotation = wind.map(v=>v.rotation);
  1115.   let windData = speed.map((v,i)=>[v,rotation[i],i]);
  1116.   let dims = {
  1117.     speed:0,
  1118.     rotation:1,
  1119.     timeIndex:2,
  1120.   }
  1121.   const optionWind = {
  1122.     /* title: {
  1123.       text: 'Wind',
  1124.     }, */
  1125.     tooltip: {
  1126.       trigger: 'axis',
  1127.     },
  1128.     toolbox: {
  1129.       feature: {
  1130.           dataZoom: {
  1131.               yAxisIndex: 'none'
  1132.           },
  1133.           // restore: {},
  1134.           //saveAsImage: {}
  1135.       }
  1136.     },
  1137.     grid: {show:true,top:10,bottom:45,right:11,left:25},
  1138.     dataZoom: [
  1139.       {
  1140.         show: true,
  1141.         realtime: true,
  1142.         start: 0,
  1143.         end: 80,
  1144.         // handleSize: '50%',
  1145.         height: '20',
  1146.         bottom: '0',
  1147.       },
  1148.       {
  1149.           type: 'inside',
  1150.           realtime: true,
  1151.           start: 0,
  1152.           end: 80,
  1153.       }
  1154.     ],
  1155.     legend: {
  1156.       y: '-5',
  1157.       data:['w10m'],
  1158.     },
  1159.     xAxis: {
  1160.       type : 'category',
  1161.       data: xTime,
  1162.       splitLine:{show: true},
  1163.       axisLine: {onZero: true},
  1164.     },
  1165.     yAxis: {
  1166.       name:'m/s',
  1167.       type: 'value',
  1168.       axisLabel: {
  1169.         formatter: '{value}'
  1170.       },
  1171.     },
  1172.     series: [
  1173.       {
  1174.         name: 'w10m',
  1175.         type: 'line',
  1176.         smooth: true,
  1177.         lineStyle: {normal: {width: 2,}},//type: 'dashed'
  1178.         itemStyle: {normal: {borderWidth: 1,borderColor: 'black',color: 'black'}},
  1179.         data: speed.map(v=>v.toFixed(1)),
  1180.       },
  1181.       {
  1182.       type: 'custom',
  1183.       name:'dir',
  1184.       renderItem: utils.renderArrow,
  1185.       encode: {
  1186.         x: dims.timeIndex,
  1187.         y: dims.speed,
  1188.       },
  1189.         data: windData,
  1190.         z: 10
  1191.       },
  1192.     ]
  1193.   };
  1194.   windChart.setOption(optionWind);
  1195.   /**
  1196.    * 云
  1197.    */
  1198.   const cloudChart = echarts.init(document.getElementById('show-cloud'));
  1199.   let totalCloud = series[5].map(v=>v[0]*100);
  1200.   let lowCloud = series[6].map(v=>v[0]*100);
  1201.   const optionCloud = {
  1202.     tooltip: {
  1203.       trigger: 'axis',
  1204.       axisPointer: {
  1205.           type: 'shadow'
  1206.       }
  1207.     },
  1208.     toolbox: {
  1209.       feature: {
  1210.         dataZoom: {
  1211.             yAxisIndex: 'none'
  1212.         },
  1213.         // restore: {},//saveAsImage: {}
  1214.       }
  1215.     },
  1216.     grid: {show:true,top:10,bottom:45,right:11,left:30},
  1217.     dataZoom: [
  1218.       {
  1219.         show: true,
  1220.         realtime: true,
  1221.         start: 0,
  1222.         end: 80,
  1223.         height: '20',
  1224.         bottom: '0',
  1225.       },
  1226.       {
  1227.         type: 'inside',
  1228.         realtime: true,
  1229.         start: 0,
  1230.         end: 80,
  1231.       }
  1232.     ],
  1233.     legend: {
  1234.       y: '-5',
  1235.       data:['中高云','低云'],
  1236.     },
  1237.     xAxis: {
  1238.       type : 'category',
  1239.       data: xTime,
  1240.       splitLine:{show: true},
  1241.       axisLine: {onZero: true},
  1242.     },
  1243.     yAxis: {
  1244.       name:'%',
  1245.       type: 'value',
  1246.       axisLabel: {
  1247.         formatter: '{value}'
  1248.       },
  1249.     },
  1250.     series: [
  1251.       {
  1252.         name: '低云',
  1253.         type: 'bar',
  1254.         stack: '云量',
  1255.         data: lowCloud.map(v=>v.toFixed(1)),
  1256.       },
  1257.       {
  1258.         name: '中高云',
  1259.         type: 'bar',
  1260.         stack: '云量',
  1261.         data: totalCloud.map((v,i)=>(v-lowCloud[i]).toFixed(1)),
  1262.       },
  1263.     ]
  1264.   };
  1265.   cloudChart.setOption(optionCloud);
  1266.   /**
  1267.    * 降水
  1268.    */
  1269.   const preChart = echarts.init(document.getElementById('show-pre'));
  1270.   let preSeri = series[7];
  1271.   let precipitaion = preSeri.map((v,i)=>{
  1272.     let pre = i===0? v[0]: v[0] - preSeri[i-1][0]; //(v[0]*1000).toFixed(1)
  1273.     return (pre*1000).toFixed(1);
  1274.     }
  1275.   );
  1276.   //let lowCloud = series[6].map(v=>v[0]);
  1277.   const optionPre = {
  1278.     tooltip: {
  1279.       trigger: 'axis',
  1280.       axisPointer : {            // 坐标轴指示器，坐标轴触发有效
  1281.         type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  1282.       }
  1283.     },
  1284.     toolbox: {
  1285.       feature: {
  1286.         dataZoom: {
  1287.         yAxisIndex: 'none'
  1288.         },
  1289.       }
  1290.     },
  1291.     grid: {show:true,top:10,bottom:45,right:11,left:30},
  1292.     dataZoom: [
  1293.       {
  1294.         show: true,
  1295.         realtime: true,
  1296.         start: 0,
  1297.         end: 80,
  1298.         height: '20',
  1299.         bottom: '0',
  1300.       },
  1301.       {
  1302.         type: 'inside',
  1303.         realtime: true,
  1304.         start: 0,
  1305.         end: 80,
  1306.       }
  1307.     ],
  1308.     legend: {
  1309.       y: '-5',
  1310.       data:['Precipitaion'],
  1311.     },
  1312.     xAxis: {
  1313.       type : 'category',
  1314.       data: xTime,
  1315.       splitLine:{show: true},
  1316.       axisLine: {onZero: true},
  1317.     },
  1318.     yAxis: {
  1319.       name:'mm',
  1320.       type: 'value',
  1321.       axisLabel: {
  1322.         formatter: '{value}'
  1323.       },
  1324.     },
  1325.     series: [
  1326.       {
  1327.         name: 'Precipitaion',
  1328.         type: 'bar',
  1329.         stack: 'Rain',
  1330.         data: precipitaion,
  1331.       },
  1332.     ]
  1333.   };
  1334.   preChart.setOption(optionPre);
  1335. }
  1336.  
  1337. function createPanel(){
  1338.   //-创建面板-//
  1339.   const panelWrap = document.createElement("div");
  1340.   
  1341.   panelWrap.setAttribute("id","helper_panel");
  1342.   panelWrap.setAttribute("class","top_panel show_panel");
  1343.   panelWrap.innerHTML = '多图模式: ';
  1344.   /* 设置添加对比模式*/
  1345.   const compareMode = document.createElement('div');
  1346.   compareMode.innerHTML = `<span class="panel-button" id="open-compare">多起报</span>`;
  1347.   panelWrap.appendChild(compareMode);
  1348.  
  1349.   /* 设置添加多时效模式*/
  1350.   const mvTime = document.createElement('div');
  1351.   mvTime.innerHTML = `<span class="panel-button" id="open-mvTime">多时效</span>`;
  1352.   panelWrap.appendChild(mvTime);
  1353.   /* 设置添加多模式
  1354.   const mvModel = document.createElement('div');
  1355.   mvModel.innerHTML = `<span class="panel-button" id="open-mvModel">多模式</span>`;
  1356.   panelWrap.appendChild(mvModel);*/
  1357.   /* 设置添加多图模式
  1358.   const mvElem = document.createElement('div');
  1359.   mvElem.innerHTML = `<span class="panel-button" id="open-mv">多要素</span>`;
  1360.   panelWrap.appendChild(mvElem);*/
  1361.   
  1362.   /* 设置添加点选模式*/
  1363.   const panelWrap2 = utils.createElement('div',{id:'edit-helper-panel',class:'top_panel show_panel'});
  1364.   const pointMode = document.createElement('div');
  1365.   pointMode.innerHTML = `<span class="panel-button">点选模式</span>`;
  1366.   panelWrap2.appendChild(pointMode);
  1367.   pointMode.addEventListener('click', ()=>{toggleSelectMode()});
  1368.   
  1369.  
  1370.   // pointMode.addEventListener('click', ()=>toggleSelectMode());
  1371.   /* 设置Lat lon面板*/
  1372.   // const latLonWarp = document.createElement("span");
  1373.   // latLonWarp.setAttribute("id","helper_latLon");
  1374.   // latLonWarp.setAttribute("class","show_latLon");
  1375.   // latLonWarp.innerHTML = '<span>Lat <span class="fixLoc" id="helper_lat"></span> Lon <span class="fixLoc" id="helper_lon"></span></span>';
  1376.   // panelWrap2.appendChild(latLonWarp);
  1377.   //
  1378.   const ibody = document.getElementsByTagName("body")[0];
  1379.   ibody.appendChild(panelWrap);
  1380.   ibody.appendChild(panelWrap2);
  1381.   //-------//
  1382.   //-注册到全局变量-//
  1383.   elemsConfig.latLonInput = {
  1384.     lat:document.getElementById('helper_lat'),
  1385.     lon:document.getElementById('helper_lon'),
  1386.   };
  1387. }
  1388. // 添加面板样式
  1389. function createTlinePanel(){
  1390.   //-创建面板-//
  1391.   const fragment = document.createDocumentFragment();
  1392.   const panelWrap = document.createElement("div");
  1393.   
  1394.   panelWrap.setAttribute("id","line_panel");
  1395.   panelWrap.setAttribute("class","show_panel");
  1396.   panelWrap.style.display='none';
  1397.  
  1398.   const infoWrap = document.createElement('div');
  1399.   infoWrap.setAttribute("id","line_info");
  1400.   infoWrap.innerHTML = 'EC模式预报<br>纬度:<span></span> 经度:<span></span><span></span>';
  1401.   panelWrap.appendChild(infoWrap);
  1402.   /* 设置添加temp*/
  1403.   const tempWrap = document.createElement('div');
  1404.   tempWrap.innerHTML = `温度<div id="show-temp"></div>`;
  1405.   panelWrap.appendChild(tempWrap);
  1406.  
  1407.   const windWrap = document.createElement('div');
  1408.   windWrap.innerHTML = `风MSLP<div id="show-wind"></div>`;
  1409.   panelWrap.appendChild(windWrap);
  1410.  
  1411.   const preWrap = document.createElement('div');
  1412.   preWrap.innerHTML = `降水<div id="show-pre"></div>`;
  1413.   panelWrap.appendChild(preWrap);
  1414.  
  1415.   const cloudWrap = document.createElement('div');
  1416.   cloudWrap.innerHTML = `云量<div id="show-cloud"></div>`;
  1417.   panelWrap.appendChild(cloudWrap);
  1418.   
  1419.   fragment.appendChild(panelWrap);
  1420.   const ibody = document.getElementsByTagName("body")[0];
  1421.   ibody.appendChild(fragment);
  1422.   //-------//
  1423. }
  1424.  
  1425. function createSelectModePanel(){
  1426.   //-创建面板-//
  1427.   const fragment = document.createDocumentFragment();
  1428.   const panelWrap = document.createElement("div");
  1429.   
  1430.   panelWrap.setAttribute("id","select-mode-panel");
  1431.   panelWrap.setAttribute("class","show_panel");
  1432.   panelWrap.style.display='none';
  1433.   panelWrap.innerHTML = `快捷键[C] -> 单点时间序列`;
  1434.   /*<br>
  1435.   [X] -> 垂直探空; 两次[Ctrl+X] -> 垂直剖面
  1436.    */
  1437.   
  1438.   fragment.appendChild(panelWrap);
  1439.   const ibody = document.getElementsByTagName("body")[0];
  1440.   ibody.appendChild(fragment);
  1441.   /* 设置Lat lon面板*/
  1442.   const latLonWarp = document.createElement("div");
  1443.   latLonWarp.setAttribute("id","helper_latLon");
  1444.   latLonWarp.setAttribute("class","show_latLon");
  1445.   latLonWarp.innerHTML = '<span>Lat <span class="fixLoc" id="helper_lat"></span> Lon <span class="fixLoc" id="helper_lon"></span></span>';
  1446.   panelWrap.appendChild(latLonWarp);
  1447.   //-------//
  1448. }
  1449.  
  1450.  
  1451. //console.log(compareMode.imgDOM);
  1452. // compareMode.forward();
  1453.  
  1454. GM_addStyle(`
  1455.   .show_panel{
  1456.     z-index:11;
  1457.     font-size: 18px;
  1458.   }
  1459.   .top_panel{
  1460.     background-color: rgb(45,53,63);
  1461.     border-bottom: 0px solid rgb(20,20,20); padding:5px;
  1462.     border-bottom: 0px solid rgb(20,20,20);border-radius: 4px;border: 1px solid rgb(22,25,28);
  1463.     box-shadow:0 1px 0 rgba(162,184,204,0.25) inset,0 0 4px hsla(0,0%,0%,0.95);
  1464.     color: white;
  1465.   }
  1466.   #helper_panel{
  1467.     position:absolute;
  1468.     top:5px;
  1469.     left:740px;
  1470.   }
  1471.   #edit-helper-panel{
  1472.     position:absolute;
  1473.     top:45px;
  1474.     left:740px;
  1475.   }
  1476.   .panel-button{
  1477.     cursor:pointer;
  1478.   }
  1479.   #select-mode-panel{
  1480.     position:absolute; top:5px;left:370px;
  1481.     background-color: rgb(45,53,63);
  1482.     border-bottom: 0px solid rgb(20,20,20); padding:5px;
  1483.     border-bottom: 0px solid rgb(20,20,20);border-radius: 4px;border: 1px solid rgb(22,25,28);
  1484.     box-shadow:0 1px 0 rgba(162,184,204,0.25) inset,0 0 4px hsla(0,0%,0%,0.95);
  1485.     color: white;}
  1486.     `);
  1487. /**暂时隐藏按钮 */
  1488. GM_addStyle(`#helper_latLon .fixLoc{display:inline-block;width:55px;height:15px;overflow:hidden;}`);
  1489. //GM_addStyle(`#helper_latLon{display:none;}`);
  1490. /**重要添加十字鼠标 */
  1491.  // GM_addStyle('#pic_frame div{border:1px solid !important;cursor:crosshair !important;}');
  1492. createSelectModePanel();
  1493. createPanel();
  1494. NWP_init();
  1495. createTlinePanel();
  1496.  
  1497.  
  1498. //创建对比框
  1499. function createComparePanel(){
  1500.   const panel = document.createDocumentFragment();
  1501.   const mainWrapper = utils.createElement('div',{id:'compare-main',class:'display-none'});
  1502.   const controlWrapper = utils.createElement('div',{class:'compare-warpper'});
  1503.   controlWrapper.innerHTML = `<div id="compare-backward" class="my-button">step -6</div><div class="my-button" id="compare-foreward">step +6</div>`;
  1504.   controlWrapper.innerHTML += `<select id="compare-interval"><option value="48">间隔48小时</option>
  1505.   <option selected="selected" value="24">间隔24小时</option>
  1506.   <option value="12">间隔12小时</option></select>
  1507.   <div id="close-compare" class="my-button">关闭对比</div>
  1508.   <span class="info"></span>`;
  1509.  
  1510.   const imgWrapper = utils.createElement('div',{class:'compare-img-main'});
  1511.   imgWrapper.innerHTML = 
  1512.   `<div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
  1513.   <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
  1514.   <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
  1515.   <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>`;
  1516.   panel.append(mainWrapper);
  1517.   mainWrapper.append(controlWrapper,imgWrapper);
  1518.   //mainWrapper.append(forewardBut,backwardBut,intervalInput);
  1519.   
  1520.   document.body.append(panel);
  1521. }
  1522.  
  1523. function createCompareMode(){
  1524.   const compareHandler = {
  1525.     set(obj, prop, value,receiver){
  1526.       if(prop === 'interval'){
  1527.         obj.interval = value;
  1528.         receiver.firstImg = obj.firstImg;
  1529.         //obj.img[1] = obj.img[0] + value;
  1530.         //obj.img[2] = obj.img[0] + value*2;
  1531.         //obj.img[3] = obj.img[0] + value*3;
  1532.       }else if(prop === 'firstHr'){
  1533.         // console.log(obj.imgInfo.toSource());
  1534.         // const initURL = obj.imgInfo.url;
  1535.         const date = obj.imgInfo.date;
  1536.         const initDate = obj.imgInfo.initDate;
  1537.         const hour = utils.paddingInt(value,3);
  1538.         const url = obj.imgInfo.getUrl(date,hour,initDate)
  1539.         receiver.firstImg = url;
  1540.         //receiver.interval = obj.interval;
  1541.       }else if(prop === 'imgInfo'){
  1542.         
  1543.         console.log('设置初始图像为:'+value.url);
  1544.       }else if(prop === 'firstImg'){
  1545.         const imgList = obj.fit2sameday(value);
  1546.         // console.log(imgList);
  1547.         obj.showInfo(value);
  1548.         imgList.forEach((imgSrc,i)=>{
  1549.           receiver.img[i] = imgSrc;
  1550.         })
  1551.         //obj.img[0] = imgList;
  1552.         // obj.img[1] = ;
  1553.       }
  1554.       Reflect.set(obj,prop,value);
  1555.     },
  1556.   };
  1557.  
  1558.   const imgHandler = {
  1559.     set(obj, prop, value,receiver){
  1560.       console.log(`第${Number(prop)+1}个图像地址为${value}`);
  1561.       elemsConfig.compareImgDOM.img[prop].src = value;
  1562.       iImgInfo = utils.getImgNow(value);
  1563.       const initTime = moment(iImgInfo.initDate,'YYYYMMDDHH');
  1564.       const nowTime = moment(initTime).add(Number.parseInt(iImgInfo.hour)+8,'hours');
  1565.       elemsConfig.compareImgDOM.info[prop].innerHTML = 
  1566.       `起报: ${initTime.format('MM-DD HH')} UTC, 【北京时${nowTime.format('MM月DD日HH时')}(${iImgInfo.hour}h)】${iImgInfo.model}, ${iImgInfo.eleName}`;
  1567.       //console.log(value);
  1568.       //let imgDom = document.querySelectorAll('.compare .imgSrc');
  1569.       //imgDom[prop].src = value; 
  1570.       Reflect.set(obj,prop,value);
  1571.     },
  1572.   };
  1573.   let imgSrc = new Proxy([1,2,3,4], imgHandler);
  1574.   const modeProto = {
  1575.     img:imgSrc,
  1576.     firstImg:'',
  1577.     interval:24,
  1578.     foreward(step=6){
  1579.       this.firstHr = this.firstHr + step;
  1580.       console.log('步进');
  1581.     },
  1582.     backward(step=6){
  1583.       if(this.firstHr - step>=0){
  1584.         this.firstHr = this.firstHr - step;
  1585.       }else{
  1586.         alert('不能再退了');
  1587.       }
  1588.     },
  1589.     firstHr:1,
  1590.     urlMode(base='http://10.148'){
  1591.       let url = base;
  1592.       return url;
  1593.     },
  1594.     initIMG(){// TODO addEventListener('error',(evt)=>{evt.srcElement.src})
  1595.       let DOMs = document.querySelectorAll('#compare-main .compare-img');
  1596.       let imgDOM = [];
  1597.       for(let img of DOMs){
  1598.         img.addEventListener('error',(evt)=>{let ele = evt.target;ele.onerror=null;ele.src='/images/weather/nopic_800_600.jpg';});
  1599.         imgDOM.push(img);
  1600.       };
  1601.       elemsConfig.compareImgDOM.img = imgDOM;
  1602.  
  1603.       let infoDOMs = document.querySelectorAll('#compare-main .compare-img-info');
  1604.       let infoList = [];
  1605.       for(let ele of infoDOMs){
  1606.         infoList.push(ele);
  1607.       };
  1608.       elemsConfig.compareImgDOM.info = infoList;
  1609.       //return imgDOM;
  1610.     },
  1611.     imgInfo:{},
  1612.     openCompare(){
  1613.       const wrapper = document.getElementById('compare-main');
  1614.       //if(wrapper.classList.contains('display-none')) wrapper.classList.remove('display-none')
  1615.       wrapper.classList.remove('display-none');
  1616.       try{
  1617.         this.imgInfo = utils.getImgNow();
  1618.         this.firstHr = Number.parseInt(this.imgInfo.hour);
  1619.       }catch(err){
  1620.         alert(err.message);
  1621.         console.error(err);
  1622.       }
  1623.     },
  1624.     closeCompare(){
  1625.       const wrapper = document.getElementById('compare-main');
  1626.       //if(wrapper.classList.contains('display-none')) wrapper.classList.remove('display-none')
  1627.       wrapper.classList.add('display-none');
  1628.       // this.imgInfo = utils.getImgNow();
  1629.     },
  1630.     fit2sameday(firstImg){
  1631.       const interval = this.interval;
  1632.       const firstInfo = utils.getImgNow(firstImg);
  1633.       // console.log(firstImg);
  1634.       // console.log(firstInfo);
  1635.       const imgList = [firstImg];
  1636.       const iniTime = moment(firstInfo.initDate,'YYYYMMDDHH');
  1637.       for (let i = 1; i < 4; i++){
  1638.         const fitTime = moment(iniTime).add(-1*interval*i,'hours');
  1639.         const iDate = moment(fitTime).format('YYYYMMDD');
  1640.         const iInit = moment(fitTime).format('YYYYMMDDHH');
  1641.         const hour = Number.parseInt(firstInfo.hour)+interval*i;
  1642.         // console.log('预报时效'+hour);
  1643.         const iHour = utils.paddingInt(hour,3);
  1644.         const url = firstInfo.getUrl(iDate,iHour,iInit);
  1645.         imgList.push(url);
  1646.       }
  1647.       return imgList;
  1648.     },
  1649.     changeInterval(evt){
  1650.       this.interval = Number.parseInt(evt.target.value);
  1651.       console.log(evt);
  1652.     },
  1653.     showInfo(img){
  1654.       const controlInfo = document.querySelector('#compare-main .compare-warpper .info');
  1655.       const imgInfo = utils.getImgNow(img);
  1656.       const nowTime = moment(imgInfo.initDate,'YYYYMMDDHH').add(Number.parseInt(imgInfo.hour)+8,'hours');
  1657.       controlInfo.innerHTML = ' UTC+8 '+ nowTime.format('YYYY年MM月DD日HH时');
  1658.       controlInfo.innerHTML += ' | GMT'+ nowTime.add(-8,'hours').format('YYYY-MM-DD HH:00');
  1659.     },
  1660.   };
  1661.   
  1662.   const compareMode = new Proxy(modeProto,compareHandler);
  1663.   return compareMode;
  1664. }
  1665.  
  1666. createComparePanel();//创建对比DOM框架
  1667. const compareMode = createCompareMode();
  1668. compareMode.hook = function(selector='', listener='',callback=()=>{},bindObj=compareMode) {
  1669.   var targetEle = document.querySelector(selector);
  1670.   targetEle.addEventListener(listener,()=>callback.call(bindObj),false);
  1671. };
  1672. compareMode.hook('#compare-backward','click',compareMode.backward,compareMode);
  1673. compareMode.hook('#compare-foreward','click',compareMode.foreward,compareMode);
  1674. compareMode.hook('#open-compare','click',compareMode.openCompare,compareMode);
  1675. compareMode.hook('#close-compare','click',compareMode.closeCompare,compareMode);
  1676. //compareMode.hook('#compare-interval','change',(evt)=>compareMode.changeInterval(evt),compareMode);
  1677. document.getElementById('compare-interval').addEventListener('change',(evt)=>compareMode.changeInterval(evt));
  1678.  
  1679. compareMode.initIMG();
  1680. //compareMode.imgInfo = utils.getImgNow();
  1681.  
  1682.  
  1683. GM_addStyle(`
  1684. #line_panel {
  1685.   position: absolute;
  1686.   top: 5px;
  1687.   right: 5px;
  1688.   background-color: #f5f5f5;
  1689.   border-bottom: 0px solid rgb(20, 20, 20);
  1690.   padding: 5px;
  1691.   border-radius: 4px;
  1692.   border: 1px solid rgb(22, 25, 28);
  1693.   box-shadow: 0 1px 0 rgba(162, 184, 204, 0.25) inset, 0 0 4px hsla(0, 0%, 0%, 0.95);
  1694.   color: black;
  1695.   width: 0px;
  1696. }
  1697. #show-temp,#show-wind,#show-pre,#show-cloud{
  1698.   width: 100%;
  1699.   height:210px;
  1700. }
  1701. #show-pre{
  1702.   display:block;
  1703. }
  1704. .full-screen-mode{
  1705.   float:left;
  1706.   padding-left:10px;
  1707. }
  1708. .full-screen-mode #float_icons{
  1709.   display:none!important;
  1710. }
  1711. .full-screen-mode #pic_frame div{
  1712.   border:1px solid !important;cursor:crosshair !important;
  1713. }
  1714. .top_panel div{
  1715.   display:inline-block;
  1716.   margin-left:5px;
  1717.   margin-right:5px;
  1718.   padding:2px;
  1719.   border: 1px solid white;
  1720. }
  1721. .top_panel div:hover{
  1722.   background-color:orange;
  1723. }
  1724. #compare-main, #multiviews-main{
  1725.   z-index: 12;
  1726.   position: absolute;
  1727.   top: 0px;
  1728.   right: 1%;
  1729.   bottom: 1%;
  1730.   left: 1%;
  1731.   display: flex;
  1732.   flex-direction: column;
  1733.   align-items: center;
  1734. }
  1735. #float_icons{
  1736.   display:none!important;
  1737. }
  1738. .compare-warpper {
  1739.   display: flex;
  1740.   justify-content: center;
  1741.   min-width: 1000px;
  1742.   background: white;
  1743.   font-size: 18px;
  1744.   align-items: center;
  1745. }
  1746. .compare-img-main {
  1747.   border: 1px dotted red;
  1748.   max-width: 1520px;
  1749.   height: 100%;
  1750.   display: grid;
  1751.   grid-template-columns: 1fr 1fr;
  1752.   background-color: white;
  1753. }
  1754. .compare-img-main .compare-img-wrapper {
  1755.   border: 2px solid blue;
  1756.   overflow: hidden;
  1757.   position:relative;
  1758. }
  1759. .compare-img-main .compare-img {
  1760.   border: 2px solid yellow;
  1761.   position: relative;
  1762.   top: -50px;
  1763.   height: 120%;
  1764. }
  1765. .my-button{
  1766.   cursor:pointer;
  1767.   margin-left:2px;
  1768.   margin-right:2px;
  1769.   padding:1px;
  1770.   background-color: rgb(45,53,63);
  1771.   border-bottom: 0px solid rgb(20,20,20); padding:5px;
  1772.   border-bottom: 0px solid rgb(20,20,20);border-radius: 4px;border: 1px solid rgb(22,25,28);
  1773.   box-shadow:0 1px 0 rgba(162,184,204,0.25) inset,0 0 4px hsla(0,0%,0%,0.95);
  1774.   color: white;
  1775. }
  1776. .my-button:hover{
  1777.   background-color:orange;
  1778. }
  1779. .display-none{
  1780.   display:none!important;
  1781. }
  1782. .compare-img-info {
  1783.   position: absolute;
  1784.   top: 0;
  1785.   left: 0;
  1786.   background-color: rgba(0, 121, 13, 0.6);
  1787.   color: white;
  1788.   padding:2px;
  1789.   font-size:20px;
  1790.   font-family:"Arial","Microsoft YaHei","黑体","STXihei","华文细黑";
  1791. }
  1792. `)
  1793.  
  1794.  
  1795. //创建多视窗对比框
  1796. function createMVPanel(){
  1797.   const panel = document.createDocumentFragment();
  1798.   const mainWrapper = utils.createElement('div',{id:'multiviews-main',class:'display-none'});
  1799.   const controlWrapper = utils.createElement('div',{class:'compare-warpper'});
  1800.   controlWrapper.innerHTML = `<div id="mv-backward" class="my-button">step -6</div><div class="my-button" id="mv-foreward">step +6</div>`;
  1801.   controlWrapper.innerHTML += `<select id="mv-interval"><option selected="selected" value="6">间隔6小时</option>
  1802.   <option value="12">间隔12小时</option>
  1803.   <option value="24">间隔24小时</option></select>
  1804.   <div id="close-mv" class="my-button">关闭多图模式</div>
  1805.   <span class="info"></span>`;
  1806.  
  1807.   const imgWrapper = utils.createElement('div',{class:'compare-img-main'});
  1808.   imgWrapper.innerHTML = 
  1809.   `<div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
  1810.   <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
  1811.   <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>
  1812.   <div class="compare-img-wrapper"><img class="compare-img" src=""><div class="compare-img-info">init Time</div></div>`;
  1813.   panel.append(mainWrapper);
  1814.   mainWrapper.append(controlWrapper,imgWrapper);
  1815.   //mainWrapper.append(forewardBut,backwardBut,intervalInput);
  1816.   
  1817.   document.body.append(panel);
  1818. }
  1819.  
  1820. function createMultiviewsMode(){
  1821.   const compareHandler = {
  1822.     set(obj, prop, value,receiver){
  1823.       if(prop === 'interval'){
  1824.         obj.interval = value;
  1825.         // receiver.firstImg = obj.firstImg;
  1826.         receiver.step = value * obj.imgArr.length;
  1827.         const firstImg = obj.imgArr[0];
  1828.         let imgInfo = utils.getImgNow(firstImg);
  1829.         let iHour = Number.parseInt(imgInfo.hour);
  1830.         for(let i = 0; i < obj.imgArr.length; i++){
  1831.           let currentHour = iHour + i * value;
  1832.           const hourString = utils.paddingInt(currentHour);
  1833.           obj.imgArr[i] = utils.getImgUrl(imgInfo.base,imgInfo.date,hourString,imgInfo.initDate);
  1834.         }
  1835.       }else if(prop === 'firstHr'){
  1836.         const date = obj.imgInfo.date;
  1837.         const initDate = obj.imgInfo.initDate;
  1838.         const hour = utils.paddingInt(value,3);
  1839.         const url = obj.imgInfo.getUrl(date,hour,initDate)
  1840.         receiver.firstImg = url;
  1841.       }else if(prop === 'step'){
  1842.         // console.log('step');
  1843.         // obj.step = value;
  1844.         document.getElementById('mv-foreward').innerText = 'step +' + value;
  1845.         document.getElementById('mv-backward').innerText = 'step -' + value;
  1846.       }else if(prop === 'imgInfo'){
  1847.         console.log('设置初始图像为:'+value.url);
  1848.       }else if(prop === 'firstImg'){
  1849.         const imgList = obj.fit2sameday(value);
  1850.         // console.log(imgList);
  1851.         obj.showInfo(value);
  1852.         imgList.forEach((imgSrc,i)=>{
  1853.           receiver.imgArr[i] = imgSrc;
  1854.         })
  1855.         //obj.img[0] = imgList;
  1856.         // obj.img[1] = ;
  1857.       }
  1858.       Reflect.set(obj,prop,value);
  1859.     },
  1860.   };
  1861.  
  1862.   const imgHandler = {
  1863.     set(obj, prop, value){
  1864.       console.log(`第${Number(prop)+1}个图像地址为${value}`);
  1865.       elemsConfig.mvImgDOM.img[prop].src = value;
  1866.       iImgInfo = utils.getImgNow(value);
  1867.       const initTime = moment(iImgInfo.initDate,'YYYYMMDDHH');
  1868.       const nowTime = moment(initTime).add(Number.parseInt(iImgInfo.hour)+8,'hours');
  1869.       // controlInfo.innerHTML = ' UTC+8 '+ nowTime.format('YYYY年MM月DD日HH时');
  1870.       elemsConfig.mvImgDOM.info[prop].innerHTML = 
  1871.         `【北京时${nowTime.format('MM月DD日HH时')}(${iImgInfo.hour}h)】${iImgInfo.model}, ${iImgInfo.eleName}, 起报: ${initTime.format('MM-DD HH')} UTC`;
  1872.       Reflect.set(obj,prop,value);
  1873.     },
  1874.   };
  1875.   let imgSrc = new Proxy([1,2,3,4], imgHandler);
  1876.   const modeProto = {
  1877.     imgArr:imgSrc,
  1878.     firstImg:'',
  1879.     interval:6,
  1880.     step:6,
  1881.     foreward(step=6){
  1882.       // this.firstHr = this.firstHr + step;
  1883.       // console.log(this);
  1884.       this.changeHour(this.step);
  1885.       console.log('步进');
  1886.     },
  1887.     backward(step=-6){
  1888.       let imgInfo = utils.getImgNow(this.imgArr[0]);
  1889.       // console.dir(imgInfo);
  1890.       // console.log(Number.parseInt(imgInfo.hour) - this.step>=0)
  1891.       if(Number.parseInt(imgInfo.hour) - this.step>=0){
  1892.         this.changeHour(-1*this.step);
  1893.         console.log('步退');
  1894.       }else{
  1895.         alert('不能再退了');
  1896.       }
  1897.     },
  1898.     changeHour(hr=6){
  1899.       let hour = parseInt(hr);
  1900.       for(let i = 0; i<this.imgArr.length;i++){
  1901.         let iInfo = utils.getImgNow(this.imgArr[i]);
  1902.         let newHour = parseInt(iInfo.hour)  + hour;
  1903.         // console.log(newHour);
  1904.         this.imgArr[i] = iInfo.getUrl(iInfo.date,utils.paddingInt(newHour),iInfo.initDate);
  1905.       }
  1906.     },
  1907.     firstHr:1,
  1908.     urlMode(base='http://10.148'){
  1909.       let url = base;
  1910.       return url;
  1911.     },
  1912.     initIMG(){// TODO addEventListener('error',(evt)=>{evt.srcElement.src})
  1913.       let DOMs = document.querySelectorAll('#multiviews-main .compare-img');
  1914.       let imgDOM = [];
  1915.       for(let img of DOMs){
  1916.         img.addEventListener('error',(evt)=>{let ele = evt.target;ele.onerror=null;ele.src='/images/weather/nopic_800_600.jpg';});
  1917.         imgDOM.push(img);
  1918.       };
  1919.       elemsConfig.mvImgDOM.img = imgDOM;
  1920.  
  1921.       let infoDOMs = document.querySelectorAll('#multiviews-main .compare-img-info');
  1922.       let infoList = [];
  1923.       for(let ele of infoDOMs){
  1924.         infoList.push(ele);
  1925.       };
  1926.       elemsConfig.mvImgDOM.info = infoList;
  1927.       //return imgDOM;
  1928.     },
  1929.     imgInfo:{},
  1930.     openCompare(){
  1931.       const wrapper = document.getElementById('multiviews-main');
  1932.       //if(wrapper.classList.contains('display-none')) wrapper.classList.remove('display-none')
  1933.       wrapper.classList.remove('display-none');
  1934.       try{
  1935.         let imgInfo = utils.getImgNow();
  1936.         if(elemsConfig.mvImgDOM.mode === 'multiElem'){
  1937.           for(let i = 0; i < this.imgArr.length; i++){
  1938.             const iPatt = elemsConfig.mvImgDOM.matchPattens[i];
  1939.             // console.log(iPatt);
  1940.             const iMatch = utils.matchImgPattern(iPatt);
  1941.             console.log(iMatch);
  1942.             this.imgArr[i] = utils.getImgUrl(iMatch.base,imgInfo.date,imgInfo.hour,imgInfo.initDate);
  1943.           }
  1944.         }else if(elemsConfig.mvImgDOM.mode === 'multiTime'){
  1945.           this.step = this.interval * this.imgArr.length;
  1946.           let iHour = Number.parseInt(imgInfo.hour);
  1947.           for(let i = 0; i < this.imgArr.length; i++){
  1948.             let currentHour = iHour + i * this.interval;
  1949.             const hourString = utils.paddingInt(currentHour);
  1950.             this.imgArr[i] = utils.getImgUrl(imgInfo.base,imgInfo.date,hourString,imgInfo.initDate);
  1951.           }
  1952.         }
  1953.         
  1954.       }catch(err){
  1955.         alert(err.message);
  1956.         console.error(err);
  1957.       }
  1958.     },
  1959.     closeCompare(){
  1960.       const wrapper = document.getElementById('multiviews-main');
  1961.       //if(wrapper.classList.contains('display-none')) wrapper.classList.remove('display-none')
  1962.       wrapper.classList.add('display-none');
  1963.       // this.imgInfo = utils.getImgNow();
  1964.     },
  1965.     fit2sameday(firstImg){
  1966.       const interval = this.interval;
  1967.       const firstInfo = utils.getImgNow(firstImg);
  1968.       // console.log(firstImg);
  1969.       // console.log(firstInfo);
  1970.       const imgList = [firstImg];
  1971.       const iniTime = moment(firstInfo.initDate,'YYYYMMDDHH');
  1972.       for (let i = 1; i < 4; i++){
  1973.         const fitTime = moment(iniTime).add(-1*interval*i,'hours');
  1974.         const iDate = moment(fitTime).format('YYYYMMDD');
  1975.         const iInit = moment(fitTime).format('YYYYMMDDHH');
  1976.         const hour = Number.parseInt(firstInfo.hour)+interval*i;
  1977.         // console.log('预报时效'+hour);
  1978.         const iHour = utils.paddingInt(hour,3);
  1979.         const url = firstInfo.getUrl(iDate,iHour,iInit);
  1980.         imgList.push(url);
  1981.       }
  1982.       return imgList;
  1983.     },
  1984.     changeInterval(evt){
  1985.       this.interval = Number.parseInt(evt.target.value);
  1986.       // console.log(evt);
  1987.     },
  1988.     showInfo(img){
  1989.       const controlInfo = document.querySelector('#multiviews-main .compare-warpper .info');
  1990.       const imgInfo = utils.getImgNow(img);
  1991.       const nowTime = moment(imgInfo.initDate,'YYYYMMDDHH').add(Number.parseInt(imgInfo.hour)+8,'hours');
  1992.       controlInfo.innerHTML = ' UTC+8 '+ nowTime.format('YYYY年MM月DD日HH时');
  1993.       controlInfo.innerHTML += ' | GMT'+ nowTime.add(-8,'hours').format('YYYY-MM-DD HH:00');
  1994.     },
  1995.   };
  1996.   
  1997.   const compareMode = new Proxy(modeProto,compareHandler);
  1998.   return compareMode;
  1999. }
  2000.  
  2001. createMVPanel();//创建对比DOM框架
  2002. const mvMode = createMultiviewsMode();
  2003. mvMode.hook = function(selector='', listener='',callback=()=>{},bindObj=mvMode) {
  2004.   var targetEle = document.querySelector(selector);
  2005.   targetEle.addEventListener(listener,()=>callback.call(bindObj),false);
  2006. };
  2007. mvMode.hook('#mv-backward','click',mvMode.backward,mvMode);
  2008. mvMode.hook('#mv-foreward','click',mvMode.foreward,mvMode);
  2009. // mvMode.hook('#open-mv','click',mvMode.openCompare,mvMode);
  2010. mvMode.hook('#close-mv','click',mvMode.closeCompare,mvMode);
  2011. //compareMode.hook('#compare-interval','change',(evt)=>compareMode.changeInterval(evt),compareMode);
  2012. document.getElementById('mv-interval').addEventListener('change',(evt)=>mvMode.changeInterval(evt));
  2013.  
  2014. mvMode.initIMG();
  2015. let openMvTime = document.getElementById('open-mvTime');
  2016. // console.log(openMvTime)
  2017. openMvTime.addEventListener('click',()=>{
  2018.   elemsConfig.mvImgDOM.mode = 'multiTime';
  2019.   mvMode.openCompare();
  2020. });
  2021. // let openMv = document.getElementById('open-mv');
  2022. // openMv.addEventListener('click',()=>{
  2023. //   elemsConfig.mvImgDOM.mode = 'multiElem';
  2024. //   mvMode.openCompare();
  2025. // });
  2026. /**
  2027.  * 地图单点标志
  2028.  */
  2029. function createMapIndicator(){
  2030.   let wrapDiv = document.querySelector('#main_frame');
  2031.   let pointer = utils.createElement('div',{id:'map-pointer',draggable:'true',class:'display-none'});
  2032.   pointer.innerHTML = '<span class="water-dot scale-lg"></span>'
  2033.   wrapDiv.insertAdjacentElement('afterbegin', pointer);
  2034.     //保存位置的状态值
  2035.   var pos={
  2036.     // parent_top:0,
  2037.     // parent_left:0,
  2038.     // cur_top:0,
  2039.     // cur_left:0,
  2040.     x_diff:0,// 鼠标相对目标物的位置
  2041.     y_diff:0,
  2042.   }
  2043.   
  2044.   function allowDrop(ev){    //ev是事件对象
  2045.     ev.preventDefault();   //取消事件已经关联的默认活动
  2046.   }
  2047.   
  2048.   function drag(ev){
  2049.     //dataTransfer是一个媒介，将目标对象放入媒介
  2050.     //dataTransfer对象用来保存被拖动的数据，仅在拖动事件有效
  2051.     //这里将被拖动元素的id保存为名为Text的键值对中
  2052.     
  2053.     ev.dataTransfer.setData("Pointer",ev.target.id);
  2054.   
  2055.     //获取被拖动对象相对于上层元素顶边和左边位置 
  2056.     let mouseXY = utils.getElemRelPos(ev.currentTarget,ev.clientX, ev.clientY);
  2057.     // let eStyle = getComputedStyle(ev.target);
  2058.     pos.x_diff = mouseXY.x;
  2059.     pos.y_diff = mouseXY.y;
  2060.     // console.log('current');
  2061.     // console.log(ev.currentTarget);
  2062.     // console.log(ev.target);
  2063.     // pos.parent_top=ev.target.offsetTop;
  2064.     // pos.parent_left=ev.target.offsetLeft;
  2065.     // pos.cur_top=ev.screenY;
  2066.     // pos.cur_left=ev.screenX;
  2067.     // console.log(mouseXY);
  2068.     // console.log(eStyle.marginLeft);
  2069.     // console.log(ev);
  2070.   }
  2071.   
  2072.   function drop(ev){
  2073.     var new_top,new_left;
  2074.     ev.preventDefault();
  2075.     // alert(2);
  2076.     var data=ev.dataTransfer.getData("Pointer");  //从媒介中获取目标对象
  2077.     var elem=document.getElementById(data);
  2078.   
  2079.     //这里不能这样使用，因为offset*的值是只读的，不能改变
  2080.   //   elem.offsetLeft=v.parent_left+ev.screenX-v.cur_left+"px"; 
  2081.   //   elem.offsetTop=v.parent_top+ev.screenY-v.cur_top+"px";
  2082.     let mouseXY = utils.getElemRelPos(ev.target,ev.clientX, ev.clientY);
  2083.     // let eStyle = getComputedStyle(elem);
  2084.     // console.log(mouseXY);
  2085.     // console.log(mouseXY.x+eStyle.width);
  2086.     // 此处有微小的位移
  2087.     elem.style.marginLeft = mouseXY.x - pos.x_diff + 35.8 + "px";
  2088.     elem.style.marginTop = mouseXY.y - pos.y_diff  + "px";
  2089.     // console.log([parseFloat(elem.style.marginTop)+23.2 + 12.3,parseFloat(elem.style.marginLeft)+10]);
  2090.     let newMouseXY = {
  2091.       x:parseFloat(elem.style.marginLeft) - 29.31,
  2092.       // x:parseFloat(elem.style.marginLeft) + 5.0,
  2093.       y:parseFloat(elem.style.marginTop) + 33.066,
  2094.     };
  2095.     const loc = helperConfig.matchLoc(newMouseXY, helperConfig.matchParam);
  2096.     elemsConfig.latLonInput.lat.innerHTML = loc.lat; // mouseXY.y
  2097.     elemsConfig.latLonInput.lon.innerHTML = loc.lon; // mouseXY.x
  2098.     elemsConfig.fixPoint = {lat: loc.lat, lon: loc.lon};
  2099.     // console.log(elemsConfig.fixPoint);
  2100.     utils.showTimeSeries(elemsConfig.fixPoint);
  2101.  
  2102.     // elem.style.marginLeft=pos.parent_left+ev.screenX-pos.cur_left-1+"px";
  2103.     // elem.style.marginTop=pos.parent_top+ev.screenY-pos.cur_top-23.2+"px";
  2104.     /* TODO 
  2105.       const imgXY = {
  2106.         x: elem.style.marginLeft;
  2107.         y: elem.style.marginTop;
  2108.       }
  2109.       const loc = helperConfig.matchLoc(imgXY, helperConfig.matchParam);
  2110.       elemsConfig.pointerPoint.lat = loc.lat;
  2111.       elemsConfig.pointerPoint.lon = loc.lon;
  2112.       utils.showTimeSeries(elemsConfig.pointerPoint);
  2113.     */
  2114.  
  2115.   }
  2116.   pointer.addEventListener('dragstart',drag);
  2117.   wrapDiv.addEventListener('dragover',allowDrop);
  2118.   wrapDiv.addEventListener('drop',drop);
  2119. }
  2120.  
  2121. createMapIndicator();
  2122. GM_addStyle(`
  2123. .water-dot {
  2124.   position: relative;
  2125.   display: inline-block;
  2126.   height: 26px;
  2127.   width: 16px;
  2128. }
  2129.  
  2130. .water-dot:before,
  2131. .water-dot:after {
  2132.   content: '';
  2133.   position: absolute;
  2134.   display: inline-block;
  2135. }
  2136.  
  2137. .water-dot:before {
  2138.   left: 0;
  2139.   width: 16px;
  2140.   height: 16px;
  2141.   border-radius: 50%;
  2142.   background-image: repeating-radial-gradient(8px 8px at 50% 8px, transparent 0%, transparent 3px, #dd1010 3px, #dd1010 100%);
  2143. }
  2144.  
  2145. .water-dot:after {
  2146.   bottom: 0;
  2147.   left: 50%;
  2148.   border: 14px solid #dd1010;
  2149.   border-bottom-width: 0;
  2150.   border-right-width: 7px;
  2151.   border-left-width: 7px;
  2152.   transform: translate(-50%,0);
  2153.   border-bottom-color: transparent;
  2154.   border-right-color: transparent;
  2155.   border-left-color: transparent;
  2156. }
  2157. .water-dot.scale-lg{
  2158.   transform: scale(1.5);
  2159. }
  2160. `);
  2161. /**
  2162.  * 经纬度到图像位置
  2163.  */
  2164. function latlon2XY(loc={lat:10, lon:120}){
  2165.   const imgXY =  helperConfig.matchImgXY(loc, helperConfig.matchParam);
  2166.   return imgXY;
  2167. }
  2168.  
  2169. function createCrossSectionCanvas(){
  2170.   // let wrapDiv = document.querySelector('#main_frame');
  2171.   let wrapDiv = document.querySelector('#pic_frame');
  2172.   const cv = utils.createElement('canvas',{id:'cv-draw-line',width:"800", height:"600",style:"border:1px solid #d3d3d3;"});
  2173.   wrapDiv.insertAdjacentElement('afterbegin', cv);
  2174.   const ctx = cv.getContext('2d');
  2175.   const line = {start:[0,0],end:[0,0],init:false};
  2176.   const cvMsMove = function(ev){
  2177.     // console.log('test2');
  2178.     ctx.clearRect(0,0,800,600);
  2179.     ctx.beginPath();
  2180.     ctx.lineWidth=3;
  2181.     let mouseXY = utils.getElemRelPos(ev.target,ev.clientX, ev.clientY);
  2182.     line.end = [mouseXY.x, mouseXY.y];
  2183.     ctx.moveTo(...line.start);
  2184.     ctx.lineTo(...line.end);
  2185.     ctx.strokeStyle="green";
  2186.     ctx.stroke();
  2187.     // console.log(line);
  2188.   }
  2189.  
  2190.   const cvMsClick = function (ev) {
  2191.     // console.log('test');
  2192.   	if(line.init){
  2193.       cv.removeEventListener('mousemove',cvMsMove, false);
  2194.       line.init = false;
  2195.     }else{
  2196.       // ctx.beginPath();
  2197.       // ctx.lineWidth=10;
  2198.       // ctx.moveTo(0,0);
  2199.       // ctx.lineTo(50,50);
  2200.       // ctx.strokeStyle="green";
  2201.       // ctx.stroke();
  2202.       let mouseXY = utils.getElemRelPos(ev.target,ev.clientX, ev.clientY);
  2203.       line.start = [mouseXY.x, mouseXY.y];
  2204.       cv.addEventListener('mousemove',cvMsMove, false);
  2205.       line.init = true;
  2206.     }
  2207.  
  2208.   }
  2209.   cv.addEventListener('click', cvMsClick, false);
  2210.   ctx.fillStyle = 'rgba(255,255,255,0)';
  2211. }
  2212.   setTimeout(()=>{createCrossSectionCanvas()},5000);
  2213.  
  2214. GM_addStyle(`.show_panel{z-index:11;}
  2215. #pic_frame,#main_frame{
  2216.   position:relative;                                   
  2217. }
  2218. #map-pointer {
  2219.   position: absolute;
  2220.   top: 22px;
  2221.   left: 0px;
  2222.   /*background-color: rgba(0, 152, 50, 0.7);*/
  2223.   color: white;
  2224.   /*width:15px;*/
  2225.   /*height:15px;*/
  2226.   display:inline-block;
  2227.   padding:2px;
  2228.   z-index:10;
  2229.   cursor:pointer;
  2230. }
  2231. #cv-draw-line{
  2232.   position: absolute;
  2233.   z-index:9;
  2234.   left:0px;
  2235.   cursor:crosshair;
  2236.   display:none
  2237. }
  2238. `);