一个小小的政法WebGIS系统

GISerLxChen

已于 2024-04-17 00:23:32 修改

阅读量598

点赞数 7

分类专栏： WebGIS 文章标签： arcgis html5 css3 javascript

于 2024-04-15 23:20:20 首次发布

本文链接：https://blog.csdn.net/qq_68882436/article/details/137799077

版权

WebGIS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、开发环境

1. 操作系统：Windows 11 Professional
2. 开发语言： HTML5、CSS3、JavaScript
3. 框架：ArcGIS API for JavaScript、Dojo
4. 开发软件：WebStorm 2023.1
5. 地图数据编辑软件：ArcGIS ArcMap 10.2
6. 地图数据服务：ArcGIS Server 10.2
7. 图像数据编辑软件：Adobe Photoshop 2020
8. 表格数据处理软件：Microsoft Excel 2021

二、地图数据

1. 中国地级市数据：China_Cities.shp
2. 中国省份数据：省_1.shp
3. 世界地图与3D地球：ArcGIS API for JavaScript原生地图，
4. 现有的中国数据：
（1）省份：boundary.shp
（2）铁路：line.shp
（3）主要城市数据：point.shp

三、系统总体设计

（一）项目目录

（1）总目录CMap，其下有目录Account、icons、imgs、OtherPages、Source，有文件LoginPage.html。

（2）Account目录下有：CMap 2D Map.html与CMap 3D Map.html。

（3）CSS目录：里面包含定义好的CSS文件，如reset_gis.css等。

（4）icons目录有：Google.png、QQ.png、WeChat.png、叉叉.svg、地球.svg，均是小图片图标文件。

（5）imgs目录下有：星空夜景4k桌面壁纸.jpg、阿尔卑斯山风景4k高清壁纸.jpg，均是壁纸图片文件。

（6）JS目录下面分别是Cesium的JS包和Vue的JS包。

（7）OtherPages目录下有：Feedback.html，Registration.html文件。

（8）Source目录下有：中华人民共和国刑事诉讼法(2018.10.26施行) .pdf、中华人民共和国刑法（2020.12.26施行) .pdf、中华人民共和国民事诉讼法（2022.1.1施行) .pdf、中华人民共和国民法典(2021.1.1施行)及其解释.pdf四个法律相关的pdf文件。

（二）页面功能及联系

（1）LoginPage.html文件
此文件为登录页面，用户在此输入账户密码进行登录，登录后跳转CMap 2D Map.html文件页面。同时也可以点击注册，此时会跳转Registration.html文件页面，用户在此进行账户注册功能。

（2）Registration.html文件
此文件为注册页面，用户在此进行账户注册功能。注册成功后，可以返回登录（此时会跳转LoginPage.html文件页面）。

（3）CMap 2D Map.html文件
此文件为用户主要地图页面，在这里用户实现主要的地图功能。比如地图的按值渲染，地级市数据统计、图层列表和查询列表等功能。同时也可以选择政法服务，跳转地方官方法院或是下载相关的法律法典。可以选择其它地图数据（次要功能，主要是课堂上的数据和原生3D地球和世界地图数据）。可以点击反馈跳转反馈页面（Feedback.html）进行反馈信息提交。

（4）CMap 3D Map.html文件
此文件为3D地球页面，为其它地图数据的一部分，目前分出来作为单独的页面。后续网站的升级维护可以将此原生数据纳入CMap 2D Map.html页面中。

（5）Feedback.html文件
此文件为反馈页面，收集用户的反馈信息，以便后续的升级维护与bug修复。

四、实施

1. 地图数据的获取
源自网络资源，2019年中国地级市行政边界的shp地图数据，2019年中国省界行政边界的shp地图数据。另外是课堂上省界地图数据。其它的是ArcGIS API for JavaScirpt的原生地图数据。

2. 地图数据的编辑
2019年中国地级市行政边界的shp地图数据没有GDP、人均GDP与房价收入比数据。从国家统计局的统计年鉴网站获取，或者第三方权威的数据平台获取，生成两个Excel文件，GDP数据为CitiesGDP，房价收入比数据为CitiesHPS，并将两个表格全部转化为xls后缀格式文件（xlsx文件格式可能不兼容）。连接的字段为“Cities”。

右击2019年中国地级市行政边界的shp地图数据，选择【Joins and Relates】，按图层“市”字段与表“Cities”字段连接。连接后再右击图层通过【Export Data..】导出shp图层数据“China_Cities”。

3. 网络数据服务发布
通过【Share As】|【Service..】发布地图服务。将省_1.shp数据与导出的China_Cities.shp数据。登录ArcGIS Server Manager找到数据的Url。

4. 其它数据的获取
两个壁纸文件“星空夜景4k桌面壁纸.jpg”、“阿尔卑斯山风景4k高清壁纸.jpg”，通过壁纸网站获取，保存在CMap | imgs目录下。在阿里巴巴矢量图标库获取Google. svg、QQ. svg、WeChat. svg、叉叉.svg、地球.svg图标数据，因为Google. svg、QQ. svg、WeChat. svg背景不是白色，通过Adobe Photoshop 2020编辑填充底色为白色，输出保存为Google. png、QQ. png、WeChat.png，将叉叉.svg、地球.svg、Google. png、QQ.png、WeChat. png保存在CMap | icons目录下，在国家法律法规数据库网站获取相关法律法典，重命名后保存在CMap | Source目录下。