webgis入门实战

webgis入门实战

需求来源

emap模块学习和总结，并分享新人

概论

地图基本要素

• 比例尺
  单位地图长度与实际距离的比例。如1:500指地图上1cm，实际距离5m，对应0.002则称为分辨率。通过鼠标滚轮或导航调整。
• 方向
  上北下南，左西右东。若旋转地图，则需根据朝北的方向标调整视角。目前没有方向调整功能。
• 图例和标注
  图例是用符号、图案、颜色等描述地形、水土、交通、建筑等，标注则是说明性的文字、数字。
  目前大华地图的基本业务就是在图例和标注上进行，之后章节称为点位。

投影体系

• 地理坐标系
  用三维球面来定义地球的位置，水平线（或东西线）是等纬度线或纬线，垂直线（或南北线）是等经度线或经线。
  
  • 经度
    目标点做垂直于赤道的线的交点，并与地心相连的线，此线和本初子午线的夹角为经度。
  • 纬度
    目标点做垂直于赤道的线的交点，并与地心相连的线，此线与目标点和地心连线的夹角为纬度。
• 地心坐标系
  是一种地理坐标系，地球在一个从地心开始测量的右旋XYZ坐标系（3D笛卡尔）中被建模为球体或旋转椭球体，X轴指向本初子午线、Y轴位于赤道平面上与X轴成90度，Z轴指向北极点。
  此椭球主要参数有长半轴、短半轴和扁率。
  WGS 84坐标系为1984年美国国防部制图局为统一世界大地坐标系统而建立的地心坐标系。
  其参数为长半轴(a)为6378137，短半轴(b)为6356752.314245179,，扁率(f)为298.257223563，f=(a-b)/a。
• 投影坐标系
  是将三维的地理坐标系投影到二维的直角坐标系平面上，采用等角、等积、等距等方式的地图投影。
• 墨卡托投影
  是正轴等角圆柱投影。假想地球被围在一个中空的圆柱里，其基准纬线（赤道）与圆柱相切接触，再假想地球中心有一盏灯，把球面上的图形投影到圆柱体上，再将圆柱体展开，就得到了一个墨卡托投影。该投影没有角度变形，经纬为平行直线，但其长度和面积变形明显，基准纬线较小，而往两极逐渐增大。
• Web Mercator（web墨卡托投影）
  是一个投影坐标系统，其基准面是WGS 84。它不是严格意义的墨卡托投影，在投影过程中它将椭球体近似为正球体来做投影变换，即没有扁率，在web领域被广泛应用。百度用的EPSG:3857就是WGS 84坐标系的一个子类，而谷歌的EPSG:900913则是自行设置，得不到官方认证的ID。（900913=google）。
• 坐标转换
  通常web墨卡托投影地图范围经度是-180~180，纬度-85.0511~85.0511，这是因为墨卡托投影两极变形到无穷远。得排序两极区域，剩下区域投影侯为一个正方形，范围为-20037508.34~20037508.34。
  由经纬图可得坐标转换公式：
  经纬->地理：
  x = lon*20037508.34/180
  y = log(tan(90+lat)*PI/360)/(PI/180)*20037508.34/180
  地理->经纬：
  lon = x/20037508.34*180
  lat = 180/PI*(2*atan(2*exp(y*PI/180))-PI/2)/20037508.34*180
  (x、y为地图坐标，lon、lat为经度、纬度)

地图底图类别

• 二维地图
  分为矢量图和光栅图。以二维平面图片作为底图。点位业务集中在二维坐标X和Y，和对应在哪张图的mapID。

  • 矢量图
    是一种放大不失真、不变色、与分辨率无关的图。目前U3.22的地图接入的矢量图模式有 百度在线、百度离线，谷歌在线、谷歌离线，超图。
    矢量图地图的底图是根据中心点和地图边界大小读取对应N张碎片图紧密拼凑而成的，这些碎片图又称瓦片。
  • 光栅图
    又称位图，是由以像素为基本单位的无数色彩点组成的图案。两种区别在于空间的连续和离散。
    目前U3.22的地图接入的光栅图模式有 光栅、光栅切片。
    光栅图则是使用自行上传图片作为底图。
    光栅切片则是模仿矢量图模式，将自行上传的图片进行切片，切成大量瓦片，拼凑出底图。

