GIS跟踪监管系统信息查询

GIS跟踪监管系统信息查询

    • GIS跟踪监管系统
    • (1)物资查询与展示。
    • ① 几何查询。
    • 代码说明:
    • ② 物资定位。
    • • 单个物资定位:
    • • 多个物资定位:
    • ③ 物资统计。
    • (2)物资信息更新
    • ① 新增物资。

GIS跟踪监管系统

(1)物资查询与展示。

① 几何查询。

• 单击查询:单击单元几何对象,搜索物资单元内存储的物资并展示。
• 拉框查询:在地图上绘制矩形,查询矩形范围内的物资并展示。
• 画圆查询:在地图上绘制圆形,查询圆形范围内的物资并展示。
• 多边形查询:在地图上绘制多边形,查询多边形范围内的物资并展示。
拉框查询、画圆查询、多边形查询通过在地图上绘制矢量几何对象,查询数据库中物资的位置数据,筛选在矢量几何对象内部的物资,显示查询到的物资信息,代码如下:在这里插入图片描述

代码说明:

第一步,通过GetMaterialsPosition接口查询所有物资位置信息;第二步,使用isPointInCircle()函数判断点与圆形的关系,或者使用turf.booleanPointInPolygon()函数(turf是开源空间分析库,其下载地址为https://github.com/Turfjs/turf)判断点与多边形的关系,筛选圆形和多边形内部的物资ID,将符合要求的物资展示在表格中。

② 物资定位。

• 单个物资定位:

在本系统的搜索框中选择单个物资选项,在搜索框输入物资的名称,发送Ajax请求到后台服务,在数据库中查询该物资最新时间的位置信息,客户端地图上加载该物资。

• 多个物资定位:

在本系统的搜索框中选择多个物资选项,在搜索框输入物资的名称,发送Ajax请求到后台服务,在数据库中查询与输入名称匹配的所有物资位置信息,客户端地图上加载该物资。
物资查询通过Search接口实现,后台服务根据参数判断,single-material表示单个物资定位,multiple-material表示多个物资定位。

程序代码为单个物资、多个物资定位代码,其中关键部分的代码如下:在这里插入图片描述
代码说明:materPosFeatureLayer为矢量要素图层组,在图层组中添加Marker标注。Marker注册以下事件:bindTooltip绑定鼠标指针悬浮提示信息;注册click事件,当单击Marker时,以Marker为中心地图缩放至16层级;注册mouseover事件,当鼠标指针悬浮在Marker上时,物资标注高亮显示;注册mouseout事件,当鼠标指针从Marker上移除时,取消物资标注高亮显示。

③ 物资统计。

物资统计是汇总所有仓库中的物资数据以图表的形式展示,实现效果如图7-20
所示,便于直观地了解物资在每一个仓库的存储状况。本系统的物资统计实现代码如下。在工具栏的“仓库”下拉列表中选择“统计信息”选项,激活物资统计功能,在系统界面弹出“统计信息”对话框,显示所有仓库的物资统计信息。在“统计信息”对话框右上角可以根据物资类型、名称、用途、等级等选项进行统计,选择不同的选项会有不同的统计结果在这里插入图片描述
代码说明:ECharts(下载地址为https://github.com/apache/incubator-echarts)是一个使用JavaScript实现的开源可视化库,它提供直观、交互丰富、可高度个性化定制的数据可视化图表,本系统的统计图使用ECharts库实现物资统计图表。在代码中,使用ID为ware-echarts的div作为ECharts图表的容器,通过echarts.init()函数初始化一个ECharts图表,使用myChart.setOption(option, true)函数将图表数据option填充到已初始的myChart图表中。使用GetMaterialsEcharts()函数后台接口获取仓库中物资的统计数据,type参数表示统计类型,使用materialsEchartsOptions()函数将物资的统计数据拼接为ECharts图表需要的option。图7-20
所示的“统计信息”对话框右上角的下拉列表框注册了change事件,当下拉列表框改变时,发送Ajax请求重新获取统计数据,执行myChart.setOption(option, true)函数重绘统计图表。

(2)物资信息更新

。本系统的每一个仓库都可以存储大量的物资,物资的数量是动态变化的,仓库负责人需要对物资在仓库中的变化进行实时操作,合理更新仓库中的物资信息。单击仓库中的单元,可以查看单元存储的物资信息,通过“物资信息”对话框,可以实现物资在该单元中的新增、修改、删除等操作。

“物资信息”对话框使用bootstrap模态框显示,表格使用bootstrap-table实现,当模态框显示时调用TableInit()函数,通过GetMaterialsInfo接口请求物资数据并显示在模态框的表格中,代码如下:
在这里插入图片描述
代码说明:通过GetMaterialsInfo接口请求物资数据,请求的参数在oTableInit.queryParams()函数中进行处理,pageSize表示每页需要多少条数据,pageNo表示请求哪一页,keyword用于模糊搜索指定物资,warehouseid表示仓库ID,unitid表示单元ID,materialsId表示物资ID。后台服务根据GetMaterialsInfo接口实现物资分页查询,将物资数据返回前端,使用oTableInit.responseHandler()函数在表格中显示物资数据。

① 新增物资。

单击“物资信息”对话框中的“新增”按钮,弹出“添加物资”对话框,如图7-22所示,添加物资的form表单参数有物资类型、名称、用途、等级等信息。表单填写完成后单击“确认”按钮,通过Ajax请求将物资数据发送至后台服务处理,AddMaterials接口执行SQL语句在数据库中新增一条物资记录,添加成功后刷新物资信息的表格,显示最新物资数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/81142.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Tensorflow 2.12 电影推荐项目搭建】

Tensorflow 2.12 电影推荐项目搭建 学习笔记工具、环境创建项目项目配置安装相关python包召回模型实现排序模型实现实现电影推荐导入模块设置要推荐的用户召回推荐排序推荐推荐结果结尾学习笔记 Tensorflow 2.12 电影推荐项目搭建记录~ Tensorflow是谷歌开源的机器学习框架,可…

Kotlin File useLines nameWithoutExtension extension

Kotlin File useLines nameWithoutExtension extension import java.io.Filefun main(args: Array<String>) {val filePath "myfile.txt"val file File(filePath)println(file.name) //文件名字&#xff0c;不包括路径println(file.isFile) //是文件吗pri…

【深度学习】 Python 和 NumPy 系列教程(十五):Matplotlib详解:2、3d绘图类型(1):线框图(Wireframe Plot)

目录 一、前言 二、实验环境 三、Matplotlib详解 1、2d绘图类型 2、3d绘图类型 0. 设置中文字体 1. 线框图&#xff08;Wireframe Plot&#xff09; 一、前言 Python是一种高级编程语言&#xff0c;由Guido van Rossum于1991年创建。它以简洁、易读的语法而闻名&#xff0…

web安全漏洞-SQL注入实验2

实验目的 学习sql显注的漏洞判断原理掌握sqlmap工具的使用分析SQL注入漏洞的成因 实验工具 sqlmapsqlmap是用python写的开源的测试框架&#xff0c;支持MySQL&#xff0c;Oracle&#xff0c;PostgreSQL&#xff0c;Microsoft SQL Server&#xff0c;Microsoft Access&#x…

通过这些API,开发者可以在自己的应用程序中嵌入电商功能,为用户提供便捷的购物体验

在当今的数字化时代&#xff0c;电子商务已经成为人们日常生活的重要组成部分。随着电子商务的飞速发展&#xff0c;许多电商平台都提供了API&#xff08;应用程序接口&#xff09;来允许开发者调用特定的功能&#xff0c;如商品查询、购物车管理、订单处理以及支付等。通过这些…

element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮

前言 tree树结构是在开发中经常使用的组件&#xff0c;比如区域树&#xff0c;楼层树&#xff0c;组织架构树&#xff0c;等等包含节点关系 实际开发可能需要我们一进到页面选中树形结构第一个节点&#xff0c;并且调用数据&#xff0c;来达到用户体验 在用户选择之后&#x…

【Axure原型素材】扫一扫

今天和粉丝们免费分享扫一扫的原型素材&#xff0c;"扫一扫"是一项常见的移动应用功能&#xff0c;通常通过手机或平板电脑上的摄像头来扫描二维码或条形码以实现各种功能。下面是和大家分享扫一扫的常用素材~~~ 【原型效果】 【Axure原型素材】扫一扫 【原型预览】…

性能测试-性能测试类型(2)

基准测试 基准测试(Benchmark Testing)又称单用户测试,主要用于监测被测系统在较低压力下的运行状况并记录相关数据。当性能测试环境确定以后,通常选取业务模型中的重要业务做基准测试,对被测系统施加一定压力,从而获取被测系统在单用户运行情况下的各项性能指标,为多用户…

CPP-Templates-2nd--第二十章 基 于 类 型 属 性 的 重 载(Overloading on Type Properties)

目录 20.1 算法特化 20.2 标记派发&#xff08;Tag Dispatching&#xff09; 20.3 Enable/Disable 函数模板 20.3.1 提供多种特化版本 20.3.2 EnableIf 所之何处&#xff08;where does the EnableIf Go&#xff09;? 20.3.3 编译期 if 20.3.4 Concepts C20 20.4 类的…

档案管理系统设计与实现

摘 要 近年来&#xff0c;随着企业彼此间的竞争日趋激烈&#xff0c;信息技术在企业的发展中占据着越来越重要的地位。在企业的运输生产中&#xff0c;档案已成为企业运输经营中不可或缺的一部分&#xff0c;为管理者进行管理决策和进行各种经营活动提供了重要的依据&#xf…

程序地址空间

✅<1>主页&#xff1a;&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;Linux——程序地址空间 ☂️<3>开发环境&#xff1a;Centos7 &#x1f4ac;<4>前言&#xff1a;我们一直随口就能说出来的栈区&#xff0c;堆区&#xff0c;常量…

2023-简单点-树莓派安装ncnn框架

not python 按照下面的步骤进行就可以了&#xff1a; 参考 tips: 其中有一步要用下面方法: 如果你的git clone不得行&#xff0c;可以按照以下操作方法&#xff1a; git clone --depth1 https://ghproxy.com/ https://github.com/Tencent/ncnn.git python 直接 pip install …

如何构建 Protocol Buffers(protobuf)并解决常见问题

简介 Protocol Buffers&#xff0c;通常称为protobuf&#xff0c;是一种用于序列化结构化数据的开源工具。它广泛用于数据交换&#xff0c;通常用于RPC&#xff08;远程过程调用&#xff09;和持久化数据存储。在本文中&#xff0c;我们将介绍如何构建protobuf&#xff0c;并解…

基于Java的大学生选修选课系统设计与实现(亮点:多角色、贴近现实的选课流程、好看的系统外观)

大学生选修选课系统 一、前言二、我的优势2.1 自己的网站2.2 自己的小程序&#xff08;小蔡coding&#xff09;2.3 有保障的售后2.4 福利 三、开发环境与技术3.1 MySQL数据库3.2 Vue前端技术3.3 Spring Boot框架3.4 微信小程序 四、功能设计4.1 主要功能描述 五、系统实现5.1 管…

【基础篇】ClickHouse 表引擎详解

文章目录 0. 引言1. 什么是表引擎2. 不同表引擎使用场景1. MergeTree:2. Log:3. Memory:4. Distributed:5. Kafka:6. MaterializedView:7. File和URL: 3. MergeTree 家族3.1. MergeTree:3.2. ReplacingMergeTree:3.3. SummingMergeTree:3.4. AggregatingMergeTree:3.5. Collaps…

理解HTTPS/TLS/SSL(二)可视化TLS握手过程并解密加密数据

文章目录 WireShark抓包TLS握手过程Client HelloServer HelloEncryped Extenstions, Certificate, Certificate VerifyChange Ciper Spec, FinshedTLS 1.2和TLS 1.3的区别能不能在进一步&#xff1f; 解密WireShark中抓到的TLS包参考资料 上一篇文章已经在本地使用了生成自签名…

[npm] npx 介绍与使用说明

[npm] npx 介绍与使用说明 npm 的由来npx 是什么&#xff1f;npx 特点npx 的特点项目安装包的使用全局安装包的避免指定工具包版本--no-install 参数和--ignore-existing 参数使用不同版本的 node-p 参数-c 参数实战应用 执行 GitHub 源码 npm 的由来 说到 npm 就离不开社区文…

【Linux操作系统】信号的产生捕获

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ Linux       &#x1f6f0;️社区 :✈️ 进步学堂       &#x1f6f0…

css经典面试题(二)

文章目录 1、清除浮动2、opacity: 0、visibility: hidden、display: none 的区别3、css画一个三角形4、常见的主流浏览器前缀5、重绘与重排的区别&#xff1f;6、如何优化图片7、CSS3 中 transition 和 animation 的属性分别有哪些8、居中为什么要使用 transform&#xff08;为…

The driver has not received any packets from the server

在测试数据迁移时遇到的错误。 目录 一、错误 二、解决 三、数据迁移测试 3.1 环境 3.2 源码及测试 3.2.1 源码 3.2.2 测试结果&#xff08;太慢&#xff09; 3.2.3 源码修改 3.2.4 异常及解决 一、错误 The driver has not received any packets from the server. 二…