首页 > 其他分享 >Gitee开源WebGIS项目-openlayers广西水利信息在线分析服务系统

Gitee开源WebGIS项目-openlayers广西水利信息在线分析服务系统

时间:2024-09-11 10:24:05浏览次数:12  
标签:popup 代码 WebGIS 信息 Gitee 点击 openlayers https 台风

介绍

Openlayers项目,广西水利信息在线分析服务系统。模拟广西壮族自治区的水利信息相关数据,结合GIS应用,通过地图标注、 图表与动态推演等方式,直观模拟展现广西壮族自治区当前的水情、雨情状况,以及台风情况。

本仓库代码为后端代码,所用数据都是模拟的。

前端代码网址:https://github.com/Shunrai1/waterConservancy.git

软件架构

前端:vue3+ts+openlayers+elementplus 后端:springboot3+mysql

安装教程

  1. 下载后端代码,找到resources/sql目录下的water.sql文件,导入mysql数据库,修改application.yml配置文件数据库配置信息。启动运行项目

  2. 下载前端代码,执行代码安装包,运行程序

    pnpm i
    pnpm run dev

使用说明

后端API解释说明:启动程序后,输入网址:localhost:8081/doc.html。可以看到接口文档。

前端界面:

1.  基本使用:

切换底图,地图缩放,地图平移到广西省,动态图例


2.  实时水情:

可查询水库、河流两类水情信息。点击表格行可以缩放到具体位置信息,同时打开popup框。可按河流名或者水库名搜索。水库有聚合要素。点击要素点弹出popup。

3. 实时雨情:

雨量分级可视化,根据勾选不同等级雨量范围筛选数据。点击表格行可以缩放到具体位置信息,同时打开popup框。统计各市最大雨量,和量级统计功能。点击要素点弹出popup。

4. 台风路径:

勾选台风数据,绘制台风实际路径和预测路径。点击台风路径表格行可以缩放到具体位置信息,同时打开popup框。绘制风圈,点击播放按钮动态播放台风。点击台风点要素弹出popup。

5. 卫星云图: 

项目地址:https://gitee.com/shunrai/waterconservancy

作者:shunrai

免费下载地址:https://download.csdn.net/download/2301_78220461/89736788

标签:popup,代码,WebGIS,信息,Gitee,点击,openlayers,https,台风
From: https://blog.csdn.net/2301_78220461/article/details/142102878

相关文章

  • WebGIS面试题:GIS篇(六)
    本系列内容主要介绍webgis开发过程中可能会遇到的常见面试题和答案,从前端到二维到三维,干货满满。记得关注我不走丢!需要更多面试题、视频讲解、webgis教程的宝子戳↓↓↓免费领取2024最新webgis学习教程 前几期内容点击下方链接:WebGIS开发面试题:前端篇(一)WebGIS开发面试题:......
  • gitee(码云)使用教程
    1.下载gitee(码云),可以用迅雷;下载好后注册账号并登录2.配置公钥ssh-keygen-ted25519-C"GiteeSSHKey"输入这行命令,按3次回车,演示如下:生成的公钥就在红框文件夹下复制该字符串,进入gitee的设置中,找到公钥粘贴该字符串配置完后可用该命令测试[email protected]......
  • 零基础上手WebGIS+智慧校园实例(长期更新#2)【html by js】
    请点个赞+收藏+关注支持一下博主喵!!!等下再更新一下1.WebGIS矢量图形的绘制(超级详细!!),2.WebGIS计算距离,以及智慧校园实例with3个例子!!!!,尽情期待!!!之后代码+资料全部发到github里,希望大家能关注一下咱的Github进行WebGIS开发时,引入API是一个关键步骤,它允许开发者将地图服务和功......
  • gitee创建仓库如何提交代码
    在gitee上创建了仓库之后如何将项目与仓库关联起来,提交代码?1、如何创建仓库登录gitee,在导航栏找到新建仓库然后是设置仓库,填入名称以及自定义路径,点击创建注:如果选择了初始化仓库,仓库创建之后直接就是第一次提交了,会看不到仓库给你的参考命令,不会关联仓库的小白可以不用管,直......
  • git上传本地文件到码云gitee
    1在码云上创建项目在码云首页顶部,下图所示,右上角头像旁边的加号,鼠标移上去会显示下拉的,点击“新建项目”。填写好项目的名称、路径等,然后点击“提交”,下图所示。 2 建立本地仓库并初始化在本地电脑的一个盘里面新建一个文件夹,如文件夹名为ecshopadaptio......
  • 【分享】Gitee如何下载单个文件
    文章目录引出问题解决问题结语引出问题不知使用gitee的你,有没有遇到过需要下载某个仓库文件的情况?比如下面这个仓库,是@宏沉一笑大佬转载obsidian的插件的仓库链接点击下载,你会发现gitee开始给你打包整个仓库文件,一个几百m的仓库怎么说也要几分钟才能下完。可是,我只是需要某一个主......
  • 安装包丨WebGIS开发环境搭建及所需工具
    以下工具为GIS开发中所涉及到的工具,当然如果您已经非常精通web前端领域,并有其他习惯的工具也可以忽略~1.开发工具:Node安装Node.js是一个基于ChromeV8引擎的JavaScript运行环境Node.js使用了一个事件驱动、非阻塞式I/0的模型,使其轻量又高效Node.js的包管理器n......
  • Idea如何提交本地项目到Gitee或Gitlab等远程仓库
    1、确定远程仓库地址 2、确认自己的Git账号密码(提交代码时需要登录)如果是自己的Gitee码云则是自己登录码云的账号密码;如果是公司的GitLab则以公司分给自己的Git账号密码为准。3、确定自己本地安装了Git,然后用Idea创建或者开发好代码4、初始化本地项目的Git(以实际项目位......
  • 大一地信新生,如何从0规划学习WebGIS开发!附通关攻略
    关于学习WebGIS开发,很多GIS专业的学生,从大一开始苦恼从哪里入手?内容太多,不知道什么是重点?不了解企业实际应用情况,怕所学非所用。关于这一点,小编通过本文详细介绍一下!WebGIS(网络地理信息系统)是指工作在Web网上的GIS,是传统的GIS在网络上的延伸和发展,具有传统GIS的特点,可以实现......
  • 腾讯云服务器上线一个springboot+vue项目最全教程 非Docker 自带上传到gitee中的项目
    前言博主看网络上的各种介绍项目上线的视频/文章,要么不是真实项目上线,要么没有良好的引导,要么不全。因此就写了此博客。此博客应该是最全的了,全面地以一个项目来介绍如何上线。即使你是小白看完博客也能让你成为糕手糕手糕糕手......