新增智慧气象主题

新增气象预报大数据平台模板

智慧气象/气象预报大数据平台/css/index.css

@@ -0,0 +1,455 @@
+html{
+    height: 100%;
+}
+body{
+    height: 100%;
+    width: 100%;
+    min-width: 1280px;
+    margin: 0;
+    background: url('../img/bg.png') no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+    padding: 3%;
+
+}
+.content{
+    height: 100%;
+}
+@font-face {
+    font-family: "numfont";
+    src: url('../fonts/num.otf') format('truetype');
+}
+.numfont {
+    font-family:"numfont" !important;
+    font-size:16px;
+    font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.left{
+    float: left;
+    width: 30%;
+    height: 100%;
+}
+/*closed*/
+#btn{
+    position: absolute;
+    top: 12%;
+    right: 12%;
+    width: 52px;
+    height: 52px;
+    z-index: 9999999;
+    cursor: pointer;
+}
+#btn>div{
+    width: 52px;
+    height: 52px;
+    position: relative;
+}
+
+.btn0{
+    position: absolute;
+    width: 52px;
+    height: 52px;
+    background: url("../img/close0.png") no-repeat;
+    background-size: 100%;
+    animation: clockwise 3s linear infinite;
+}
+.btn1{
+    position: absolute;
+    width: 34px;
+    height: 34px;
+    margin: 9px;
+    background: url("../img/close1.png") no-repeat;
+    background-size: 100%;
+}
+.btn2{
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    margin: 16px;
+    background: url("../img/close2.png") no-repeat;
+    background-size: 100%;
+    animation: anticlockwise 3s linear infinite;
+}
+@keyframes clockwise {
+    0% {
+        transform:rotate(0deg);
+    }
+    100% {
+        transform:rotate(-360deg);
+    }
+}
+@keyframes anticlockwise {
+    0% {
+        transform:rotate(0deg);
+    }
+    100% {
+        transform:rotate(360deg);
+    }
+}
+/*air*/
+.air{
+    height: 20%;
+}
+.title{
+    background: url("../img/line.png") no-repeat top;
+    background-size: 90%;
+    height: 12%;
+    color: #ACA5A1;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1%;
+    font-weight: bold;
+}
+.air-relative,.air-absolutely{
+    height: 20%;
+    position: relative;
+}
+.air-relative{
+    margin: 2% 0 8% 0;
+}
+.air-val{
+    float: left;
+    color: white;
+    height: 100%;
+    line-height: 100%;
+    width: 15%;
+}
+.air-val div{
+    width: 60%;
+    height: 100%;
+    float: left;
+    margin-left: 1%;
+    margin-top: 4%;
+}
+.air-val div p{
+    margin: 0 5%;
+}
+.unit{
+    width: 15%;
+    float: right;
+    margin-right: 5%;
+    color: white;
+    height: 100%;
+    font-family: numfont;
+    line-height: 200%;
+    text-align: right;
+}
+.gray{
+    border-bottom: 1px solid #25201E;
+}
+.gray,.light{
+    height: 100%;
+    width: 70%;
+    position: absolute;
+    left: 15%;
+}
+.gray span,.light span{
+    display: block;
+    width: 2%;
+    height: 90%;
+    float: left;
+}
+.air-relative .gray span{
+    background: url("../img/bartop1.png") no-repeat;
+    background-size: auto 100%;
+}
+.air-relative .light span{
+    background: url("../img/bartop0.png") no-repeat;
+    background-size: auto 100%;
+}
+.air-absolutely .gray span{
+    background: url("../img/barfoot1.png") no-repeat;
+    background-size: auto 100%;
+}
+.air-absolutely .light span{
+    background: url("../img/barfoot0.png") no-repeat;
+    background-size: auto 100%;
+}
+.air-icon{
+    display: block;
+    width: 20%;
+    height: 90%;
+    float: left;
+
+}
+.air-relative .air-icon {
+    background: url("../img/bartop0.png") no-repeat;
+    background-size: auto 100%;
+}
+.air-absolutely .air-icon{
+    background: url("../img/barfoot0.png") no-repeat;
+    background-size: auto 100%;
+}
+.hpa-rel,.hpa-abs{
+    font-size: 30px;
+}
+.air-val .hpa-nam{
+    margin-top: 20%;
+}
+.hpa-nam{
+    font-size: 12px;
+}
+
+/*tem-hum*/
+.tem-hum{
+    height: 25%;
+    margin-top: 2%;
+}
+.temperature,.humidity{
+    float: left;
+    width: 50%;
+    height: 100%;
+    background: url("../img/leftline.png") no-repeat left;
+    background-size: auto 100%;
+}
+.tem-hum-title{
+    background: #B0CC35;
+    width: 60%;
+    margin-left: 25%;
+    height: 10%;
+    font-size: 11px;
+    font-weight: bold;
+    text-align: center;
+    line-height: 160%;
+}
+.tem-hum-chart{
+    width: 80%;
+    height: 80%;
+    margin: 0 auto;
+}
+.tem-val,.hum-val{
+    width: 70%;
+    margin-left: 25%;
+    height: 10%;
+    font-size: 11px;
+    font-weight: bold;
+}
+.indoor,.outdoor{
+    display: inline-block;
+    color: white;
+    text-indent: 8px;
+    margin-left: 8px;
+}
+.indoor{
+    border-left: 4px solid #B0CC35;
+}
+.outdoor{
+    border-left: 4px solid red;
+}
+/*temp-k*/
+.temp-k{
+    height: 21%;
+    margin-top: 3%;
+}
+#tempKChart{
+    height: 87%;
+}
+.dity-k{
+    height: 21%;
+}
+#dityKChart{
+    height: 87%;
+}
+/*map*/
+.middle{
+    float: left;
+    width: 34%;
+    height: 100%;
+}
+.chinaMap{
+    margin-top: 3%;
+    width: 100%;
+    height: 70%;
+    overflow: hidden;
+    z-index: 999999;
+    position: relative;
+}
+.mapBox{
+    background: url("../img/wrapper.png") no-repeat center;
+    background-size: 100% 100%;
+    width: 90%;
+    margin: 7% auto;
+    height: 85%;
+}
+#map{
+    width: 100%;
+    height: 100%;
+}
+.lineRun{
+    width: 100%;
+    height: 80px;
+    background: url("../img/animate.png") no-repeat bottom;
+    background-size: 100%;
+}
+.headTitle{
+    font-family: numfont;
+    color: #B0CC35;
+    position: relative;
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+}
+
+/*right*/
+.right{
+    float: left;
+    width: 36%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-right: 5%;
+}
+.information{
+    width: 90%;
+    height: 20%;
+    padding: 0 5%;
+}
+.baseInfo,.temData{
+    width: 45%;
+    height: 100%;
+    float: left;
+    background: url("../img/verticalline.png") no-repeat left;
+    background-size: auto 100%;
+    padding-left: 5%;
+}
+
+.infoTitle{
+    font-size: 10px;
+    color: #AEA7A3;
+    margin-top: 0;
+}
+.area{
+    font-family: numfont;
+    font-size: 30px;
+    color: #B0CC35;
+    margin: 0 0 12px 0;
+}
+.days{
+    font-family: numfont;
+    color: #B0CC35;
+    font-size: 25px;
+}
+.date{
+    display: inline-block;
+    text-indent: 29px;
+}
+.idNum{
+    display: inline-block;
+    text-indent: 50px;
+}
+.temTitle{
+    color: red;
+    font-size: 18px;
+    margin: 0;
+}
+.indoorTem{
+    font-family: numfont;
+    color: red;
+    font-size: 30px;
+    margin: 0 0 15px 0;
+}
+.temperatureN{
+    font-size: 60px;
+    display: inline-block;
+    margin-right: 15px;
+}
+.point span{
+    display: inline-block;
+    
+    margin-right: 80px;
+}
+.wind{
+    width: 100%;
+    height: 30%;
+    margin-top: 3%;
+}
+#windChart{
+    width: 45%;
+    margin-left: 5%;
+    float: left;
+    height: 100%;
+}
+.windData{
+    width: 45%;
+    float: left;
+    height: 100%;
+}
+.windSpeed,.gust{
+    width: 94%;
+    height: 50%;
+    float: right;
+    background: url("../img/line1.png") no-repeat center;
+    background-size: 100%;
+    overflow: hidden;
+}
+.windTitle{
+    background: #B0CC35;
+    width: 60%;
+    margin-top: 5%;
+    margin-left: 35%;
+    height: 14%;
+    font-size: 11px;
+    font-weight: bold;
+    text-align: center;
+    line-height: 160%;
+}
+.windBox{
+    width: 100%;
+    height: 80%;
+    color: #ACA5A1;
+}
+.windBox>div{
+    margin-top: 2%;
+    height: 98%;
+    float: left;
+}
+.windBox div p{
+    font-size: 12px;
+    margin: 5px 0;
+}
+.windWrap{
+    width: 76%;
+    height: 80%;
+    margin: 20% 12%;
+    background: url("../img/wind0.png") no-repeat;
+    background-size: 100%;
+    overflow: hidden;
+}
+.windFan{
+    width: 60%;
+    margin: 20%;
+}
+.currentSpeed,.highestSpeed{
+    font-family: numfont;
+    color: #B0CC35;
+    font-size: 30px;
+}
+
+.windSpeed .windFan{
+    animation: speed 600ms linear infinite;
+}
+.gust .windFan{
+    animation: speed 400ms linear infinite;
+}
+@keyframes speed {
+    0% {
+        transform:rotate(0deg);
+    }
+    100% {
+        transform:rotate(360deg);
+    }
+}
+/*rain*/
+.air-title{
+    height: 5%;
+}
+.rainfall{
+    width: 100%;
+    height: 33%;
+    margin-top: 5%;
+}
+.rainfall .windData{
+    margin-left: 2.5%;
+}

