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化,待续

你可能感兴趣的:(webgis)