基于高德地圖API的烷基苯廠區設施電子地圖系統設計與實現

劉寧　何鵬　陸建新

摘要 針對金陵烷基苯廠區設施種類日益增多導致的設施管理與查看不便的現狀，結合廠區設施形狀特征，借助高德地圖，采用.NET、C#與JavaScript作為技術手段，以SQL Server 2008 R2 為數據庫，構建了基于高德地圖API的烷基苯廠區設施電子地圖系統。系統采用B/S網絡結構模式，實現設施屬性數據錄入、查詢與導出以及設施圖層標注和顯示等功能，為金陵烷基苯廠設施管理與查看提供便捷的操作環境并保證了數據的準確性與完整性。

關鍵詞 .NET； 高德地圖API； 電子地圖； 設施圖層

DOIDOI：10.11907/rjdk.173323

中圖分類號：TP319

文獻標識碼：A文章編號文章編號：16727800（2018）009014404

英文標題Design and Implement of Digital Map System of Alkyl Benzene Plants Facilities Based on Map of Gaode API

——副標題

英文作者LIU Ning1，HE Peng1，LU Jianxin2

英文作者單位（1.School of Computer Science and Technology，Nantong University；2.School of Transportation，Nantong University，Nantong 226019，China）

英文摘要Abstract：In view of the current status that inconvenient management of facilities is caused by increasing types and numbers of facilities in Jinling Alkyl Benzene Plant， we design a digital map of facilities in Alkyl Benzene Plant based on Map of Gaode API by considering the shape characteristics of facilities and adopts .NET，C # and JavaScript as technical tools and SQL Server 2008 R2 as its database. The system adopts B/S network modeand realises the functions of facilities attribute data entry， query and export as well as facility layers annotation and display， etc， which provides a convenient operating environment for Jinling alkyl benzene plant facility management and view and ensures the accuracy and completeness of the data.

英文關鍵詞Key Words：.NET；Map of Gaode；API；digital map； layers of Facilities

0引言

隨著計算機技術與計算機網絡的不斷發展，人們對電子信息的需求也越來越多，更多的專家與學者意識到地圖學與計算機科學結合的巨大發展潛力，電子地圖應運而生。通過可視化技術以及數字地圖制圖技術有效結合，電子地圖從傳統模擬地圖中脫離，發展成為基于屏幕表達的地圖形式[1]。本文基于高德地圖進行二次開發，實現廠區設施電子地圖系統，有效解決了廠區設施可視化問題，提高了設施信息化管理水平。其實現了廠區所有設施數據信息錄入、編輯、查詢、圖層標注與顯示功能，還集成了普通MIS系統用戶信息管理、用戶權限分配、通知公告與附件上傳、下載等功能。為南京金陵烷基苯廠區設施查看與設施管理提供無紙化、網絡化與高效率的操作環境，具有一定的借鑒意義[2]。

1系統結構設計

1.1系統設計目標

系統采用B/S網絡結構模式，應用GIS技術建立一個基于高德地圖API與.Net Framework框架的Web應用程序。系統實現了以下目標：

（1）簡單易用的操作環境。以C#和JavaScript[34]作為技術手段，以SQL Server 2008R2作為后臺數據庫構建系統。同常用的MIS系統類似，用戶登錄后可以錄入烷基苯廠區所有設施的詳細信息，并提供相應設施信息的模糊檢索、編輯、刪除與導出Excel表格等功能。在地圖頁用戶可以將所有設施以圖層形式標注，從而使設施能夠在地圖上顯示，其應用性與易推廣性較好。

（2）數據安全。系統數據在Web服務器與數據庫服務器上，系統管理員為不同用戶分配不同的使用權限，實現靈活的訪問控制，保障數據安全[5]。

（3）靈活的系統設置。系統設置靈活易用，充分考慮人性化設置，便于功能擴展。

1.2系統框架設計

系統采用客戶端、IIS服務器與數據庫服務器3層結構進行設計。在客戶端瀏覽器頁面設計相關設施信息錄入、編輯、查詢與導出頁面以及圖層展示頁面，瀏覽器將用戶的訪問請求發送到IIS服務器，由其處理用戶請求。數據庫服務器存取各類空間信息數據與屬性信息數據[6]，系統采用SQL Server2008R2數據庫存取數據。系統框架結構如圖1所示。

1.3技術結構

1.3.1高德地圖API

高德地圖JavaScript API是由JavaScript語言編寫的應用程序接口，可幫助開發者在網站中構建功能豐富、交互性強的地圖應用，并支持 PC端與移動端。開發者可以開發地圖應用功能，如地圖顯示與操作、室內外一體化地圖查看等[7]。其中，高德地圖提供了可以添加地圖覆蓋物的接口，所有疊加或覆蓋的內容，統稱為地圖覆蓋物，如標記、矢量圖層元素（折線、多邊形和圓）等[89]。