• 2.5D
  有立体投影效果的二维图片作为底图。北方标指向右上角45度，难点在于投影坐标转换，U3.11支持edushi，U3.22目前不支持。

• 三维地图
  分为平面三维和球面三维。以三维的虚拟现实模型数据作为底图。目前只能在ie内使用，与二维底图业务不同在于点位拥有额外的Z轴坐标。

  • 平面三维
    老版本的三维地图，占用内存大，容易崩溃。点位的X和Y和二维占用数据库表同一字段，所以地图模式切换时会清空原模式的点位信息。
  • 球面三维
    新版本的三维地图，由大基线维护，目前功能较少，但实现了单独进程化，基本不大会崩溃。点位的XYZ采用独立的GPS_X_3D等字段，和二维完全分开，切换模式可以不清空各自点位数据。

项目搭建

外在基础

• Gis服务器
  用于存放瓦片、路网信息等数据。
• 地图瓦片开源api
  百度、谷歌等提供的瓦片引擎URL和经纬校验。
• web端api
  开源插件openlayer，目前大华地图使用superMap，用于引入各类地图，实现地图基本功能和点位相关功能。
  SuperMap内网API地址：http://172.7.55.35:8090/iserver/
  外网：support.supermap.com/datawarehouse/webdochelp/7.0..0/iclient/javascript/files/SuperMap/Map-js.html

项目配置

• 配置文件路径
  二维地图和平面三维在同一项目Emap_U3.22中，球面三维单独一个项目，目前由大基线维护，U3.22现接入球面三维，而废弃平面三维。U3.22地图模式设为三维时直接跳转至Emap3d_Trunk的地图url。
  两个项目配置文件互不干扰，都分别有两个配置文件，在项目/src/main/resources/下，分别是config.properties（用于基本系统配置），config_userDefined.properties（用于用户自定义配置，如地图模式），下表为配置文件放置目录：
  项目名 config.properties config_userDefined.properties
  Emap_ U3.22 {0}/webapps-conf/emap/ {0}/webapps-conf/userDefined/emap/
  Emap3d_Trunk {0}/webapps-conf/emap3d/ {0}/webapps-conf/userDefined/emap3d/
  {0} 即tomcat配置路径，下表为目前不同系统U3.22的 {0} 路径:
  Windows Linux
  d:/tomcat/bin /opt/tomcat
  （设windows下tomcat安装目录为d:/tomcat）
• 三维地图模型、地形数据的linux服务器部署
  windows系统无法配置三维数据。
  新增了tomcatkelan，数据放在/opt/kelan/modelData，启动tomcatkelan后，浏览器输入http://IP:8088/kelan/看是否成功启用，并在配置系统端模型、地形数据输入该url。切换地图模式到三维会启动tomcatkelan，切出三维会关闭。

地图使用

地图进入

• 地图管理端
  输入平台ip进入DSS管理端->视频业务->地图管理。
  也可在浏览器输入URL ：
  http://IP/emap/admin?loginName={0} &loginPass={1}
  其中{0}为登陆名，{1}为该加密后的密码，分别对应在数据库表sys_user中的LOGIN_NAME和LOGIN_PASS。如
  ?loginName=system &loginPass=5ce3960eac39a95ed67b654053849793
  电子地图属于specialMenu（特殊地图），编号033004001，
  目前登陆状态设置为一次登陆，永不过期。
• 地图客户端
  在DSS管理端首页右下角，下载安装DSS客户端桌面版。
  在DSS管理端->用户，确保要登陆的用户拥有地图访问权限。
  通过DSS客户端->基本功能->电子地图，进入地图客户端。
  也可在浏览器输入URL：http://IP/emap?loginName={0} &loginPass={1}
  仅供快捷调试，无法和DSS客户端交互，缺失很多功能。

