基于GIS的威海市道路设施数据普查系统设计与开发

[24]。系统开发出来后供单位使用，对于系统平时的维护和更新升级等操作，单位也需要支付相应费用，这些费用除去系统开发的成本，剩下的就是收益。可以与多家单位或公司合作，拓展业务，增加总体收益。3城市道路普查系统详细设计3.1系统环境与总体架构3.1.1开发环境硬件环境：计算机设备，内存RAM8.00GB，系统类型64位操作系统，基于x64的处理器，处理器Intel(R)Core(TM)i5-10200HCPU@2.40GHz2.40GHz。软件环境：Node.js，PostgreSQL，PostGIS操作系统：Windows113.1.2总体架构系统使用VSCode进行开发，采用了前后端分离的开发模式，前端使用Vue.js框架，后端使用Node.js和Express框架，数据库采用PostgreSQL，并使用Sequelize作为ORM工具，系统主要包括路网查询、用户管理、项目管理、路径规划等模块；功能齐全，操作简便，能够满足管理员和普通用户的需求。3.2前端开发前端开发是指构建网站或Web应用程序的过程中，负责设计和开发用户可以直接与之交互的界面部分的工作。前端开发涉及使用HTML、CSS和JavaScript等技术来创建网页的结构、样式和交互功能，以确保用户能够在浏览器中良好地浏览和操作网站。前端开发人员通常负责实现网站的用户界面设计，以提供用户友好的体验。3.2.1用户登录通过使用Vue3的CompositionAPI编写，包括ref和reactive等函数。定义了LoginInfo接口来描述登录信息的结构，包括用户名和密码。使用ElementPlus库的ElForm、ElInput等组件来构建表单，实现表单验证和提交功能。设置了用户名和密码的默认值为“admin”。定义了表单验证规则，要求用户名和密码不能为空。实现了提交表单的方法submitForm，在表单验证通过后向后端发送登录请求，并根据返回结果进行相应的处理。使用ElementPlus库的ElMessage组件来显示成功或失败的消息提示。页面样式设置了背景图片、标题样式、登录框样式等，实现了简单的视觉效果。可实现用户输入用户名和密码进行登录操作，后端验证后返回登录成功或失败的消息，并根据登录结果进行相应的页面跳转或状态更新，代码设计如图3.1所示。图3.1登录界面代码设计Fig.3.1Logininterfacecodedesign3.2.2用户管理通过接口获取用户列表，并将数据存储在‘users’ref中。点击“新增用户”按钮会弹出一个对话框，用户可以输入名称、用户名、密码和角色来新增用户。用户列表以表格形式展示，包括“名称”、“用户名”、“角色”和“操作”列。角色字段根据用户的角色值显示“管理员”或“普通用户”。点击“删除”按钮会触发删除用户的操作，同时更新用户列表。对话框中有取消和确定按钮，点击确定按钮会触发新增用户操作，将数据提交到后端接口并更新用户列表。代码中使用了‘http’工具来进行接口请求，包括获取用户列表、新增用户和删除用户的操作。通过前端页面与后端接口进行数据交互，实现了用户信息的展示、管理和操作功能。代码界面如图3.2，图3.3所示。图3.2获取与新增用户代码设计Fig.3.2Obtainingandaddingusercodedesign图3.3删除用户代码设计Fig.3.3Removetheusercodedesign3.2.3项目管理项目管理界面设计了两个部分：左侧是一个表单用于新增项目上报，右侧是一个表格展示项目列表，包括项目信息和操作按钮。左侧表单包括输入框和日期选择器，用于用户输入项目信息，还包括图片上传功能。右侧表格展示了项目列表，包括管养单位、路线编号、图像名称、拍摄时间、损坏类型、图片、是否处置、处置备注等字段。每行数据还包括退回处置和删除操作按钮。脚本部分使用了Vue3的CompositionAPI的<scriptsetup>语法。导入了一些需要的库和工具，定义了一些响应式变量和函数，包括userId、excelFile、picFiles、projects、addForm等。整体上，提供了项目的新增上报、批量上传、查看和操作项目列表的功能。代码界面如图3.4，图3.5所示。图3.4项目列表代码设计Fig.3.4Codedesignoftheprojectlist图3.5上传图片代码设计Fig.3.5Uploadtheimagecodedesign3.2.4路径规划（1）页面包含一个地图容器、一个用于触发路径规划的按钮和一个用于显示路径规划结果的信息面板。（2）创建了一个高德地图实例，并设置了初始的缩放级别和中心点坐标。（3）定义了route函数，用于处理路径规划操作。在函数中创建了一个实例用于驾车路径规划，以及两个起点和终点的标记。（4）通过点击地图的方式，用户可以选择起点和终点，并进行路径规划。规划完成后，将路径显示在信息面板中。（5）使用ref创建了响应式数据isShow，用于控制信息面板的显示与隐藏。（6）使用ElButton组件创建了一个按钮，点击按钮会触发路径规划操作。（7）使用ElMessage组件显示提示消息，引导用户进行起点和终点的选择操作。代码界面如图3.6，图3.7所示。图3.6路径规划代码设计Fig.3.6Pathplanningcodedesign图3.7起点终点代码设计Fig.3.7Designofstartingandendingcodes3.3后端开发后端开发是指开发人员负责构建和维护应用程序的后端部分，通常涉及处理数据、逻辑和业务规则。开发人员通过使用各种编程语言和框架来构建服务器端应用程序，处理数据库操作、实现业务逻辑和提供API服务。需要具备扎实的编程技能、对数据库和网络通信有深入了解，并且与前端开发衔接，以确保整个应用程序的正常运行。3.3.1数据库设计数据库E-R关系模型如图3.8所示。在PostgreSQL数据库中创建了两个表：用户表和项目表，基本结构如表3.1，表3.2所示。用户名用户名角色姓名姓名密码ID用户密码ID用户属于属于项目ID拍摄时间项目ID拍摄时间管养单位用户ID管养单位用户ID纬度项目纬度项目地理位置点地理位置点路线编号经度路线编号经度图像名称损坏类型图像名称损坏类型是否处置是否处置图片路径图片路径图3.8E-R关系模型图Fig.3.8E-Rrelationshipmodeldiagram表3.1用户表Tab.3.1Usertable字段名类型描述idInteger用户IDnameString用户名，即管养单位名称roleInteger用户角色，0为管理员，1为普通用户usernameString登录用户名passwordString登录密码表3.2项目表Tab.3.2Listofitems字段名类型描述idInteger项目IDunitString管养单位routeString路线编号imgnameString图像名称longitudeDouble经度latitudeDouble纬度timeDouble拍摄时间damageString损坏类型impathString图片路径isdisposeBoolean是否处置gemoGeometry地理位置点userldInteger用户ID创建了一个Sequelize实例，并连接到名为'road'的PostgreSQL数据库，通过Sequelize.query语句，开启了postgis扩展，以支持地理信息系统功能。定义了两个模型：User和Project，建立了User和Project之间的一对多关系，即一个用户可以有多个项目，但一个项目只属于一个用户。使用sequelize.sync({force:false})同步数据库模型，如果数据库中没有用户，则创建一个具有管理员权限的用户。最后，通过module.exports导出了User、Project和sequelize对象，以便在其他文件中使用这些模型和数据库实例。这段代码的主要目的是创建数据库模型、建立模型之间的关联，并在数据库中初始化一个管理员用户,数据库代码如下：constSequelize=require('sequelize');//创建Sequelize实例constsequelize=newSequelize('road','postgres','123321',{

