墨迹api实现天气预测

原创 已于 2025-03-25 11:30:15 修改 · 1.8k 阅读 · 4 ·
CC 4.0 BY-SA版权
柳晓黑胡椒
文章标签：

#javascript #前端 #开发语言

于 2023-06-28 14:48:50 首次发布
文章展示了如何使用Vue.js框架结合墨迹天气API来创建一个天气预报应用，包括获取并展示日落时间、日出时间、24小时天气数据、15天天气预测以及空气质量预报。应用中包含了多个组件，如天气警告、24小时和15天的天气图表。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

🚀 个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、优快云优质创作者
💟 作 者：柳晓黑胡椒❣️
📝 专 栏：vue实践
🌈 若有帮助，还请关注 ➕ 点赞➕收藏，不行的话我再努努力💪💪💪

文章目录

需求背景

使用墨迹天气api实现天气预报，空气质量预报功能

解决效果

在这里插入图片描述
在这里插入图片描述

接口地址

墨迹天气

index.vue

<template>
  <div class="dqhjjc-wrap">
    <div class="first_level_heading">
      <span>大气环境检测</span>
      <el-select v-model="curCity" placeholder="站点类型" size="mini" style="width:130px" @change="getlist">
        <el-option v-for="item in citys" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="main-con">
      <weather :sunSetHour="sunSetHour" :sunRiseHour="sunRiseHour" :hourlys="hourlys" :forecasts="forecasts"/>
    </div>
  </div>
</template>
<script>
import Weather from './weather'
import Real from './real'
import SiteAir from './siteAir'
import Wind from './wind'
import qs from 'qs'
import {
  data24hours,
  day15Data,
  aqis
} from './weatherData'

export default {
  name: 'YuxiEnvironmentalDqhjjc',
  components: {
    Weather,
    Real,
    SiteAir,
    Wind
  },
  data() {
    return {
      sunSetHour: 22,//日落小时
      sunRiseHour: 6,//日出小时
      hourlys: [],// 24小时天气数据
      forecasts: [],// 15天天气数据
      headers: {},
      citys: [
        { label: '玉溪市', value: 2851 },
        { label: '江川县', value: 2852 },
        { label: '澄江市', value: 2853 },
        { label: '通海县', value: 2854 },
        { label: '华宁县', value: 2855 },
        { label: '易门县', value: 2856 },
        { label: '峨山彝族自治县', value: 2857 },
        { label: '新平彝族傣族自治县', value: 2858 },
        { label: '元江哈尼族彝族傣族自治县', value: 2859 }
      ],
      curCity: 2851
    }
  },
  methods: {
    getlist() {
      // 天气实况
      fetch('http://aliv18.data.moji.com/whapi/json/alicityweather/condition', {
        method: 'POST',
        headers: this.headers,
        body: qs.stringify({ cityId: this.curCity })
      }).then(response => response.json()).then(res => {
        this.sunSetHour = new Date(res.data.condition.sunSet).getHours()
        this.sunRiseHour = new Date(res.data.condition.sunRise).getHours()
      })
      // 天气预报24小时
      fetch('http://aliv18.data.moji.com/whapi/json/alicityweather/forecast24hours', {
        method: 'POST',
        headers: this.headers,
        body: qs.stringify({ cityId: this.curCity })
      }).then(response => response.json()).then(res => {
        this.hourlys = res.data.hourly
      })
      // 天气预报15天
      fetch('http://aliv18.data.moji.com/whapi/json/alicityweather/forecast15days', {
        method: 'POST',
        headers: this.headers,
        body: qs.stringify({ cityId: this.curCity })
      }).then(response => response.json()).then(res => {
        this.forecasts = res.data.forecast
      })
      // AQI预报5天
      fetch('http://aliv18.data.moji.com/whapi/json/alicityweather/aqiforecast5days', {
        method: 'POST',
        headers: this.headers,
        body: qs.stringify({ cityId: this.curCity })
      }).then(response => response.json()).then(res => {
        // this.forecasts = res.data.forecast
        console.log(res, 3333)
      })
    }
  },
  mounted() {
    this.headers = new Headers()
    this.headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
    this.headers.append('Authorization', 'APPCODE f70abac0ebcb459588c96c4ec7a8bcad') // 登录凭证
    // this.getlist() // todo 天气接口次数有限
    // 模拟接口
    const self = this
    window.setTimeout(() => {
      self.hourlys = data24hours.data.hourly// 24小时数据
      self.forecasts = day15Data.data.forecast// 15天数据
      self.aqis = aqis.data.data.aqi // 当日aqi数据
    }, 500)
  }
}
</script>