地图布局

地图布局主要由三部分组成：
工具栏，包括图中区域1和2；菜单，对应区域3；地图容器，对应区域4，由大量的图层叠加而成，地图内其他元素则有控件，鹰眼-区域5、卫星图切换-区域6、平移-区域7，缩放-区域8。

• 工具栏
  该html元素是一个id为topBar的div，内分为toolMenuDiv（顶层菜单栏）和sideTitleBar（侧边标题栏）两部分，分别对应区域1和区域2。

  • 顶层菜单栏
    在toolbarbuttons.js内收录所有工具栏按钮及对应功能，由地图初始化总控js决定加载哪些，下表是各模式下对应总控js和jsp。
    地图模式 管理端 客户端
    矢量 config_2D.js或.jsp client_2D
    光栅 config_bitmap client_bitmap
    光栅切片 config_freelayer client_bitmap
    三维 config_3D client_3D
    矢量图热区 config_2D client_bitmap.js/client_bitmap_simple.jsp
  • 侧边标题栏
    主要分开三部分，标题，按钮-返回首页，按钮-极简模式。
    标题：切换菜单时会显示对应页面的标题，如进入视频页面，显示视频。
    返回首页：按钮，退出当前页面，对应menuoper.js的backToMenuPage方法。
    极简模式：按钮，隐藏菜单栏，扩大地图区域，显示极简的资源搜索功能，对应pageControl.js的toggleInfoBar方法。
  • 在进行以下操作时会切换工具栏
    菜单进入和退出；
    矢量图下进出热区。

• 菜单
  该html元素是一个id为sideBar的div，内分为menuIframe（菜单浮动框）、sideIframe（侧边浮动框）、sideDiv（侧边分区）三部分。

  • 菜单目录来源
    管理端：取自文件，/src/main/resources下，二维对应config_menu.json，
    三维对应3d_config_menu.json。
    客户端：取自数据库，表sys_menu内SYSTEM_CODE=3和MENU_PATH_2=”specialMenu”的记录。
  • 菜单打开方式
    地图目录目前有5种打开方式，分别为直接div打开、dialog弹出、iframe打开、高亮菜单和仅点击，目前U3.22使用的为2种，分别是div和iframe打开。
    div打开：sideDiv内填充html元素，隐藏另两部分，设备树专用，openType=2。
    iframe打开：sideIframe的src改为对应页面url，隐藏另两部分，openType=0。
  • 菜单对应地图模式
    目录数据mapType（地图类型）指对不同地图模式下的显藏：
    mapType对应constant.js的MENUBELONG，0对应光栅，1对应矢量，2则是光栅、矢量都显示，三维地图则是无关mapType定死的。
  • 在进行以下操作时会切换菜单栏
    菜单进入和退出；
    矢量图下进出热区。