host:'localhost',port:'5433',

//使用posgres数据库

dialect:'postgres',});//开启postgis扩展sequelize.query('CREATEEXTENSIONIFNOTEXISTSpostgis;');//定义模型用户表：名称，权限，，用户名，密码constUser=sequelize.define('user',{

id:{

type:Sequelize.INTEGER,

primaryKey:true,

autoIncrement:true,

},

name:Sequelize.STRING,

role:Sequelize.INTEGER,//0为管理员，1为普通用户

username:Sequelize.STRING,

password:Sequelize.STRING,});//管养单位

路线编号

图像名称

经度

纬度

拍摄时间

损坏类型

图片路径

是否处置

gemo（点经纬度）用户idconstProject=sequelize.define('project',{

id:{

type:Sequelize.INTEGER,

primaryKey:true,

autoIncrement:true,

},

unit:Sequelize.STRING,

route:Sequelize.STRING,

imgname:Sequelize.STRING,

longitude:Sequelize.DOUBLE,

latitude:Sequelize.DOUBLE,

time:Sequelize.DATE,

damage:Sequelize.STRING,

imgpath:Sequelize.STRING,

isdispose:{

type:Sequelize.BOOLEAN,

defaultValue:false,

},

gemo:Sequelize.GEOMETRY('POINT'),

userId:Sequelize.INTEGER,

disposeNote:{

type:Sequelize.STRING,

defaultValue:'',

allowNull:true

}});//关联User.hasMany(Project);Project.belongsTo(User);//同步数据库sequelize.sync({