weather.vue

<template>
  <div>
    <div class="wrap">
      <span class="panelSecondTitle">天气预警</span>
      <div class="btn">
        <button
          v-for="item in weatherTypes"
          :key="item.id"
          :class="weatherTypeActiveId === item.id?'select':''"
          @click="weatherTypeActiveId = item.id"
        >
          {{ item.label }}
        </button>
      </div>
    </div>
    <div id="weatherLineChart" :style="{height:weatherTypeActiveId==1?'185px':'230px'}">
      <div v-show="weatherTypeActiveId==1">
        <div class="weather24IconBox">
          <div v-for="(item, index) in weather24Icons" :key="index" class="iconItem">
            <div class="iconImg">
              <img :src="require(`/public/img/weather/${item.icon}.png`)"/>
            </div>
            <div class="iconCon">{{ item.con }}</div>
            <div class="state">良</div>
          </div>
        </div>
        <div id="dqhjjc24WeatherChart" style="width: 1100px;height: 120px"></div>
      </div>
      <div v-show="weatherTypeActiveId!=1">
        <div class="weather15DayBox">
          <div v-for="(item, index) in weather15DayIcons" :key="index" class="iconItem">
            <div class="iconWeek">{{ item.week }}</div>
            <div class="iconDate">{{ item.date }}</div>
            <div class="iconImg">
              <img :src="require(`/public/img/weather/${item.icon}.png`)"/>
            </div>
            <div class="iconCon">{{ item.con }}</div>
          </div>
        </div>
        <div id="dqhjjc15WeatherChart" style="width: 900px;height: 120px"></div>
        <div class="weather15NightBox">
          <div v-for="(item, index) in weather15NightIcons" :key="index" class="iconItem">
            <div class="iconImg">
              <img :src="require(`/public/img/weather/${item.icon}.png`)"/>
            </div>
            <div class="iconCon">{{ item.con }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: ['sunSetHour', 'sunRiseHour', 'hourlys', 'forecasts'],
  data() {
    return {
      weatherTypes: [
        { label: '24小时', id: 1 },
        { label: '15天', id: 2 }
      ],
      weatherTypeActiveId: 1,
      my24Chart: null,
      my15Chart: null,
      weather24Icons: [],
      weather15DayIcons: [],
      weather15NightIcons: []
    }
  },
  watch: {
    hourlys: {
      handler: {
        handler(data) {
          const option = this.my24Chart.getOption()
          option.xAxis[0].data = data.map((item) => item.hour + ':00')
          option.series[0].data = data.map((item) => item.temp)
          this.weather24Icons = data.map((item) => {
            let temp = {}
            temp.con = item.condition
            temp.id = item.hour
            if (
              item.hour < this.sunSetHour &&
              item.hour >= this.sunRiseHour
            ) {
              temp.icon = 'W' + item.iconDay
            } else {
              temp.icon = 'W' + item.iconNight
            }
            return temp
          })
          this.my24Chart.setOption(option)
        }
      }
    },
    forecasts: {
      handler(data) {
        const option = this.my15Chart.getOption()
        option.xAxis[0].data = data.map((item) => item.predictDate.split('-')[1] + '/' + item.predictDate.split('-')[2])
        option.series[0].data = data.map((item) => item.tempDay)
        option.series[1].data = data.map((item) => item.tempNight)
        this.weather15DayIcons = data.map(item => ({
          icon: 'W' + item.conditionIdDay,
          con: item.conditionDay,
          date:
            item.predictDate.split('-')[1] +
            '/' +
            item.predictDate.split('-')[2],
          week: new Date(item.predictDate).format('l')
        }))
        this.weather15NightIcons = data.map(item => ({
          icon: 'W' + item.conditionIdNight,
          con: item.conditionNight
        }))
        this.my15Chart.setOption(option)
      }
    }
  },
  methods: {
    draw24WeatherChart() { // 24小时天气
      let chartDom = document.getElementById('dqhjjc24WeatherChart')
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      this.my24Chart = echarts.init(chartDom)
      const option = {
        color: ['#0C65F6', '#00D68A'],
        tooltip: {
          confine: true
        },
        grid: {
          left: '-2%',
          right: '0%',
          top: '17%  ',
          bottom: '5%',
          containLabel: true
        },
        legend: {
          show: false
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          },
          interval: 1,
          axisLabel: {
            align: 'center',
            fontSize: 12,
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: ['20:00', '21:00', '22:00', '23:00', '0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00']
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {
            type: 'line',
            // showSymbol: false,
            smooth: true,
            name: '气温', // 图例对应类别
            data: ['15', '13', '12', '11', '11', '10', '10', '9', '8', '7', '7', '7', '6', '10', '13', '17', '18', '19', '19', '19', '19', '19', '19', '18', '17'], // 纵坐标数据
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                [
                  {
                    offset: 0,
                    color: '#09515a'
                  },
                  {
                    offset: 0.5,
                    color: '#09515a'
                  },
                  {
                    offset: 1,
                    color: 'transparent'
                  }
                ],
                false
              )
            },
            lineStyle: {
              color: '#20b3c8',
              width: 2
            },
            itemStyle: {
              color: '#c3e2fc'
            },
            tooltip: {
              show: true,
              trigger: 'item',
              formatter: '{a}:<br />{c}℃'
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'

            }
          }
        ]
      }
      option && this.my24Chart.setOption(option)
      this.dragScroll('weatherLineChart')
    },
    draw15WeatherChart() {
      let chartDom = document.getElementById('dqhjjc15WeatherChart')
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      this.my15Chart = echarts.init(chartDom)
      const option = {
        grid: {
          left: '-3%',
          right: '0%',
          top: '0%  ',
          bottom: '-29%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            type: 'category',
            data: ['10/09', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20', '10/21', '10/22', '10/23', '10/24'],
            show: false
          }
        ],
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            data: ['20', '19', '21', '20', '24', '25', '25', '26', '24', '23', '24', '29', '31', '28', '28', '31'],
            type: 'line'
          },
          {
            data: ['7', '7', '7', '10', '13', '13', '14', '14', '9', '7', '11', '13', '14', '13', '13', '13'],
            type: 'line'
          }
        ]
      }
      option && this.my15Chart.setOption(option)
    },
    dragScroll(moveTarget) {
      const title = document.getElementById(moveTarget)
      let startScrollLeft = 0
      let startX = 0
      let dragging = false
      title.addEventListener('mousedown', function(e) {
        e.stopPropagation()
        startScrollLeft = title.scrollLeft
        startX = e.clientX
        dragging = true
      })

      title.addEventListener('mousemove', function(e) {
        if (dragging) {
          const distance = e.clientX - startX
          title.scrollLeft = startScrollLeft - distance
        }
      })

      title.addEventListener('mouseup', function() {
        dragging = false
      })

      // -----鼠标滑轮滚动-----
      title.addEventListener('wheel', event => {
        event.preventDefault()
        const delta = event.deltaX || event.deltaY
        title.scrollLeft += delta
      })
    }
  },
  mounted() {
    this.draw24WeatherChart()
    this.draw15WeatherChart()
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  justify-content: space-between;
  /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
  .btn {
    height: 30px;
    border-radius: 5px;
    border: 1px solid rgb(35, 145, 255);
    box-sizing: border-box;
    overflow: hidden;

    > button {
      width: 70px;
      text-align: center;
      line-height: 30px;
      margin: 0;
      padding: 0;
      background-color: transparent;
      border: none;
      color: rgb(35, 145, 255);;

      &.select {
        background: rgb(35, 145, 255);;
        color: #fff;
      }
    }
  }
}