• 地图容器
  该html元素是一个id为mapWraper的div，内含各类图层和控件。

  • 图层
    图层是地图的核心。学过photoshop的应该知道图层的概念，一层层的图层叠加才形成了丰富的地图俯瞰景观，每张图层上单独承载着相对单一的元素，方便同类元素统一处理。
    图层分类
    目前U3.22只使用了superMap提供的三种图层，分别是CanvasLayer（渲染图层）、Markers（标记图层）、Vector（矢量图层）。
    CanvasLayer：一般用于底图渲染。是所有SuperMap iServer 6R 定义的图层类的基类。 CanvasLayer有Canvas和NoCanvas两种渲染方式。构造时接受4个属性值，分别是name（图层名称）、url（服务地址）、params（设置到url上的可选参数）、options（附加到图层属性的可选项）。U3.22接入的矢量图都采用该图层作为底图。百度以baidu.js，谷歌以google.js，光栅切片以freelayer.js配置其不同的取图规则、分辨率、投影坐标等属性。
    Markers：一般用于操作标记。默认不是基础图层。大华点位操作都在这类图层中进行。dhmapext.js包装了继承于该类的DHMarkers图层用于操作大华点位。
    Vector：一般用于操作矢量要素。默认不是基础图层。如线、框、圈等矢量要素都在这类图层上。dhmapext.js包装了继承于该类的DHVector图层用于操作大华矢量要素。
    图层操作
    LayerManager.js收录了各类业务数据的图层管理，其他都包装在DHMap.js中。
    底图切换： 矢量图与热区跳转，热区间跳转，都会触发baselayerchanged事件，切换底图图片，重新加载图层和图层上元素。
    图层添加、删除： 需要在地图增加或删除元素而不影响原地图，管理端进入或退出视频、卡口等页面都会加载或删除对应的点位图层。
    图层显藏：不删除图层，只是通过控制显藏来达到地图变化效果，客户端图层管理可以控制各类图层显藏。
    图层层高：图层的层高决定了该图层处于地图的显示优先级别，层高低的图层容易被层高高的图层遮掩，若出现了点位无法选中很可能是其他图层遮掩了当前的点位图层。
  • 鹰眼
    描述底图当前窗口在全图中的位置，当底图切换时，鹰眼会相应变化，通过改变鹰眼中窗口位置可改变主窗口地图显示区域。
  • 卫星图切换
    将普通地图切换成卫星图，通过卫星图层的显藏控制，目前U3.22只允许百度地图显示这个控件。
  • 平移
    通过上、下、左、右四个方向按钮控制主窗口地图平移，也可以通过鼠标拖拽主窗口图片实现平移。
  • 缩放
    通过加、减按钮调整分辨率级别控制主窗口的视野大小。调整了分辨率级别，会触发initGriddedTiles事件，重新取瓦片铺设底图。
    地图的展示级别可以设置最小、最大和初始级别，可以通过配置系统-地图配置，也可以修改项目的用户自定义配置文件，对应属性minLevel、maxLevel和scalesLevel。

地图模式

• 地图模式切换
  可通过配置系统-地图配置切换模式，此时会清空点位坐标值。
  也可以直接更改配置文件config_userDefined.properties，下表是地图模式对应的配置属性：
  模式 gisMode gisEngine mapUrl
  超图 0 supermap http://172.7.55.35:8090/iserver/services/map-dahangzhou/
  rest/maps/hangzhou
  光栅 1 bitmap
  光栅切片 0 freelayer
  谷歌 0 google http://mt{0}.google.cn/vt/lyrs=m@263000000,highlight&hl
  =zh-CN&gl=CN&src=app&s=Gali&z={1}&x={2}&y={3}
  谷歌离线 0 google_offline http://172.6.12.179/tilecache
  /gmap/{0}/{1}/{2}.png
  百度 0 baidu http://online{0}.map.bdimg.com/tile/?qt=tile&x={1}&y={2}
  &z={3}&styles=pl&udt=20150810&scaler=1
  百度离线 0 baidu_offline http://172.6.12.179/tilecache/baidu
  /vec/{0}/{1}/{2}.png
  三维 3 threemap
• 离线地图配置
  离线地图的mapUrl可更改，可通过离线地图包重新配置，如百度离线，将地图包解压到/webapps/upload/emap/baidu下，则mapUrl为http://IP//upload/emap/baidu/{0}/{1}/{2}.png
• 瓦片规则
  {0}{1}{2}{3}等待匹配字符，对应模式图层构建js（如谷歌-google.js，百度-baidu.js）的getTileUrl方法会将其替换成瓦片地址。对应Z是当前的缩放级别，对应X和Y则是当前缩放级别下瓦片的编号。
  矢量地图在每个级别将整个地图划分为若干个图块，通过编号系统整合图块。图块的编号规则是，从坐标原点开始，往右上方向，即x正轴和y正轴方向组成的第一象限，其第一个图块为0,0，以此类推，在最低级别1，整个地球由4个图块组成，随着级别增长，图块数量随之增多。
  而瓦片的数量则根据地图容器的边界大小计算，瓦片固定大小为256*256（目前接入的矢量地图模式下）。