智慧气象/气象预报大数据平台/css/login.css

@@ -0,0 +1,142 @@
+html,body{
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+body{
+    background: url("../img/loginbg.png") no-repeat center;
+    background-size: cover;
+}
+.content{
+    width: 845px;
+    height: 260px;
+    margin: 0 auto;
+    position: relative;
+    top: 50%;
+    margin-top: -125px;
+    background: url("../img/login0.png") no-repeat center;
+}
+.left,.middle,.right{
+    width: 33%;
+    float: left;
+    color: #B0CC35;
+    text-align: center;
+}
+.left{
+    margin-left: 1%;
+    margin-top: 13px;
+}
+.left p{
+    font-size: 18px;
+}
+.middle{
+    margin-top: 80px;
+}
+.middle .login{
+    width: 280px;
+    height: 40px;
+    margin-bottom: 30px;
+    background: url("../img/login1.png") no-repeat center;
+}
+.middle .login input{
+    height: 38px;
+    border: none;
+    background: none !important;
+    outline: none;
+    color: #B0CC35;
+}
+.right{
+    margin-top: 50px;
+    position: relative;
+    box-sizing: border-box;
+    padding-top: 88px;
+    padding-left: 156px;
+}
+.btn0{
+    position: absolute;
+    width: 78px;
+    height: 78px;
+    background: url("../img/close0.png") no-repeat;
+    background-size: 100%;
+    animation: clockwise 3s linear infinite;
+}
+.btn1{
+    position: absolute;
+    width: 52px;
+    height: 52px;
+    margin: 13px;
+    background: url("../img/close1.png") no-repeat;
+    background-size: 100%;
+}
+.btn2{
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    margin: 24px;
+    background: url("../img/close2.png") no-repeat;
+    background-size: 100%;
+    animation: anticlockwise 3s linear infinite;
+}
+@keyframes clockwise {
+    0% {
+        transform:rotate(0deg);
+    }
+    100% {
+        transform:rotate(-360deg);
+    }
+}
+@keyframes anticlockwise {
+    0% {
+        transform:rotate(0deg);
+    }
+    100% {
+        transform:rotate(360deg);
+    }
+}
+#earth{
+    width: 150px;
+    height: 150px;
+    margin-left: 60px;
+}
+.warning{
+    width: 595px;
+    height: 100px;
+    background: url("../img/login2.png") no-repeat center;
+    margin: 0 auto;
+    position: relative;
+    color:red;
+    line-height: 100px;
+    text-align: center;
+    font-weight: bold;
+}
+.warning span{
+    animation: 1s bounceIn;
+    font-size: 50px;
+    display: block;
+    position: absolute;
+    left: 8%;
+    margin-top: -5px;
+}
+@keyframes bounceIn {
+    from, 20%, 40%, 60%, 80%, to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    0% {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+
+    100% {
+        transform: scale3d(1, 1, 1);
+    }
+}
+.bounceIn{
+    animation: 500ms bounceIn;
+}
+#btn{
+    width: 78px;
+    height: 78px;
+    cursor: pointer;
+}

