基于高德地图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.