点位

构成

点位依附在指定markers点位图层上，html的表现形式是在对应id的markers图层div内，新建了个带有设备或通道编号、名称等各类信息的div。由两部分构成，一个img图片和label文字标注。
其中文字标注显示名称，由对应模式的总控js初始化地图调用init方法，定义的initLayerShowName变量决定对应图层的点位是否显示。
而图片的默认大小由自定义配置文件的地图标注尺寸影响，对应属性iconsize，分为small、middle、large，分别对应图片大小16*16，24*24，32*32，对应constant.js的ICONSIZE。
图片源由设备或通道类型和在离线等状态影响。

分类

这里只介绍U3.22目前支持的设备和通道类型，并非admin设备管理所有设备。

• 设备
  支持拖到地图的设备点位只有报警主机，其编号即设备编号。
  
  • 报警主机
    图层名：alarmhostLayer

• 通道
  支持拖到地图的通道点位有视频、报警输入、卡口、门禁通道，其编号构成是 设备编号 通道类型 通 道 类 型 通道序号$

  • 视频通道
    支持视频通道的设备有两类：
    一是编码资源类的编码器、智能设备：
    图层名：videoLayer
    二是卡口设备的图片视频混合通道，也具有视频功能：
    图层名：mixLayer
  • 报警输入通道
    支持视频通道的设备有编码资源类的编码器、智能设备和报警主机：
    图层名：alarmLayer
  • 卡口通道
    卡口通道分为两类：
    一是图片通道：
    图层名：itcLayer
    二是图片视频混合通道，也具有视频功能：
    图层名：mixLayer
  • 门禁通道
    即门禁设备的通道：
    图层名：doorLayer

• 热区
  热区即光栅图点位，点击可展开一张光栅图。热区可以是光栅图模式主图的下级光栅图，也可以是矢量图模式底图和光栅图的结合产物。
  图层名：hotareaLayer

• 社会资源
  可绑定设备或通道的自定义资源点位：
  图层名：societyLayer
• GPS
  支持gps应用的设备有编码器MDVR和MPT300：
  图层名：gpsLayer

操作

• 添加
  添加操作在管理端进行。
  
  • 设备或通道或gps应用
    进入 基本配置->设备管理，添加对应设备和通道；
    进入地图管理端，进入对应设备配置的设备树页面（如视频），从设备树上拖拽节点到地图内。
    treemanager.js管理设备树，其dragChaToMap方法定义拖拽流程。
    deviceopen.js控制地图设备或通道的添加、修改、删除、选中等操作，地图点位的添加操作并不是严格意义上的添加，而是给原已配置存在的设备增加经纬度、地图编号等信息，而删除也只是清空这些额外的信息，所以添加、移动、删除点位用的是同一个方法updateDevLocation，只是传入参数不同。
  • 热区点位
    地图管理端->基础配置->图片配置，上传图片；
    地图管理端->基础配置->地图配置->工具栏的顶层菜单栏->添加热区。
    热区操作由bitmapoper.js控制，其addSubMap方法定义热区添加逻辑。
  • 社会资源点位
    地图管理端->设备配置->社会资源->图层管理，添加社会资源图层；
    地图管理端->设备配置->社会资源->新增点位，添加社会资源点位。
    图层添加js为societylayer_config.js，点位为society_add.js。
• 移动
  移动操作在管理端进行。
  选中工具栏移动按钮，即可移动点位。
  markerevent.js定义点位事件响应，其ableToMove变量定义是否可移动。
• 选中
  选中操作在管理端和客户端都有。
  
  • 地图管理端->工具栏->点选设备或框选，管理端的选中操作是部分操作的前一步，如删除、绑定设备等，即选中才可以删除点位。
    选中时其点位状态改变为选中，此时会替换正常图标为选中图标，而取消选中后则会替换回正常图标。
    点选可否由markerevent.js的pointSelect变量决定，框选则是deviceoper.js的selectByRect方法实现。
  • 地图客户端->工具栏->矢量查询->点选、线选等，客户端的被选中的点位会形成个列表，方便一齐操作。
    由dhmap.js的spaceSelect方法实现框选、线选、圈选、多边形选。