智慧气象/气象预报大数据平台/geojson/aomen.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"id":"820001","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@LADC^umZ@DONWE@DALBBF@H@DFBBTC"],["@@P@LC@AGM@OECMBABBTCD@DDH"]],"encodeOffsets":[[[116285,22746]],[[116303,22746]]]},"properties":{"cp":[113.552965,22.207882],"name":"花地玛堂区","childNum":2}},{"id":"820002","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@MK@CA@AAGDEB@NVFJG"],"encodeOffsets":[[116281,22734]]},"properties":{"cp":[113.549052,22.199175],"name":"花王堂区","childNum":1}},{"id":"820003","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@EGOB@DNLHE@C"],"encodeOffsets":[[116285,22729]]},"properties":{"cp":[113.550252,22.193791],"name":"望德堂区","childNum":1}},{"id":"820004","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ŸYMVAN@BFCBBDAFHDBBFDHIJJEFDPCHHlYJQ"],"encodeOffsets":[[116313,22707]]},"properties":{"cp":[113.55374,22.188119],"name":"大堂区","childNum":1}},{"id":"820005","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@JICGAECACGEBAAEDBFNXB@"],"encodeOffsets":[[116266,22728]]},"properties":{"cp":[113.54167,22.187778],"name":"风顺堂区","childNum":1}},{"id":"820006","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ ZNWRquZCBCC@AEA@@ADCDCAACEAGBQ@INEL"],"encodeOffsets":[[116265,22694]]},"properties":{"cp":[113.558783,22.154124],"name":"嘉模堂区","childNum":1}},{"id":"820007","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@MOIAIEI@@GE@AAUCBdCFIFR@HAFBBDDBDCBC@@FB@BDDDA\\M"],"encodeOffsets":[[116316,22676]]},"properties":{"cp":[113.56925,22.136546],"name":"路凼填海区","childNum":1}},{"id":"820008","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@DKMMa_GC_COD@dVDBBF@@HJ@JFJBNPZK"],"encodeOffsets":[[116329,22670]]},"properties":{"cp":[113.559954,22.124049],"name":"圣方济各堂区","childNum":1}}],"UTF8Encoding":true}

