|
1.INTRODUCTIONWith the rapid development of the domestic economy and the increasing level of urbanization, a good city appearance environment is not only conducive to building a civilized and liveable city, but also can promote the rapid development of urban economy1. Due to the continuous expansion of urban area and population, many urban appearance and environmental problems will inevitably occur, resulting in increasing pressure on urban management. This city’s appearance and environmental problems will not only affect the beautiful environment of the city and the traffic travel of residents but also may lead to traffic accidents and criminal crimes in serious cases. With the rapid increase of urban appearance and environmental problems, the traditional urban appearance and environmental management methods cannot meet the needs of Urbanization. In view of these problems, this paper designs and implements a city appearance environment management system based on WebGIS by combining Vue, Mybatis, SpringBoot and other open source frameworks. The system has the mechanism of unified access to service spatial data and database business data, and has the function of unified management role authority, data authority and function authority. It can record the user’s operation of using the system and access to service spatial data in the log, and can effectively help urban management personnel improve urban governance efficiency2. 2.SYSTEM DESIGN2.1Related technologyThe system is implemented based on WebGIS, using ArcGIS Server to publish and manage layers, stores spatial data in PostgreSQL database, stores system business data in MySQL database, and realizes unified access to data by configuring multiple data sources at the back end. The front-end map visualization adopts ArcGIS API for JavaScript + Leaflet technology, and combines with Vue.js, Java, Spring, Mybatis, and other open-source frameworks for system architecture and development. 2.2Overall architectureThe system is developed with B/S architecture, and the overall structure of the system is shown in Figure 1.
2.3Module divisionThe system is divided into modules such as city appearance and environmental map browsing, city appearance and environmental data maintenance, city appearance and environmental thematic statistics, city appearance and environmental thematic map production, system management, and system monitoring. The functional structure of each module is shown in Figure 3.
3.TECHNICAL FEATURES3.1Module divisionThis system adopts the MVVM model based on the SpringBoot microservice architecture7. The MVVM model can completely separate the view layer displayed to the user from the business logic layer of the back end8. The front end transmits data to the back end by sending Ajax requests, and the back end responds and returns the corresponding content after receiving the request, as shown in Figure 4. 3.2Leaflet with ArcGIS API for JavaScriptThe map visualization function of this system adopts the technology of Leaflet with ArcGIS API for JavaScript, which is an open-source JavaScript library for Web interactive maps and mobile devices. Because of its lightweight characteristics, it has good compatibility when loading various layers, and the speed of loading map data is very fast. ArcGIS API for JavaScript will correspondingly convert the user’s operation into HTTP request according to the format of the REST API provided by ArcGIS Server9. After receiving the request, ArcGIS Server will call the data for processing, and return the result to ArcGIS API for JavaScript in JSON format. Then ArcGIS API for JavaScript will analyse the result and display it visually through the API, and finally return it to the application program10. The specific operation flow is shown in Figure 5. Although the ArcGIS API for JavaScript provides more comprehensive functions than Leaflet and can publish maps made in ArcMap to ArcGIS Server for calling, its own module is too large, resulting in a slow page loading speed11. ArcGIS API for JavaScript has supported importing modules through Npm since version 4.18, eliminating the operation of local deployment in the previous version to improve the map loading speed. However, the requirements for network speed is still very high. Because of its lightweight characteristics, Leaflet has greatly improved the speed of loading maps compared with ArcGIS API for JavaScript. According to the respective characteristics of these two JS libraries and the overall requirements of the system, they are used in the home page and the city appearance environment thematic map generation module respectively. Since the home page needs to load maps frequently, the Leaflet with afaster loading speed is selected, and the city appearance and environment thematic map generation module needs to call the Changchun administrative division map published in the ArcGIS Server. Therefore, ArcGIS API for JavaScript is used to load the basic base map of the city appearance environment and the administrative division map. 3.3ECharts data visualizationECharts is the most widely used JS charting library in the market12. It relies on the canvas class library zender to realize the visualization of chart data. ECharts can directly use various data formats without conversion, realize the front-end display of tens of millions of data, multi-dimensional data filtering, view scaling and other interactive operations, support multiple rendering methods, and meet the needs of most users. The basic process of making statistical charts using ECharts is shown in Figure 6. 4.SYSTEM FUNCTION REALIZATION4.1Interface designAfter the project is successfully started, you can successfully log in to the system by visiting the corresponding website and entering the correct account number, password and picture verification code, as shown in Figure 7. The interface of the system is mainly divided into three parts, the function bar on the top, the navigation bar area on the left and the main content display area of the page, as shown in Figure 8. 4.2System homeThe content area of the homepage of this system is the road map of Gaode map, and the displayed area is the main urban area of Changchun City. The blue marked points on the map are the coordinate point of the city’s appearance and environmental problem data stored in the database. Click the marked point to see the information data of the point in the pop-up box, as shown in Figure 9. The two controls in the upper left corner of the map are respectively used to control the zoom of the map, drawing points, lines, and faces, and measure distance and range area. The layer control in the upper right corner of the map can control the switching between road map and satellite image. The four buttons below the layer control are used to enlarge the map, reduce the map, restore the map to its original position, and display the administrative division range. 4.3Business data management moduleThe data management module under the maintenance of the city appearance and environmental data in the sidebar is mainly used to store the business data of the system, that is, the city appearance and environmental problem data. In this module, the city appearance and environmental problem data stored in the MySQL database is displayed in the form of a list. At the top of the data list is the search area and the adding, modifying, deleting, and exporting buttons. After selecting the time range, event type and administrative area to be searched. Clicking search, the system will query the data that meets the search criteria and update the data list, as shown in Figure 10. Through the adding button below, you can add new data of urban appearance and environment problems to the database. In the pop-up dialog box, fill in the corresponding contents. The latitude and longitude coordinate data cannot be entered by manually filling in the data. Instead, clicking the “get coordinates” button to obtain the longitude and latitude coordinates from the map, as shown in Figure 11. After clicking the getting coordinates from map button, the system will automatically jump to the home page. You can click the administrative region button in the upper right corner to display the administrative region range on the map, so that you can find the location you want to mark. After you find the location you want to mark by zooming the map, double-click the map to mark on the map. After the mouse double clicks on other positions on the map, the previously marked point will be cancelled and remarked on the new position. After completing the relevant operations, click the return list button below the map to jump back to the data management interface. At the same time, the system will automatically fill in the latitude and longitude coordinates of the just marked points in the corresponding area. After completing the entry of basic information, the data can be added to the data list, after selecting the checkbox in front of the data to be deleted in the data list, click the delete button to quickly delete multiple data; the operation process of the export function is similar to that of delete. If you directly click the export button without selecting data, the system will prompt whether to delete the list Export all the data in the file, or select the data you want to export, click Export, and select the save location of the file to download. There are three options under the operation tab of each data in the data list: edit, delete and location. To click Edit to see all the information about this piece of data onto the pop-up dialog box, and you can modify the data in real time on this interface. If you want to modify the latitude and longitude coordinates, you also need to click to get the coordinates from the map, the system will jump to the home page and locate the view to the location of the point, and double click the position you want to modify to remark it. To click the positioning option, you can see the location of the point in the home page and highlight it, as shown in Figure 12. 4.4Statistical analysis moduleThis module summarizes the data of city appearance and environmental issues. The content area is mainly divided into the query area and the chart area. The chart area is divided into three parts, as shown in Figure 13. The statistical analysis chart of administrative district complaints in the upper left corner is mainly used to count the number of urban appearance and environmental problems in each administrative district. The statistical analysis chart of complaint types in the upper right corner is mainly used to calculate the number of each type of city appearance and environmental problems, which is displayed in the form of a bar chart. The trend graph of the number of city appearances and environmental problems below is used to count the number of city appearances and environmental problems in the past ten months. In the query area above the chart area, select the administrative area and date range, and click search. The system will query the data that meets the requirements, and the chart below will also change according to the data. 4.5Thematic map production and output modelThe content area of this module is the road map of Gaode map and the administrative division map of the main urban area of Changchun City. The road map of Gaode map is loaded through the custom TileLayer provided by ArcGIS API for JavaScript. The administrative division map of the main urban area of Changchun is processed and rendered in ArcMap and imported from the spatial database. After that, it is published as FeatureLayer by ArcGIS Server. The published layer is called in the code and superimposed on the basic base map. To click the generate thematic map button in the lower left corner. In the generate thematic map interface popped up in the upper left corner of the map, select the date and event type, and then click generate thematic map. According to the selected restriction conditions, the system will assign the corresponding value of the corresponding field of the layer in the spatial data base after classification and statistics by administrative region and render it, as shown in Figure 14. To click the print button and the export interface pops up in the upper right corner. After selecting the file format and setting the height and width, enter the file name and click export to print the thematic map, as shown in Figure 15. 5.EPILOGUEIn this paper, a city appearance and environment management system based on WebGIS is implemented by combining various open source frameworks. The system has the advantages of “unified data access, unified authority management, and unified log management”, which provides convenience for data access and acquisition, meets the actual needs of users, and further improves the efficiency of urban management. This paper combines spatial data with business data and designs different functions for each functional department of the Urban Management Bureau. It has practical value in data query, statistical analysis, thematic map production, data visual display and so on. By using this system, the urban management bureau can quickly and accurately grasp the exact location and specific information of the urban appearance and environmental problems, effectively improve the efficiency of the staff, and achieve the effect of improving the level of urban governance. REFERENCESXu, W., Liang, H., Luo, W., et al.,
“Design of Yunnan province soil environment quality monitoring and analysis platform based on WebGIS,”
in IOP Conference Series: Earth and Environmental Science,
12043
(2021). Google Scholar
Kronis, K. and Uhanova, M.,
“Performance comparison of Java EE and ASP.NET core technologies for web API development,”
Applied Computer Systems, 23
(1), 37
–44
(2018). https://doi.org/10.2478/acss-2018-0005 Google Scholar
Vu, H. L. and Ng, K. T. W.,
“Bolingbroke D. Parameter interrelationships in a dual phase GIS-based municipal solid waste collection model,”
Waste Management, 78 258
–270
(2018). https://doi.org/10.1016/j.wasman.2018.05.050 Google Scholar
Liu, L. and Chen, Y.,
“Object-oriented analysis of JavaScript,”
Computer Knowledge and Technology, 18
(16), 63
–65
(2017). Google Scholar
Agrawal, S. and Gupta, R. D.,
“Development of SOA-based WebGIS framework for education sector,”
Arabian Journal of Geosciences, 13
(13), 1
–13
(2020). https://doi.org/10.1007/s12517-020-05490-9 Google Scholar
Becker, D., Andres-Herrero, D., Willmes, C., et al.,
“Investigating the influence of different DEMs on GIS-based cost distance modelling for site catchment analysis of prehistoric sites in Andalusia,”
ISPRS International Journal of Geo-Information, 6
(2), 36
(2017). https://doi.org/10.3390/ijgi6020036 Google Scholar
Hanlon, J., Messerly, C., Martin, B., et al.,
“Drone technology for monitoring and mapping in the grasslands of Eastern Montana,”
Intermountain Journal of Sciences, 23
(1-4), 72
–73
(2017). Google Scholar
Zheng, B., Qi, S., Luo, G., et al.,
“Characterization of discontinuity surface morphology based on 3D fractal dimension by integrating laser scanning with ArcGIS,”
Bulletin of Engineering Geology and the Environment, 30
(5), 1
–21
(2021). Google Scholar
Zhang, Y., Zhang, G., Zhao, H., et al.,
“A convenient tool for district heating route optimization based on parallel ant colony system algorithm and 3D WebGIS,”
ISPRS International Journal of Geo-Information, 8
(5), 255
(2019). https://doi.org/10.3390/ijgi8060255 Google Scholar
McEwen, J. D. and Lafreniere, A. D.,
“Creating a longitudinal, data-driven 3D model of change over time in a postindustrial landscape using GIS and CityEngine,”
Journal of Cultural Heritage Management and Sustainable Development, 8
(4), 434
–447
(2018). https://doi.org/10.1108/JCHMSD-08-2017-0055 Google Scholar
Chmielewski, S., Samulowska, M., Lupa, M., et al.,
“Citizen science and WebGIS for outdoor advertisement visual pollution assessment,”
Computer, Environment and Urban Systems, 67
(9), 97
–109
(2018). https://doi.org/10.1016/j.compenvurbsys.2017.09.001 Google Scholar
Hu, T., Fan, J., He, H., et al.,
“Mashup scheme design of map tiles using lightweight open source WebGIS platform,”
ISPRS-International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences, 565
–571
(2018). https://doi.org/10.5194/isprs-archives-XLII-3-565-2018 Google Scholar
|