• 删除
  删除操作在管理端进行。
  地图管理端->工具栏->删除设备，在此之前需要先选中点位，传入方法updateDevLocation空参数即可。
• 高亮
  高亮操作在管理端和客户端都有。
  进入地图管理端的社会资源或客户端对应设备菜单页面，点位列表会按序显示，对应地图中点位也会图标替换成对应序号，退出会取消高亮。
  MarkerManager.js执行对地图上所有点位的管理，其setMarkerHightLightStateByLayer方法定义高亮和cancelHightLightByLayer方法取消高亮。
• 定位
  定位操作在管理端和客户端都有。
  在管理端设备树双击已拖入记录的点位或点击客户端设备列表等，都可以定位点位，并打开点位的气泡。定位会根据点位记录的位置跳转，当前窗口位置和目标位置有如下几种情况：
  
  • 同一底图
    当前和目标都是矢量图或都是同一个mapId的光栅图。
    切换中心点位目标点位的经纬或相对位置
  • 不同底图
    矢量<->光栅
    二维点位三个数据X、Y、mapId，前两者在矢量图代表经纬度，在光栅图代表相对位置，即以光栅图片中心点为圆心，右方向为x正轴，上方向为y正轴，以图片长宽为刻度的坐标系内的坐标值。mapId在矢量图为空或0，在U3.11版本为1234567890，在光栅图则是底图ID。
    矢量图进入光栅，即进入热区图，管理端是MapManager的changeBaseLayer方法改变底图，重新加载图层和点位，之后切换中心点，后打开该设备气泡。客户端则不同，并没有切换底图，而是新建了id为overMapIframe的iframe载入光栅图，以便光栅、矢量同时存在，处理业务，下文称热区气泡。
    光栅<->光栅
    底图配置不需要更改，只需要切换底图的图片和级别，后切换中心点，打开该设备气泡。
• 状态
  点位状态用不同的点位图标表示。markericon.js管理点位的图标图片路径和图片名称拼凑规则。以下是状态和对应匹配字符：
  
  • 在/离线——online/offline
  • 报警——alarm
  • 选中——select
  • 旁路——bf
• 气泡
  气泡是点位的非常重要的一个应用，点位的详细信息和具体操作会在气泡中展开。
  气泡html由popupoper.js管理构建。
  区域1为标题，显示点位图标和名称；
  区域2为中央大图，显示实时预览图片，点击可以查看放大图，点击右下角刷新按钮可以重新获取实时图片；
  区域3为详细信息，显示点位的名称、编号、类型等信息；
  区域4为设备操作，对应不同类型设备展示不同操作，popupinfo.js的createDevicePopupInfo方法管理其逻辑，在与客户端交互中展开。
  区域5为周边搜索按钮，点击可以切换区域4为搜索功能，搜索周边设备。

安防应用

• 轨迹查询
  根据车牌号和时间段查询行车记录和对应图片，后根据记录描绘轨迹，即描述车辆对应各个卡口点位的时间顺序，记录查询js为itctrack_query.js，车辆分析为caranalyse.js。超图的车辆分析有路网功能，自定义属性文件中findPathUrl属性是其最佳路径引擎。
• GPS应用
  类似于轨迹查询，是实时的支持gps定位的设备的轨迹描绘，需要DSS客户端推送过来，对应interface4ocx.js的realGpsInfo方法，记录查询js为motion_list.js，历史轨迹则是motion_track.js。
• 视频巡更
  新增兴趣组，记录设备列表，并按时间间隔循环列表定位点位和播放视频，favoritydevicespanel.js管理兴趣组组织，favorities_list.js管理通道列表操作。