#weatherLineChart {
  width: 100%;
  height: 185px;
  flex-grow: 1;
  overflow-x: auto;
  position: relative;

  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  .weather24IconBox, {
    width: 1100px;
    height: calc(100% - 121px);
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    margin-top: 10px;
    user-select: none;

    .iconItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;

      .iconImg {
        width: 25px;
        height: 25px;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .iconCon {
        color: #ffffffde;
        font-size: 14px;
      }

      .state {
        width: 35px;
        margin-top: 2px;
        color: #ffff00;
        text-align: center;
        font-size: 12px;
        border: 1px solid #ffff00;
        border-radius: 5px;
        background: rgba(255, 255, 0, 0.2);
      }
    }
  }

  .weather15DayBox {
    display: flex;
    justify-content: space-between;
    width: 900px;
    height: 64px;
    padding-left: 2px;
    padding-right: 7px;
    margin-top: 10px;
    cursor: move;
    box-sizing: border-box;
    user-select: none;

    .iconItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;

      .iconWeek {
        font-size: 14px;
        color: #ffffffe6;
      }

      .iconDate {
        font-size: 12px;
        color: #ffffff87;
      }

      .iconImg {
        width: 20px;
        height: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .iconCon {
        color: #ffffffde;
        font-size: 12px;
      }
    }
  }

  .weather15NightBox {
    width: 900px;
    height: calc(100% - 65px - 64px);
    display: flex;
    justify-content: space-between;
    cursor: move;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 18px;
    user-select: none;

    .iconItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;

      .iconImg {
        width: 20px;
        height: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .iconCon {
        color: #ffffffde;
        font-size: 12px;
      }
    }
  }
}
</style>