force:false}).then(async()=>{

console.log('数据库同步成功');

letu=awaitUser.findAll();

if(u.length==0){

User.create({

name:'admin',

role:0,

username:'admin',

password:'admin',

});

}});module.exports={

User,

Project,

sequelize};3.3.2用户管理用户管理功能包括用户登录、增加用户、删除用户和获取所有用户。用户登录功能通过查询用户表，验证用户名和密码是否匹配，匹配则登录成功，不匹配则登录失败。增加用户功能，通过向用户表插入新记录实现。删除用户功能，通过根据用户id在用户表中删除对应记录实现。获取所有用户功能，通过接收到GET请求‘/user/list’时，从数据库中查询所有用户记录，并将查询结果返回给客户端。如果查询过程中出现错误，也会将错误信息返回给客户端，如图3.9，图3.10所示。图3.9增加用户代码设计Fig.3.9Addusercodedesign图3.10删除与获取用户代码设计Fig.3.10DeletingandRetrievingUserCodeDesign3.3.3项目管理项目管理功能包括增加项目、批量增加项目、删除项目、更新项目处置状态和获取项目列表。增加项目功能通过向项目表插入新记录实现；批量增加项目功能通过向项目表批量插入新记录实现，如图3.11所示。删除项目功能通过根据项目id在项目表中删除对应记录实现,如图3.12所示。更新项目处置状态功能通过更新项目表中的isdispose和disposeNote字段实现；获取项目列表功能通过查询项目表获取所有项目记录，如图3.13所示。图3.11增加项目代码设计Fig.3.11Addprojectcodedesign图3.12删除项目代码设计Fig.3.12Deletetheprojectcodedesign图3.13更新与获取项目代码设计Fig.3.13UpdatingandObtainingProjectCodeDesign3.3.4数据查询数据查询功能包括根据管养单位查询项目和获取所有项目。根据管养单位查询项目通过在项目表中根据unit字段查询对应记录实现。获取所有项目功能通过查询项目表获取所有项目记录，如图3.14所示。图3.14数据查询代码设计Fig.3.14Dataquerycodedesign3.3.5图片上传图片上传功能通过引入Multer模块用于处理文件上传，以及fs和path模块用于文件操作和路径处理。使用Multer中间件创建一个名为upload的实例，指定上传文件的目标目录为‘public/upload/’,当接收到POST请求‘/upload’时，Express会执行这个路由处理函数。在函数内部，通过upload.Single('file')中间件处理单个文件上传，将上传的文件信息存储在refile中。将客户端上传的文件保存到指定目录，并返回上传结果给客户端来实现此功能，如图3.15所示。图3.15图片上传代码设计Fig.3.15Imageuploadcodedesign3.4本章小结本章节介绍了整个系统设计的主体部分，衔接第二章系统分析内容，以其为基础，简述了系统功能和开发设计，并介绍了功能的核心代码，展现了整个系统设计，使人们更加充分了解系统设计过程，在使用之前可作为参考进行阅读，使用后可以作为说明书。4系统界面展示4.1登录界面本系统的登录界面背景设计为威海市道路图片，页面中央为登录框，设置了用户名和密码的必填校验规则，如图4.1所示，输入用户名和密码经过验证之后可以登录转到首页界面。为了方便数据库管理与保障系统安全，本系统定义了两种用户，一种是普通用户，一种是管理员用户，两种用户登录之后的首页略有差别，管理员的界面是整个系统的完全形态，而普通用户去除了部分对数据库的修改操作，保留了相关道路部门需要的查询信息功能。若账号或密码输入错误或者为空，系统会提示用户名或密码错误的弹窗，如图4.2所示。图4.1用户登录界面Fig.4.1Userloginscreen图4.2登录错误提醒页面Fig.4.2Errorpop-uppage4.2路网查询界面用户在登录之后进入首页，可以单击线状要素查看属性信息，并且可在左上角的搜索框搜索想查询的道路，如果输入的查询线路与图层要素相对应则能转跳到目标要素，并使查询到的要素高亮显示；若未查询到则无结果。此外本页面还添加了放大缩小功能，如图4.3，图4.4所示。道路完整属性表中gid:道路序号，full-id:完整ID，osm-id:OpenStreetMap上获取的道路ID，osm-type:数据库中数据类型，operator:运营商，fee:费用，alt-name:备用名称，description:描述，descript_1:第二描述，type:属性类型，to:目的地，route:路线类型，ref:参考号，public-tra:公共交通，network:网络，name:名称，from:起始点，如图4.5所示。图4.3路网查询界面Fig.4.3Roadnetworkqueryinterface图4.4图查属性功能图Fig.4.4Attributefunctiondiagramofgraphsearch图4.5道路属性表Fig.4.5Roadattributetable4.3人员管理界面管理员用户界面可进行人员管理，页面显示包含五个关键列的表格，用户名称、用户名、角色、密码、操作，本页面可对用户进行增加、删除、查找，如图4.6，图4.7所示。人员管理功能在安全性、权限控制、合规性、管理效率和用户体验等方面具有重要作用，有助于管理用户账号、权限和活动，提高系统的安全性和可用性，从而降低风险，保证系统正常运行。图4.6人员管理界面Fig.4.6Personnelmanagementinterface图4.7新增用户窗口Fig.4.7AddingaUserWindow4.4项目上报界面项目上报界面用户可以填写管养单位、路线编号、图像名称、拍摄时间、损坏类型等信息，并上传图片，点击新增按钮后，将新增的项目数据提交到后端，并在成功时显示成功消息，失败时显示错误消息。也可批量上传，用户可以选择Excel文件和图片文件进行批量上传，解析上传的Excel文件数据，将数据转换为项目信息，上传对应的图片文件，并将图片路径关联到对应的项目信息中。将项目数据和图片信息一起提交到后端进行批量添加项目。在页面右侧展示了项目列表，包括管养单位、路线编号、图像名称、拍摄时间、损坏类型、图片、是否处置、处置备注等字段。每行数据包括退回处置和删除操作按钮，用户可以进行操作，如图4.8，图4.9，图4.10所示。图4.8项目上报界面Fig.4.8ProjectReportingPage图4.9新增项目界面Fig.4.9Thenewprojectpageisadded图4.10批量上传文件Fig.4.10Uploadfilesinbatches4.5项目查询界面从数据中读取要素，然后根据是否已处置的属性值来设置不同的样式：如果属性值为“已处置”，图中显示为红色圆形。如果属性值为其他值，则显示为红色五角星状的图标。点击图中标志，可显示项目完整属性信息，左边框展示无人机图像和显示图像相关信息（包括图像名称、拍摄时间、损坏类型、经度和纬度），下边框显示路线编号、管养单位、是否处置、处理时间，如图4.11，4.12所示。图4.11项目查询界面Fig.4.11Projectqueryinterface图4.12项目图查属性功能图Fig.4.12Attributefunctiondiagramofprojectmap4.6路径规划界面该界面可进行最短路径规划，通过点击地图的方式，用户可以任意选择起点和终点，根据用户的选择，结合道路普查系统中的道路网络数据，计算出最短路径，将计算出的最短路径结果以导航方式展示给用户，如图4.13所示。帮助用户快速找到最佳路径、进行路径导航和空间可视化展示，提高了用户的出行效率和体验。点击信息面板中任意一段道路，地图将自动定位到所选道路上，并具有高亮显示，如图4.14所示。图4.13路径规划界面Fig.4.13Pathplanninginterface图4.14高亮道路页面Fig.4.14HighlightRoadspage5调试与结果分析5.1调试与结果本系统在不同模块加载了不同的使用功能，测试过程也应分模块测试，一方面，可以确保每个单独功能模块都能够按照预期运行；另一方面，在开发与维护的过程中，分模块能够单独运行，不被其他模块影响性能，从而使得系统的调试与维护过程简便，易于发现问题和解决问题，可操作性强。现将基于GIS的威海市道路设施数据普查系统的功能进行分模块测试，测试情况如下表所示。表5.1用户登录测试用例表Tab.5.1Userlogintestcasetable测试用例：用户登录测试编号：CS_01测试内容测试操作预期结果测试结果1普通用户登录用户名和密码输入正确，点击登录登录成功，进入普通用户界面同预期2普通用户登录用户名或密码其一输入错误登录失败，提示“用户名或密码错误”同预期3普通用户登录用户名或密码没有输入登录失败，提示“登录错误”同预期4管理员登录用户名和密码输入正确，点击登录登录成功，进入管理员界面同预期5管理员登录用户名或密码其一输入错误登录失败，提示“用户名或密码错误”同预期6管理员登录用户名或密码没有输入登录失败，提示“登录错误”同预期表5.2首页显示测试用例表Tab.5.2Thehomepagedisplaysthetestcasetable测试用例：首页显示测试编号：CS_02测试内容测试操作预期结果测试结果1普通用户首页普通用户账号进入系统普通用户首页正常显示同预期2管理员首页管理员账号进入系统管理员首页正常显示同预期表5.3路网查询界面测试用例表Tab.5.3Testcasesoftheroadnetworkqueryinterface测试用例：路网查询界面功能测试编号：CS_03测试内容测试操作预期结果测试结果1点击页面转入点击“路网查询”按钮进入路网查询界面同预期2地图缩放功能滑动鼠标滚轮或点击缩放按钮地图正常缩放同预期3图查属性功能点击道路要素显示所选择要素的详细信息同预期4属性查图功能在搜索框输入道路名称显示所输入的要素的名称和位置同预期表5.4人员管理界面测试用例表Tab.5.4Testcasesofthepersonnelmanagementinterface测试用例：人员管理界面功能测试编号：CS_04测试内容测试操作预期结果测试结果1点击页面转入点击“人员管理”按钮进入人员管理界面同预期2新增用户按钮点击“新增用户”按钮数据被添加到数据库中，正常显示同预期3删除用户按钮点击“删除”按钮选中的数据从数据库中删除同预期表5.5项目上报界面测试用例表Tab.5.5Testcasesontheprojectreportingpage测试用例：项目上报界面功能测试编号：CS_05测试内容测试操作预期结果测试结果1点击页面转入点击“项目上报”按钮进入项目上报界面同预期2新增上报功能在左侧页面框中输入项目信息，点击新增新增项目跳转至右侧页面框表格中同预期3批量上传功能选择Excel文件和图片，点击上传可批量上传至右侧页面框表格中同预期4删除项目按钮点击“删除”按钮选中的数据从数据库中删除同预期5退回处置按钮点击“退回处置”按钮项目退回到用户页面同预期表5.6项目查询界面测试用例表Tab.5.6Testcasesontheprojectquerypage测试用例：项目查询界面功能测试编号：CS_06测试内容测试操作预期结果测试结果1点击页面转入点击“项目查询”按钮进入项目查询界面同预期2图查属性功能右侧页面框中点击地图上星号或圆圈要素左侧表格显示选择要素的详细信息同预期表5.7路径规划界面测试用例表Tab.5.7Testcasesonthepathplanningpage测试用例：路径规划界面功能测试编号：CS_07测试内容测试操作预期结果测试结果1点击页面转入点击“路径规划”按钮进入路径规划界面同预期2路径规划按钮点击“路径规划”按钮，在地图上任意选择两点自动规划出两点之间最短路径，弹出信息板显示详细路况同预期3定位功能点击信息板中某一路段出现定位路段，在图中高亮显示同预期5.2结果分析与展望对主要模块的功能测试结果显示，基于GIS的威海市道路设施普查系统的功能使用情况良好，登录页面，路网查询界面，项目上报界面和路径规划界面均可正常使用，每个页面的功能也能正常实现，没有突出的错误和问题。随着城市化进程加快，道路建设和管理变得愈发重要，而GIS技术能够提供空间数据的精确管理和分析，为道路规划、维护和应急响应提供支持。以下是该系统的一些展望：（1）.智能化道路管理：基于GIS的道路普查系统未来可以整合实时交通数据、道路状况信息和历史数据，通过智能算法分析道路使用情况和状况，优化道路布局和设计，为道路管理部门提供决策支持。（2）.应急响应支持：可以帮助道路管理部门快速定位道路事故、交通堵塞等问题，提供实时路况信息，指导交通管理和紧急救援。（3）移动端应用：结合移动端技术，基于GIS的道路普查系统可以实现实时数据采集、信息更新和在线查询，方便道路管理人员实时掌握道路状况。（4）数据共享和协同：道路普查系统可以实现数据共享和协同工作，不同部门之间可以共享空间数据，提高工作效率和信息共享度，为城市交通发展和管理提供更加科学、高效的支持。结论系统在基于威海市部分道路信息，对当下道路设施现状和相关实际情况调查学习后，利用JavaScript编程语言，开发了结合Web技术的基于GIS的道路普查系统。基本实现了预期的功能和目标，对道路信息实现了收集、处理、存储和管理的过程，具体实现的功能如下：完成了用户从登录到使用的整个过程，分为管理端和用户端，方便数据库管理与保障系统安全，普通用户去除了部分对数据库的修改操作，保留了相关道路部门需要的查询信息功能，便于问题路况的解决。系统充分利用vue.js框架和node.js平台，方便项目的管理。同时在可视化的基础上，可对道路项目进行增添、删除、查询、修改操作。系统还具备最短路径规划功能，可帮助用户优化路径，节省时间；改善用户体验，增强安全性。总体来说，本系统实现了从数据采集到管理开发的过程，具有操作简单、查询方便，交互性强的优点，对提高城市道路服务水平，降低城市道路交通事故的发生概率，减轻交通事故严重程度，缓解城市交通拥堵有着重要作用。但由于个人技术水平有