智慧气象/气象预报大数据平台/js/render.js

@@ -0,0 +1,183 @@
+/*
+ * 2017.7.24
+ * author:acdSeen
+ * */
+(function(window,factory){
+
+    if(typeof define === "function" && define.amd){
+        //AMD
+        define(factory);
+    }else if(typeof module === "object" && module.exports){
+        //CMD
+        module.exports = factory();
+    }else{
+        //window
+        window.WaterPolo = factory();
+    }
+
+}(typeof window !== "undefined" ? window : this, function(selector,userOptions){
+//采用window作为参数传入，将功能函数挂载到window上
+
+    var WaterPolo=function(selector,userOptions){
+
+        'user strict';
+        
+        userOptions=userOptions||{};
+
+        var options={
+            //容器距边缘的距离
+            wrapW:3,
+
+            //canvas属性
+            cW:300,
+            cH:300,
+            lineWidth : 2,
+
+            //液面位置 百分比表示
+            baseY: 20,
+
+            //页面起始位置
+            nowRange: 0,
+
+            //线条颜色
+            lineColor:'rgb(176,204,53)',
+            //上层颜色
+            oneColor:'rgba(176,204,53,.6)',
+
+            //下层颜色
+            twoColor:'rgba(176,204,53,.4)',
+
+            //上层波浪宽度，数越小越宽
+            oneWaveWidth:0.06,
+
+            //下层波浪宽度
+            twoWaveWidth:0.06,
+
+            //上层波浪高度，数越大越高
+            oneWaveHeight:4,
+
+            //下层波浪高度
+            twoWaveHeight:4,
+
+            //上层波浪x轴偏移量
+            oneOffsetX:10,
+
+            //下层波浪x轴偏移量
+            twoOffsetX:20,
+
+            //波浪滚动速度，数越大越快
+            speed:0.2
+        };
+
+        
+        var canvas = null,
+            ctx = null,
+            W = null,
+            H = null;
+
+
+        Object.defineProperty(this, 'options', {  
+                get: function() {  
+                    return options;  
+                },  
+                set: function(value) { 
+                    
+                    mergeOption(value,options);
+                }  
+            }); 
+         
+
+        //参数混合相当于$.extend([old],[new])
+        var mergeOption=function(userOptions,options){
+            Object.keys(userOptions).forEach(function(key){
+                options[key]=userOptions[key];
+            })
+        };
+
+        //生成液面
+        var makeLiquaid=function(ctx,xOffset,waveWidth,waveHeight,color){
+            ctx.save();
+            var points = [];//用于存放绘制Sin曲线的点
+            ctx.beginPath();
+            //在x轴上取点
+            for (var x = 0; x < options.cW; x += 20 / options.cW) {
+                //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
+                var y = -Math.sin(x * waveWidth + xOffset);
+
+                //液面高度百分比改变
+                var dY = options.cH * (1 - options.nowRange / 100);
+
+                points.push([x, dY + y * waveHeight]);
+                ctx.lineTo(x, dY + y * waveHeight);
+            }
+            //封闭路径
+            ctx.lineTo(options.cW, options.cH);
+            ctx.lineTo(0, options.cH);
+            ctx.lineTo(points[0][0], points[0][1]);
+            ctx.fillStyle = color;
+            ctx.fill();
+            ctx.restore();
+        };
+
+        //初始化设置
+
+        var init=function(){
+            
+            mergeOption(userOptions,options);
+
+            canvas=document.getElementById(selector);
+            ctx=canvas.getContext('2d');
+
+            canvas.width=options.cW;
+            canvas.height=options.cH;
+
+            ctx.lineWidth=options.lineWidth;
+
+            //圆属性
+            var r = options.cH / 2; //圆心
+            var cR = r - 6; //圆半径 决定圆的大小
+            
+            var drawCircle = function(ctx){
+                ctx.beginPath();
+                ctx.strokeStyle = options.lineColor;
+                ctx.arc(r, r, cR+options.wrapW, 0, 2 * Math.PI);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.arc(r, r, cR, 0, 2 * Math.PI);
+                ctx.clip();
+
+            };
+            drawCircle(ctx);//画圆
+
+            (function drawFrame(){
+
+                window.requestAnimationFrame(drawFrame);
+
+                ctx.clearRect(0, 0, options.cW, options.cH);
+                
+                //高度改变动画参数
+
+                if (options.nowRange <= options.baseY) {
+                    var tmp = 1;
+                    options.nowRange += tmp;
+                }
+
+                if (options.nowRange > options.baseY) {
+                    var tmp = 1;
+                    options.nowRange -= tmp;
+                }
+                makeLiquaid(ctx,options.oneOffsetX,options.oneWaveWidth,options.oneWaveHeight,options.oneColor);
+                makeLiquaid(ctx,options.twoOffsetX,options.twoWaveWidth,options.twoWaveHeight,options.twoColor);
+
+                options.oneOffsetX+=options.speed;
+                options.twoOffsetX+=options.speed;
+
+            }());
+
+            
+        };
+        init();
+        
+    };
+    return WaterPolo;
+}));