图标文件

视频效果

天气

墨迹天气api接口_微信小程序开发实战-天气小程序
weixin_39996798的博客
11-23 5557
最近周末做了个天气预报小程序，在这里整理一下开发过程和注意点，给对小程序开发感兴趣的伙伴们提供点参考。废话不多说，先上图最终效果：下面进入正文：第一步 准备0. 把微信小程序开发文档过一遍。https://developers.weixin.qq.com/miniprogram/dev/framework/ 作为程序员，就要从0开始计数。1. 下载安装微信开发者工具(https://develop...
天气预报接口API
12-01
给出了一些接口 可以利用这些接口获取相关城市的天气信息 非常有用
调用天气预报的API文档
05-21
气象数据集市市中国天气网面向气象数据使用者和开发，通过web方式提供各类数据服务的接口平台，用户通过申请获取用户密钥信息选择个性化产品，利用身份信息获数据。
国内免费的天气预报 API 汇总
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-16 4660
在公开可用的天气 API 里，已经能够满足“只用中国城市名称即可查询”这一需求的免费方案不少：既有专注中国本土数据的服务，也有国际平台在中国城市上的免费额度。下面依照“无门槛可注册”“免费配额或完全开放”“支持直接传入城市名称（或可一步转换）”三项标准，归纳十个常用接口，并给出要点速览与示例调用链接，方便直接落地。
墨迹天气api接口_微信天气预报小程序实战开发视频教程
weixin_39998273的博客
12-05 1469
此教程属于开发实战系列视频教程，基于之前发布的 「60 集微信小程序开发视频教程」，更新的第二阶段视频课程。此系列课程将直接进入实战开发部分。001 - 课程简介与前置准备https://www.zhihu.com/video/1173615072856465408002 - 项目的初始化https://www.zhihu.com/video/1173980826466402304003 - 获取...
墨迹天气调用------要把我气炸了
SKL4399的博客
12-31 972
我一直找我自己的问题，想着是不是token没配好，或者appKey什么的问题……一直没怀疑是阿里提供的东西会有问题，响应式一直是timeOut。万万没想到是示例代码里面提供的httpUtils工具类有问题。公司要调用一个天气的接口，最终选用阿里封装下的墨迹的API。然后在这个事例的基础上改了一个我的接口。下面是改过之后的代码，有需要的自取！
天气预报、天气查询API接口文档 | 实时天气 | 七日天气 | 15日天气查询
小for学习栏
05-07 1575
这篇文章详细介绍了一种天气查询服务，提供了实时天气(1天)、7天预报和15天预报三个RESTful接口，支持通过地区名称、编码、IP或经纬度等多种方式查询，返回数据包含温度、湿度、风力等实时气象数据，以及生活指数、3小时预报等丰富信息，每个查询请求仅收费0.01元（做好缓存成本极低），接口稳定持久，适用于各类需要天气数据的应用场景。
云场景实践研究第85期：墨迹天气
weixin_34032792的博客
02-09 507
更多云场景实践研究案例，点击这里：【云场景实践研究合集】联合不是简单的加法，而是无限的生态，谁会是下一个独角兽 墨迹运营团队每天最关心的是用户正在如何使用墨迹，在他们操作中透露了哪些个性化需求。这些数据全部存储在墨迹的API日志中，对这些数据分析，就变成了运营团队每天的最重要的工作。墨迹天气的API每天产生的日志量大约在2TB左右，主要的日志分析场景是...
5分钟体验墨迹天气API设计与调试，来看看你关心的城市天气吧~
hwxiaozhi的博客
07-13 2624
2、若未登录华为云账号，请先登录，页面“创建项目”按钮可点击，表示账号已完成实名认证，可正常使用。点击保存按钮，可在左侧目录树中找到刚才创建的接口，并且页面在文档栏可看到保存的接口详细信息。2、页面弹出创建项目弹窗，输入“项目名称”和“项目描述”之后，点击确定按钮，进入快捷调试。，环境名称以“moji”为例，环境描述以“测试环境”为例，点击“确定”；3、新建环境变量：点击新建的环境“moji”，点击“新建变量”，1、点击页面右上角默认环境右侧图标，弹出“环境参数”弹窗。1、点击页面“创建项目”按钮。
墨迹天气接口文档
12-19
项目中需要用到天气预报功能的，可以看看，里面返回的数据也比较多比较准确
天气预报API接口整理
热门推荐
HelloKandy's Blog
04-08 1万+
一、中央气象台API接口： 1. XML接口 http://flash.weather.com.cn/wmaps/xml/china.xml 这个是全国天气的根节点，列出所有的省，其中的pyName字段是各个省XML的文件名，比如北京的是beijing，那就意味着北京的XML地址为 http://flash.weather.com.cn/wmaps/xml/beijing.xml 一个省
百度API天气预报
01-07
用百度API开发的天气预报
墨迹api实现天气预测-天气预报图标包
06-28
这个"墨迹api实现天气预测-天气预报图标包"很可能是包含了一系列用于展示天气预报的图标，以及如何利用墨迹天气API进行天气数据获取和处理的示例或模板。 首先，我们来了解一下墨迹天气API的基础知识。墨迹天气提供...
利用墨迹API实现天气预测图标包开发
资源摘要信息:"墨迹api实现天气预测-天气预报图标包" 墨迹天气是一款流行的应用程序，提供了精准的天气预报服务。API（应用程序编程接口）是一种编程语言和软件库的接口，可以让开发者构建软件应用程序。在本资源中...
实时监控系统构建指南：利用墨迹天气API实现快速部署
本文首先对实时监控系统进行了全面概述，然后深入解析了墨迹天气API的细节和使用方法，特别是在数据采集和解析技术方面。接着，本文详细讨论了监控系统的架构设计、功能实现以及高级功能拓展，包括多数据源的整合、...
历史天气预报API：回顾与分析天气数据的工具
海碗吃饭的博客
04-23 1298
历史天气预报API是一种提供过去天气数据的接口服务，它允许用户访问和分析特定时间点和地点的历史天气信息。这种服务对于气象研究、环境监测、农业规划以及历史气候研究等领域具有重要价值。本文将探讨历史天气预报API的概念、应用场景、技术实现。
天气API强势对接
我是香菜
08-03 3453
整个实现过程还是花了不少时间，也学会了使用jsoup，这个包还是挺好用的。这里的接口也只选用了自己需要的一部分，后续可以根据不同项目要求，获取不同的天气。
【免费好用有关天气的API】
qq_45961314的博客
09-29 1757
【免费好用有关天气的API】
天气预报API
qq_44264058的博客
03-24 1532
1.前言 最近对一些人工智能api挺感兴趣的，无意间看到了一个天气预报api，但是每天只能调用100次，总感觉有点不舒服，于是自己写了个获取天气的程序，可以作为包导入主程序运行。 2.使用方法 2.1 使用 1.复制下面代码到python文件中，创建__init__.py文件将此文件作为包，在主程序中导入该包。 2.实例化Weather对象，调用get_weather()方法，返回一个dict对象 weather = Weather() result = weather.get_weather('武汉')
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳晓黑胡椒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值