• 可视域
  可视域有两部分，分别是自行配置的和本身设备拥有的功能，自行配置的设备的可视域在地图加载时跟随点位位置描绘，而本身拥有的可视域则是加载客户端后，客户端通过ocx通知到地图，地图才描绘的。以下是自行配置步骤：
  
  • DSS管理端->基本配置->系统参数->可视域展示->启用
  • DSS管理端->基本配置->设备管理->添加/修改设备->填入安装角度、可视范围、可视距离
  • 地图管理端拖入该点位
  • 地图客户端->工具栏->可视域

与客户端交互

上文多次提及DSS客户端，和地图的客户端有所出入，地图无论管理端、客户端都只是web的页面，而DSS客户端则是C++开发的windows桌面软件，地图的客户端只是DSS客户端的一个功能，DSS客户端用QT、IE内核等构建内嵌浏览器，在该浏览器打开地图客户端，可以利用桌面软件本身的控件与web进行交互，目前是ocx控件。大华的视频码流采用私有协议，需要特定的解码库等才能正常播放，诸如此类有些业务需要DSS客户端实现，有些业务需要地图实现，所以才有了交互。DSS客户端与地图客户端，以下简称客户端与地图。

客户端发送信息给地图

interface4ocx.js管理通知到地图的方法，主要包括设备实时的在/离线等状态的变更、报警、权限变更、GPS实时信息、系统登出、网格追踪中心视频变更等。

地图发送信息给客户端

ocxevent.js管理通知到客户端的方法，基本都是气泡的设备操作按钮的功能，包括打开/关闭视频、回放、录像、报警取消、开/关门、云台控制、网格追踪等。

与admin、itc交互

admin

U3.22的admin是其他项目的入口，管理权限、菜单等，电子地图emap项目的数据都来源于admin，地图数据分为两部分，一是设备树，二是点位信息。

• 设备树
  树(zTree)的API地址为：www.jyvtc.com/dzb/uiFramework/js/zTree-v3.2/api/API_cn.html
  
  • 树来源
    treemanager.js的typeEnum 变量定义了各设备树节点的类型，取自constant.js的TREENODETYPE变量，即设备树编号。
    此编号传入ProxyTreeAction的linkGet方法，根据基本系统配置文件config.properties内serverIp和devTreeAtion属性拼接成设备树数据源URL，对此URL的http短链接获取组织设备树数据，并在前端初始化树。
  • 判断点位是否可拖拽
    treemanager.js的setTreeNodeInfo方法定义，在树的初始化过程中需要判断点位的状态，分为可拖拽（红色）、不可拖拽，若该点位已有坐标值，代表已被拖入地图，则此时状态是不可拖拽，反之则可拖。
    第一步，根据收到的树节点数据，筛选出设备或通道节点；
    第二步，判断当前菜单类型（视频、卡口、报警、门禁等），来决定后台数据接口和参数，若是通道则是DeviceAction的findAllAreaDevices方法，设备目前只支持报警主机，所以是DeviceAction的findAllAreaDevHost，主要参数为设备、通道编号
    第三步，查询接口获取已有经纬度信息的点位数据
    第四步，对比设备列表和已有经纬的列表，将无经纬数据的设备、通道在树上样式变化为红色，代表可拖拽，并把也有经纬的点位在地图中加载。
• 点位信息
  根据基本系统配置serverIp和dssAdminService属性拼接的URL建立名为GisService的WebService，与admin交互，主要是设备、通道、建筑的位置信息查询、修改等。

itc

itc项目在U3.22为P_2016.03.03_Pavo_DSS-U_3.22，编译项目名index，主要作为卡口信息来源，如地图的卡口记录和图片等。通过CarQueryService与itc交互，该url由基本系统配置serverIp和dssItcService属性拼接。

级联

级联配置

DSS管理端->基本配置->级联配置->添加，填入ip和各类端口。

实现分类

• 组织、设备级联
  admin和cms维护这部分级联。
  admin修改本级数据后，通知给cms，cms根据数据库的改动，通知到上级或下级的cms，cms再通知到admin的CascadingAction增删改组织和设备。
