基于高德地圖API的烷基苯廠區(qū)設(shè)施電子地圖系統(tǒng)設(shè)計與實現(xiàn)

劉寧　何鵬　陸建新

摘要 針對金陵烷基苯廠區(qū)設(shè)施種類日益增多導(dǎo)致的設(shè)施管理與查看不便的現(xiàn)狀，結(jié)合廠區(qū)設(shè)施形狀特征，借助高德地圖，采用.NET、C#與JavaScript作為技術(shù)手段，以SQL Server 2008 R2 為數(shù)據(jù)庫，構(gòu)建了基于高德地圖API的烷基苯廠區(qū)設(shè)施電子地圖系統(tǒng)。系統(tǒng)采用B/S網(wǎng)絡(luò)結(jié)構(gòu)模式，實現(xiàn)設(shè)施屬性數(shù)據(jù)錄入、查詢與導(dǎo)出以及設(shè)施圖層標(biāo)注和顯示等功能，為金陵烷基苯廠設(shè)施管理與查看提供便捷的操作環(huán)境并保證了數(shù)據(jù)的準(zhǔn)確性與完整性。

關(guān)鍵詞 .NET； 高德地圖API； 電子地圖； 設(shè)施圖層

DOIDOI：10.11907/rjdk.173323

中圖分類號：TP319

文獻(xiàn)標(biāo)識碼：A文章編號文章編號：16727800（2018）009014404

英文標(biāo)題Design and Implement of Digital Map System of Alkyl Benzene Plants Facilities Based on Map of Gaode API

——副標(biāo)題

英文作者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.

英文關(guān)鍵詞Key Words：.NET；Map of Gaode；API；digital map； layers of Facilities

0引言

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

1系統(tǒng)結(jié)構(gòu)設(shè)計

1.1系統(tǒng)設(shè)計目標(biāo)

系統(tǒng)采用B/S網(wǎng)絡(luò)結(jié)構(gòu)模式，應(yīng)用GIS技術(shù)建立一個基于高德地圖API與.Net Framework框架的Web應(yīng)用程序。系統(tǒng)實現(xiàn)了以下目標(biāo)：

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

（2）數(shù)據(jù)安全。系統(tǒng)數(shù)據(jù)在Web服務(wù)器與數(shù)據(jù)庫服務(wù)器上，系統(tǒng)管理員為不同用戶分配不同的使用權(quán)限，實現(xiàn)靈活的訪問控制，保障數(shù)據(jù)安全[5]。

（3）靈活的系統(tǒng)設(shè)置。系統(tǒng)設(shè)置靈活易用，充分考慮人性化設(shè)置，便于功能擴展。

1.2系統(tǒng)框架設(shè)計

系統(tǒng)采用客戶端、IIS服務(wù)器與數(shù)據(jù)庫服務(wù)器3層結(jié)構(gòu)進行設(shè)計。在客戶端瀏覽器頁面設(shè)計相關(guān)設(shè)施信息錄入、編輯、查詢與導(dǎo)出頁面以及圖層展示頁面，瀏覽器將用戶的訪問請求發(fā)送到IIS服務(wù)器，由其處理用戶請求。數(shù)據(jù)庫服務(wù)器存取各類空間信息數(shù)據(jù)與屬性信息數(shù)據(jù)[6]，系統(tǒng)采用SQL Server2008R2數(shù)據(jù)庫存取數(shù)據(jù)。系統(tǒng)框架結(jié)構(gòu)如圖1所示。

1.3技術(shù)結(jié)構(gòu)

1.3.1高德地圖API

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

1.3.2.Net三層架構(gòu)

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

1.2.3AJAX技術(shù)

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

2數(shù)據(jù)庫設(shè)計

采用SQL Server 2008 R2作為系統(tǒng)數(shù)據(jù)管理軟件，將相關(guān)數(shù)據(jù)分類成數(shù)據(jù)表進行存取，

數(shù)據(jù)庫名稱為“njwjbc”。在數(shù)據(jù)庫njwjbc中包含用戶表、角色表、企業(yè)概述表、廠區(qū)邊界表、車間信息表、儲罐信息表、管線信息表、相關(guān)環(huán)境文件表、排口信息表、應(yīng)急監(jiān)測點表與風(fēng)險源信息表及其關(guān)聯(lián)表。具有代表性的表設(shè)計實現(xiàn)有車間信息表（Workshop_Info）、排口信息表（T_port）、風(fēng)險源信息表（Risk_Info），如表1，表2，表3所示。

3系統(tǒng)功能設(shè)計

3.1系統(tǒng)功能

系統(tǒng)主要功能模塊如圖2所示。

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

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

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

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

（4）用戶模塊。用戶模塊分為兩個子模塊：普通用戶模塊與管理員模塊。普通用戶登錄后可以修改個人信息、信息查看；管理員除具有普通用戶權(quán)限外，還擁有用戶權(quán)限管理功能，包括角色管理、權(quán)限分配。管理員負(fù)責(zé)對廠區(qū)所有設(shè)施數(shù)據(jù)進行動態(tài)維護。

4系統(tǒng)功能實現(xiàn)

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

4.1廠房車間圖層標(biāo)注

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

4.2污水管線圖層標(biāo)注

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

polyline = new AMap.Polyline（{

path： list， //設(shè)置線覆蓋物路徑

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（）；

污水管線圖層實現(xiàn)效果如圖4所示。

4.3應(yīng)急監(jiān)控點圖層標(biāo)注

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

4.4廠區(qū)設(shè)施圖層顯示與設(shè)施屬性信息顯示

4.4.1廠區(qū)設(shè)施圖層顯示

將標(biāo)注好的各類設(shè)施圖層在高德地圖上顯示，為了避免所有設(shè)施圖層一起顯示出現(xiàn)混亂狀態(tài)，在高德地圖加載時對所有設(shè)施圖層進行隱藏操作，當(dāng)需要查看某類設(shè)施圖層時，在系統(tǒng)左側(cè)菜單欄點擊該類設(shè)施對應(yīng)的名稱即可以顯示該設(shè)施圖層，再次點擊時該設(shè)施圖層進入隱藏狀態(tài)。

4.4.2廠區(qū)設(shè)施屬性信息顯示

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

5結(jié)語

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

參考文獻(xiàn)參考文獻(xiàn)：

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

[2]李樹金，羅宏偉.基于.NET的工資查詢系統(tǒng)設(shè)計與實現(xiàn)[J].軟件導(dǎo)刊，2017，16（2）：100102.

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

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