智慧气象/气象预报大数据平台/login.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Weather Station</title>
+    <link rel="stylesheet" href="./css/login.css">
+</head>
+
+<body>
+    <div class="content">
+        <div class="left">
+            <p>WEATHER STATION</p>
+            <div id="earth"></div>
+        </div>
+        <div class="middle">
+            <form id="myform">
+                <div class="login">
+                    <input type="text" placeholder="请输入登录名" id="account" />
+                </div>
+                <div class="login">
+                    <input type="password" placeholder="请输入密码" id="password" />
+                </div>
+            </form>
+
+        </div>
+        <div class="right">
+            <div id="btn" title="Login">
+                <div class="btn0"></div>
+                <div class="btn1"></div>
+                <div class="btn2"></div>
+            </div>
+        </div>
+    </div>
+    <div class="warning" style="display: none;">
+        <span>×</span>PASSWORD ERROR, PLEASE RE-ENTER PASSWORD
+    </div>
+    <script src="js/jquery-3.2.1.min.js"></script>
+    <script src="js/echarts.js"></script>
+    <script src="js/echarts-gl.min.js"></script>
+    <script src="js/world.js"></script>
+    <script>
+        var earth = echarts.init(document.getElementById('earth'));
+        //自制纹理贴图
+        var canvas = document.createElement('canvas');
+        var mapChart = echarts.init(canvas, null, {
+            width: 4096, height: 2048
+        });
+        mapChart.setOption({
+            backgroundColor: 'rgba(64,75,93,.1)',
+            series: [
+                {
+                    type: 'map',
+                    map: 'world',
+                    // 绘制完整尺寸的 echarts 实例
+                    top: 0, left: 0,
+                    right: 0, bottom: 0,
+                    boundingCoords: [[-180, 90], [180, -90]],
+                    itemStyle: {
+                        normal: {
+                            areaColor: 'rgba(176,203,37,1)',
+                            borderColor: 'rgb(0,0,0)'
+                        },
+                        emphasis: {
+                            areaColor: 'rgba(176,203,37,1)'
+                        }
+                    }
+                }
+            ]
+        });
+        var option = {
+            globe: {
+                baseTexture: mapChart,
+                viewControl: {
+                    rotateSensitivity: 0,
+                    panSensitivity: 0,
+                    zoomSensitivity: 0
+                }
+            }
+        };
+        earth.setOption(option);
+        //登录
+        $('#btn').on('click', function () {
+            var account = $('#account').val();
+            var password = $('#password').val();
+            if (account == '' || password == '') {
+                //alert('用户名或密码不能为空！');
+                $('.warning').show().addClass('bounceIn');
+                return
+            }
+            if(account==='1234567'&&password==='1234567'){
+                window.location.href="bigdata.html";
+            }
+            /* $.ajax({
+                url: '@Url.Action("Login")',
+                type: 'post',
+                data: { account: account, password: password },
+                success: function (result) {
+                    result = handleError(result);
+                    if (!result.IsError) {
+                        window.location = '@Url.Action("Index", "Home")';
+                    }
+                }
+            }) */
+        })
+    </script>
+</body>
+
+</html>