1.3.2.Net三層架構

三層架構將整個軟件框架分為表示層與業務邏輯層、數據庫訪問層，各層分工合作，實現數據交互[1011]。其目的在于實現軟件開發中所要求的“高內聚、低耦合”，采用“分而治之”的方法，實現軟件功能劃分，從而有利于控制、延展與資源分配[1213]。

1.2.3AJAX技術

AJAX[14]全稱為“Asynchronous Java Script and XML”（ 異 步Java Script 與 XML） ，使用AJAX技術無需刷新整個頁面內容，只需要根據用戶需求，完成網頁中部分控件與服務器之間的交互，其動態顯示與交互部分主要應用于DOM技術完成[1015]。AJAX 使數據呈現分離，有利于分工合作、減少非技術人員對頁面修改造成的 Web 應用程序錯誤。

2數據庫設計

采用SQL Server 2008 R2作為系統數據管理軟件，將相關數據分類成數據表進行存取，

數據庫名稱為“njwjbc”。在數據庫njwjbc中包含用戶表、角色表、企業概述表、廠區邊界表、車間信息表、儲罐信息表、管線信息表、相關環境文件表、排口信息表、應急監測點表與風險源信息表及其關聯表。具有代表性的表設計實現有車間信息表（Workshop_Info）、排口信息表（T_port）、風險源信息表（Risk_Info），如表1，表2，表3所示。

3系統功能設計

3.1系統功能

系統主要功能模塊如圖2所示。

（1）基礎數據模塊。基礎數據模塊包含屬性數據模塊與空間數據模塊兩部分，屬性數據模塊包括各類設施屬性信息的錄入、修改、備份、導出Excel表格與提供根據設施編號或設施名稱的模糊查詢功能；空間數據模塊實現將廠區所有設施在高德地圖上圖層標注形式標注的功能。設施圖層標注采用如下方案：車間信息、事故應急池與污水處理站采用Polygon（多邊形）標注；廠區邊界、罐區圍堰、雨水管線、污水管線、供熱管線、天然氣管線與物料管線采用Polyline（折線）標注；廠區儲罐、污水排口、雨水排口、廢氣排口、噪聲監測點、應急監控點、消防設施點采用Circle（圓）標注。

（2）數據顯示模塊。數據顯示模塊包含圖層信息顯示模塊與屬性信息顯示模塊。圖層信息顯示模塊是指將標注的設施圖層在高德地圖上顯示，包括廠房車間設施、廠區儲罐設施、各類管線設施、各類排口設施與監測點設施等。對不同設施進行區分，采用不同圖層進行標注，對相同圖層的不同設施使用不同顏色進行區分。例如：污水管線設置成紅色、雨水管線設置成綠色、天然氣管線設置成

藍色等。由于烷基苯廠區的設施種類繁多，如果在地圖上將廠區所有設施同時顯示出來，整個地圖頁面會顯得十分混亂。為了解決這個問題，系統實現了對不需要查看的設施圖層的隱藏操作，只顯示當前需要查看的設施，使用戶體驗更好。屬性信息顯示模塊是指點擊地圖上已標注好的設施圖層，顯示該設施的詳細信息。例如該設施的編號、名稱、長度、經度、緯度、半徑等信息。

（3）文件、公告模塊。該模塊主要由系統管理員進行操作，例如公告信息錄入、編輯與相關文件上傳，用戶端可以查看公告信息、附件下載等。

（4）用戶模塊。用戶模塊分為兩個子模塊：普通用戶模塊與管理員模塊。普通用戶登錄后可以修改個人信息、信息查看；管理員除具有普通用戶權限外，還擁有用戶權限管理功能，包括角色管理、權限分配。管理員負責對廠區所有設施數據進行動態維護。

4系統功能實現

該系統實現客戶端同服務器端、服務器端同數據庫的交互，研究重點是將烷基苯廠所有不完善的設施、數據以特定圖層的形式在高德地圖上標注出來，并在高德地圖上顯示。顯示部分不僅要完成設施圖層展示，還要實現圖層對應設施的詳細屬性信息展示。該系統基于高德地圖API進行開發，效率高且成本低。由于金陵烷基苯廠廠區設施種類繁多，整個系統的開發任務比較繁重，在此僅列舉幾個具有代表性的設施進行展示。

4.1廠房車間圖層標注