• 地图内级联
  地图内级联是通过WebService上下级通知，由admin通知地图EmapAction的noticeBitmapSyncData方法建立级联，对于上级可以有多个下级，而对于下级只能有一个上级，下级变动时往上级推送。
  
  • 级联设计
    由于级联时，上下级项目有可能会重启导致级联失效，所以上级设立了定时器，定时同步上下级，以下为步骤：
    第一步，修改ip则通知旧下级取消关注上级，且取消旧ip定时;
    第二步，取消当前ip定时;
    第三步，若不为删除则新建当前ip定时同步，规避port变动;
    第四步，直接通知新下级关注上级;
    第五步，更新缓存。
  • 级联内容和WebService
    光栅图、图片
    GisBitmapService，其url由基本配置bitmapService和serverIp拼接。
    社会资源
    GisPoiService，其url由基本配置poiService和serverIp拼接。
    区域划分、案件多发区
    GisRegionService，其url由基本配置regionService和serverIp拼接。

DHMap

为地图JsApi

使用方法

页面引入js：

并配置一个js

    //地图配置
    g_mapLoadConfig = {
                //自定义加载js列表，和默认若名称相同，则merge，加载这个列表的
                loadList : {
                        "js":{
                           "a":                 "/cdhmap/b.js"
                        },
                        "css":{
                            "mapPath":          "/cdhmap/map.css"//样式
                        },
                        "twoD":{
                        },
                        "bitmap":{
                        }
                },
                //地图模式
                g_gisMode:"0",
                //若这里配置了地图的引擎和瓦片，则地图源的引擎和瓦片不起效
                //地图引擎
                gisEngine:"amap",
                //地图瓦片地址
                mapUrl:"http://mt{0}.google.cn/vt/lyrs=m@263000000,highlight&hl=zh-CN&gl=CN&src=app&s=Gali&z={1}&x={2}&y={3}",
                //是否是管理端
                isConfig:true,
                //是否加载紧急求助
                isShowEmergency:false,
                //是否显示菜单
                isShowMenu:true,
                menu:{//对菜单CRUD
                    add:[],
                    del:[],//
                    update:[],
                    cover:[]
                    }]
                },
                //是否显示标题栏
                isShowToolBar:true,
                toolBar:{ //对标题栏CRUD
                    add:[],//
                    del:[],//
                    update:[],
                    cover:[]
                    }]
                },
                layer:{//对图层CRUD
                    add:[],
                    del:[],//
                    update:[],
                    cover:[]
                    }]
                },
                //是否显示卫星图切换标示
                isShowSatellite:true,
                //是否显示图层管理器
                isShowLayerControl:true,
                beforeMapLoad:function (){
                    MAP.setMapLoadConfig(g_mapLoadConfig);
                }
        };

使用测试案例可参考P_2016.03.03_Emap_DSS-U_3.22\src\main\webapp\test\mapApi

原理解析

mapApi.js -> mapJsLoader.js 页面加载一个js即拥有地图所有功能（工具包）
载入基线地图所有需要的html元素、js和css

• g_mapLoadConfig.js 支持外部js控制地图加载过程（前期配置）
  
  • loadList替换，允许加载的资源同名合并替换，实现功能替换
  • gisEngine替换，地图模式可以不依赖基线地图源配置，自定义固定百度模式、瓦片地址等
  • menu、toolbar增删显藏，可外部自定义菜单项、工具条、小地图、导航等地图组件加载
  • layer增删，可外部自定义点位图层、矢量图层的获取方法、加载方法、气泡样式、图标、图层管理、大数据、聚散等等效果
• mapInterface.js 地图对外统一接口，供不熟悉地图的前端队伍或子系统开发使用（运行期控制）
  
  • 外部开发只需要知道这个接口，不需要关心地图内部实现，降低学习成本，推动前后端分离
  • 地图内部不使用该方法，保证基线和外部分支地图业务分离，且推动基线发展

FIMap

地图的react化，待续