金陵烷基苯廠區內部有多個廠房車間，其大多是不規則多邊形，因此廠房車間的圖層標注可以使用高德地圖API提供的Polygon（多邊形）實現。為Map添加一個右擊函數 map.on（'rightclick'，function （e），完成地圖上鼠標軌跡記錄（經度與緯度信息），并將這些記錄信息保存到數據庫表T_changfcj的Lat（經度）字段與Lng（緯度）字段中。廠房車間圖層的編輯功能通過調用plugin（["AMap.PolyEditor"]，function （））函數實現。車間圖層標注頁面實現效果如圖3所示。

4.2污水管線圖層標注

廠區內部污水管線埋藏在廠區底下，地圖上標注管線圖層可以更直觀地看到所有管線的具體位置。廠區內的污水管線有兩種結構：一是單條污水管線；二是多條單體污水管線。針對管線結構特點，可以采用高德地圖API提供的Polyline（折線）進行標注。對于雨水管線、供熱管線、天然氣管線、物料管線等其操作是相同的，只需為不同管線設置不同的顯示顏色加以辨識。實現代碼如下：

polyline = new AMap.Polyline（{

path： list， //設置線覆蓋物路徑

strokeColor： "#3366FF"，//線顏色

strokeOpacity： 1， //線透明度

strokeWeight： 2， //線寬

strokeStyle： "solid"， //線樣

}）；

polyline.setMap（map）；

map.plugin（["AMap.PolyEditor"]，function （） {

polyline_e = new AMap.PolyEditor（map，polyline）；

polyline_e.open（）；

}）；

satellLayer = new AMap.TileLayer.Satellite（）；

污水管線圖層實現效果如圖4所示。

4.3應急監控點圖層標注

金陵烷基苯廠為了能夠迅速定位突發事件的確切位置，并及時采取相應措施，在廠區內部與外部設置了很多應急監控點。根據南京烷基苯廠的功能需求，這些應急監控可以采用高德地圖API提供的Circle（圓）進行標注。圓形標注與多邊形、折線標注操作不同，以圓形標注時不僅需要記錄圓心的經度與緯度信息，還需對半徑進行記錄。應急監控點標注實現頁面如圖5所示。

4.4廠區設施圖層顯示與設施屬性信息顯示

4.4.1廠區設施圖層顯示

將標注好的各類設施圖層在高德地圖上顯示，為了避免所有設施圖層一起顯示出現混亂狀態，在高德地圖加載時對所有設施圖層進行隱藏操作，當需要查看某類設施圖層時，在系統左側菜單欄點擊該類設施對應的名稱即可以顯示該設施圖層，再次點擊時該設施圖層進入隱藏狀態。

4.4.2廠區設施屬性信息顯示

當點擊地圖頁面上標注的設施圖層時會以文本框的形式顯示該設施的詳細屬性數據，采用AJAX技術可以在不用重新加載整個地圖的情況下實現屬性數據顯示。具體步驟為：AJAX從后臺取出該設施圖層對應的屬性數據，并將這些數據帶回前臺顯示頁面，在前臺頁面使用InfoWindow顯示此設施的詳細屬性信息。廠房車間屬性數據顯示頁面如圖6所示。

5結語

本文使用VS2015作為開發工具，C#與JavaScript作為開發語言，基于高德地圖API設計廠區設施屬性數據管理、設施圖層標注、設施圖層顯示與設施屬性查看的電子地圖管理系統，該系統集成了普通MIS系統的用戶信息管理、用戶權限設置等功能模塊。系統無需用戶安裝應用程序，且頁面簡潔直觀，方便用戶對于廠區設施屬性信息的錄入、圖層標注、圖層信息與屬性信息查看等操作。在充分發揮信息管理優勢的同時，該系統兼具對金陵烷基苯廠未來發展的輔助規劃與設計功能。在今后的業務應用中該系統仍有較大改進空間，如怎樣使得顯示效果更加流暢等；此外高德地圖具備手持移動終端Android與IOS系統開發平臺[1617]，之后可以繼續為其開發系統對應的移動終端APP應用。本文系統設計開發對于其它類似信息系統開發，具有一定借鑒意義。

參考文獻參考文獻：

[1]李林.基于Google Maps API的校園電子地圖設計與實現[J].科協論壇（下半月），2012（12）：6669.

[2]李樹金，羅宏偉.基于.NET的工資查詢系統設計與實現[J].軟件導刊，2017，16（2）：100102.

[3]SILVA，LEONARDO HUMBERTO.Identifying classes in legacy JavaScript code[M].Journalof Softwareevolution and Process，2017.

[4]董卓亞.基于百度地圖JavaScript API的通信地圖展示[J].電子設計工程，2013，21（18）：7376.