F1V3.0-图形-地图模块主要对象说明

地图模块在使用过程中，涉及到地图Map、图层Layer、工具箱Toobox、工具条Toolbar、右键菜单ContextMenu以及相关的接口，主要说明如下：

1. 地图Map

通过给定的div，可示例化一个地图对象Map，在Map上可加载图层（瓦片地图、矢量图层）。

1）参数说明

参数名称	参数说明
isSingleLayer	是否单图层模式
isScreenSystem	是否屏幕坐标系
isPanZoomBar	是否添加缩放控件
isScale	是否添加比例尺
isBaseLayerSwitch	是否显示基础地图切换控件
isMousePosition	是否添加鼠标位置坐标信息
isGraphicsZoom	地图缩放时，图元是否自动缩放
graphicsZoomScale	当图元随着地图缩放时，设置图元的缩放比例，即在哪个级别，图元显示原始大小。通常设置为1/Math.pow(2, n)，表示图元在缩放级别为n时显示原始大小。
maxExtent	最大缩放范围
numZoomLevels	缩放级别
maxResolution	最大解析率
projection	投影坐标
isContextMenu	是否添加默认右键菜单
contextMenuType	右键菜单类型。设置为”$f1”表示F1样式的右键菜单
isToolbar	是否添加默认工具条
toolbarType	工具条类型。设置为”$f1”表示F1样式的工具条
isToolBox	是否添加默认的工具箱

2）使用说明

Map对象的初始化方法，其中“gisContainer”为页面上放置地图的div。

var bounds=new OpenLayers.Bounds(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892);
var map = new $F1Map.Map("gisContainer", {isSingleLayer: true,//图层模式，单图层模式isLineAlone: false,//线是否能单独存在isScale:false,//是否显示比例尺isGraphicsZoom: true,//图元是否自动缩放graphicsZoomScale: 1/Math.pow(2, 3),//初始化缩放比例maxExtent: bounds,//最大范围numZoomLevels: 10,//最大缩放级别minResolution:"auto",//最小解析率maxResolution: 10,//最大解析率isContextMenu: true,//是否添加右键菜单contextMenuType: "$f1",//右键菜单类型});

2. 图层Layer

1）图层分类

图层分为背景地图和矢量图层两类。

背景地图
系统支持两种形式的背景地图：瓦片地图以及通过geoserver发布的wms服务。其中瓦片地图可以从全能地图下载器中下载（包括高德、百度、谷歌的离线瓦片），前台通过url路径直接访问瓦片数据。第二种形式是通过geoserver 将矢量数据（shapefile）发布成wms服务，前台直接调用wms服务即可。
矢量地图
系统封装的矢量图层对象为$F1Map.Layer.Vector，初始化矢量图层的主要参数：

参数名称	参数说明
layerType	图层的类型，用于筛选图元
wfsParameters	特定的参数，例如设置母线的图元id，连接点的图元id
initStyle	图层中图形默认的渲染样式
selectStyle	图层中图形选中时的渲染样式
strategies	图层的一系列策略，例如保存策略

2）使用说明

加载背景地图的方法

    //瓦片地图var googleLayer = new $F1Map.Layer.GoogleTile("google_地图","http://localhost:8090/MapTileDownload/googlemaps/roadmap/");//wms服务var osrmLayer = new OpenLayers.Layer.WMS("openstreetmap_地图","http://localhost:8090/geoserver/joinbright/wms",{layers: "wuxi_2016"},{"buffer": 0});//将背景地图添加到map中map.addLayers([googleLayer,osrmLayer]);

初始化一个空白的矢量图层及加载到地图上的方法

var _editLayer = new $F1Map.Layer.Vector(layername,{layerType : layertype, //图层类型isLineAlone:false,//线不能单独存在wfsParameters: {busbarSymbolId:busbarsymbolid, //母线图元的idjoinLineSymbolId: joinlinesymbolid //连接线图元Id},initStyle: initStyle,//自定义样式defaultColor:defaultcolor,//默认的线条颜色initStyleContext:initStyleContext,//自定义样式的上下文selectStyleOptions: {fillOpacity:1,labelAlign:["l"]                 ,fontColor:"white"},//选中样式strategies: [new $F1Map.Strategy.Save({//图层保存策略//是否创建拓扑关系isCreateTopoRel: false,isTip:false})],isBaseLayer: baselayer,//是否可作为背景图层rendererOptions: {zIndexing: false}});map.addLayer(_editLayer );

根据图层id从数据库获取数据并加载到图层上

systemLayer.loadDataFromServer("gisLayer",function(returnLayer,returnInfo){//回调，返回图层的信息if(returnInfo!=null){var layerid=returnInfo.layerId;var databounds=systemLayer.getDataExtent();map.zoomTo(13);}});

3. 工具箱Toolbox

通过给定的div，可示例化一个工具箱对象，选择工具箱中的图元，可以在矢量图层上添加各种图形，系统封装了一个F1样式的工具箱$F1Map.Control.F1CustomToolBox。初始化工具箱的主要参数：

参数名称	参数说明
layerType	图层的类型，用于筛选在工具箱上显示的图元
isCommonSymbolGroup	是否添加通用图元组

初始化工具箱的使用方法如下,其中“toolbox”为页面上放置工具箱的div：

//定义工具箱（工具箱根据当前图层的类型自动切换内容）
toolbox=new $F1Map.Control.F1CustomToolBox("toolbox",map,{layerType:"1800102",isCommonSymbolGroup:false});
toolbox.initToolbox(systemLayer.layerType);

4. 工具条Toolbar

工具条toolbar用来放置工具按钮，系统封装了F1样式的工具条对象$F1Map.Control.F1Panel，示例化一个工具条对象后，可在上面添加各种工具按钮，具体使用如下所示

var toolbar = new $F1Map.Control.F1Panel();
map.addControl(toolbar);

5. 功能控件

系统封装了一系列功能控件，功能控件可以直接示例化为普通对象（例如Assist）调用，也可以示例化为界面上可以操作的控件（例如Toolbar，contextmenu），系统提供的功能控件如下所示

控件名称	控件说明
$F1Map.Control.Alignment	点状图形对齐控件，包括垂直对齐及水平对齐
$F1Map.Control.Assist	辅助控件，封装了一些设置图形样式的方法
$F1Map.Control.BaseLayerSwitch	基础底图切换控件，普通底图与卫星底图切换
f1.gis.JoinBrightMap.Control.CopyFeature	图形复制控件，包括复制、剪切、粘贴方法
f1.gis.JoinBrightMap.Control.DeleteFeature	图形删除控件
f1.gis.JoinBrightMap.Control.DragFeature	图形移动控件
$F1Map.Control.DragLabel	标签移动控件
f1.gis.JoinBrightMap.Control.DrawFeature	图形绘制控件，包括绘制点、线、多边形
$F1Map.Control.DrawImage	图片绘制控件，将指定的图片绘制到地图上
$F1Map.Control.DrawLabel	标签绘制控件
$F1Map.Control.ImportXYPoint	导入XY坐标点到地图图层
$F1Map.Control.LocateFeature	图形定位控件
f1.gis.JoinBrightMap.Control.Measure	测量控件
f1.gis.JoinBrightMap.Control.ModifyFeature	节点编辑控件
$F1Map.Control.ModifyImageFeature	图片编辑控件
$F1Map.Control.Redo	重做控件
$F1Map.Control.Undo	撤销控件
f1.gis.JoinBrightMap.Control.SaveEdit	保存编辑控件
$F1Map.Control.RotateFeature	图形旋转控件
f1.gis.JoinBrightMap.Control.SelectFeature	图形选择控件
$F1Map.Control.Snapping	图形捕捉控件
$F1Map.Control.StartEdit	打开编辑控件
$F1Map.Control.Terminal	图形锚点控件
$F1Map.Control.TopoAnalyse	拓扑分析控件，包括拓扑检查、获取连接设备
$F1Map.Control.OsrmRouting	路径导航控件
$F1Map.Control.GetFeatureBySpatial	空间查询控件
$F1Map.Control.F1ContextMenu	F1样式的右键菜单控件
$F1Map.Control.Toolbar	工具条控件，可在其上添加工具按钮
$F1Map.Control.F1Panel	F1样式的工具条控件，可在其上添加工具按钮
$F1Map.Control.Dialog	弹出对话框控件
$F1Map.Control.Dialog.VoltageLevelDialog	设置图形电压等级对话框
$F1Map.Control.Dialog.FontStyleDialog	设置字体样式对话框
$F1Map.Control.Dialog.ImportCIMEDialog	根据cime文件导入系统图
$F1Map.Control.Dialog.ImportSubstationCIMEDialog	根据cime文件导入站内图
$F1Map.Control.Dialog.ImportFeederCIMEDialog	根据cime文件导入馈线图
$F1Map.Control.LayerInfo	图层左上角提示信息控件
$F1Map.Control.Legend	图层右下角图例信息控件
$F1Map.Control.OverviewGoogleMap	带背景图的鹰眼图控件

6. 功能按钮

为方便二次开发人员使用功能控件，系统将功能控件封装成F1样式的功能按钮，通过按钮的名称可以返回对应的功能按钮，可将功能按钮直接添加到工具条上，系统提供的功能按钮分为两类：通用按钮、编辑相关的按钮。

1）通用功能按钮

按钮名称	按钮说明
navigation	漫游
zoomToMaxExtent	缩放到最大范围
openFile	打开图层列表
layerControl	图层显示控制
boxZoomIn	拉框放大
boxZoomOut	拉框缩小
lineMeasure	距离测量
areaMeasure	面积测量
locatedById	id定位
locatedByName	名称定位
exportSVG	导出svg
importSVG	导入svg
importSystemCime	导入系统图cime
importSubstationCime	导入站内图cime
importFeederCime	导入馈线图cime
checkTopo	检查拓扑
getShortPath	最短路径

2）编辑功能按钮

按钮名称	按钮说明
startEdit	打开编辑
saveEdit	保存编辑
selectFeature	选择图形
deleteFeature	删除图形
drawLabel	绘制文字标注
createLineIntersect	创建线交叉圆弧
rotateFeature	旋转点图形
setFontStyle	设置字体样式
setVoltageLevel	设置电压等级
alignCenterH	垂直对齐
alignCenterV	水平对齐
undo	撤销
redo	重做

其中打开编辑按钮触发后，会自动创建并激活绘制点、线、面、图片、移动、修改节点、捕捉、复制、粘贴控件。
保存编辑按钮触发后，会自动删除绘制点、线、面、图片、移动、修改节点、捕捉、复制、粘贴控件。
3）使用方法
以下步骤说明了如何初始化工具条按钮，并将按钮添加到工具条上:

初始化工具条控件、通用功能按钮、编辑功能按钮

    //定义普通控件集合（非编辑相关）及编辑控件集合var commonButtons=new  f1.gis.JoinBrightMap.F1CommonButtons(map);var editButtons=new f1.gis.JoinBrightMap.F1EditButtons(systemLayer);//定义工具栏var toolbar = new $F1Map.Control.F1Panel();map.addControl(toolbar);    map.toolbar=toolbar;

获取所需的按钮

 //通用控件：漫游、缩放到最大范围、打开图层、名称定位、图层控制var navigationButton=commonButtons.getButton("navigation");var zoomMaxExtentButton=commonButtons.getButton("zoomToMaxExtent");var openFileButton=commonButtons.getButton("openFile");var layerControlButton=commonButtons.getButton("layerControl");var searchButton=commonButtons.getButton("locatedByName");var exprotSvgButton=commonButtons.getButton("exportSVG");//编辑控件：打开编辑、保存编辑、垂直对齐、水平对齐、绘制文字、设置文字样式、删除、撤销、恢复var startEditButton=editButtons.getButton("startEdit");var saveEditButton= editButtons.getButton("saveEdit");var rotateButton= editButtons.getButton("rotateFeature");var alignHButton=editButtons.getButton("alignCenterH");var alignVButton=editButtons.getButton("alignCenterV");var labelButton=editButtons.getButton("drawLabel");var fontStyleButton=editButtons.getButton("setFontStyle");var setVoltageLevelButton=editButtons.getButton("setVoltageLevel");var deleteButton=editButtons.getButton("deleteFeature");deleteButton.setIsDeleteJoinLine(true);var undoButton=editButtons.getButton("undo");var redoButton=editButtons.getButton("redo");

将所使用的编辑按钮添加到编辑集合中（切换矢量图层时需要重置编辑按钮）

var list=[startEditButton,saveEditButton,rotateButton,alignHButton,
alignVButton, labelButton,fontStyleButton,setVoltageLevelButton,
deleteButton,undoButton,redoButton];
editButtons.addToUsedList(list);//设置当前使用的编辑控件

将所有按钮添加到工具条上

toolbar.addControls([navigationButton,zoomMaxExtentButton,layerControlButton,"-",openFileButton,startEditButton,saveEditButton,searchButton,"-",rotateButton,alignHButton,alignVButton,labelButton,fontStyleButton,setVoltageLevelButton,deleteButton,undoButton,redoButton]);

7. 右键菜单ContextMenu

右键菜单分为F1样式的右键菜单（F1Map.Control.F1ContextMenu）及普通右键菜单（F1Map.Control.ContextMenu）两类。实例化一个右键菜单后，可在其上添加右键菜单项。
示例化map对象时，设置isContextMenu及contextMenuType，将自动创建一个F1样式的右键菜单，默认的右键菜单包括：缩放地图、复制、粘贴，同时也可以创建自己的菜单项添加到右键菜单上。具体使用如下所示：

获取系统默认的右键菜单，并设置菜单关联的矢量图层

var contextMenu=map.contextMenuCtrl;
contextMenu.setLayer(systemLayer);//设置关联的矢量图层

右键菜单上添加菜单项

contextMenu.addItem({id: "getFeaturesByCircle"+mapId,text: "根据圆查询"}, function(obj, sender, args){spatialControl.getFeatureByCircle();});

8. 快捷键

系统提供了一系列的快捷键，供编辑过程中使用，包括

Ctrl+C：复制
Ctrl+X：剪切
Ctrl+V：粘贴
Ctrl+Z：重做
Ctrl+Y：撤销
ESC：退出绘制
B：框选
M：修改线节点
S：自动吸附

9. 常用的接口

1）通用设置接口

通用设置接口由辅助控件$F1Map.Control.Assist提供，以下列出了辅助控件中的接口。

接口名	说明
getFeatureStyle(feature)	获取feature的样式
setFeaturesStyle(modifyStyle,features)	设置features的样式
setVoltageStyle (style,features)	设置三卷变的样式（不同电压等级设置不同的颜色）
setFeaturesAttributes (modifyAttributes,features)	设置feature的属性
setSymbolBySubType(features,subtype)	根据子类型设置feature的图元样式
addCircleToLayer (x,y,radius,layer,option)	在图层上根据指定位置及半径添加圆
addFeatureToLayer(x,y,layer,option)	在图层上根据位置及样式添加feature
hideFeature(feature)	隐藏单个feature
hideFeatures(features)	隐藏多个features
showFeature(feature)	显示单个feature
showFeatures(features)	显示多个features

使用说明如下所示：

设置feature的颜色
map.assistCtrl.setFeaturesStyle({strokeColor:”green”},feature);//设置颜色

分别设置变压器三个线圈的颜色

map.assistCtrl.setVoltageStyle({group_1: "green", group_2: "red",group_3: "yellow"},feature);//设置三卷变的颜色

2）业务相关接口
业务相关的接口是在GIS应用中总结抽取出来的业务层面的通用接口，业务接口放在全局js中，可直接调用，主要包括以下方法：

接口名	说明
initLayer(options)	根据参数，直接返回一个矢量图层
setTileError(layer,errorPath)	设置瓦片请求失败时的默认的瓦片
setMapZoomLevel(map,minLevel,maxLevel)	设置地图能缩放的最大最小级别
showFeatureMeter(feature,options)	在已有的图形旁添加一个临时图形（不存库）
hideFeatureMeter(feature)	隐藏临时添加的图形
setLayerStyle(layer,style)	设置图层的样式
setSymbolFontStyle(styleJson)	设置图元显示文字标签时文字标签的样式
setFeatureStartEnd(feature,option)	当feature为线时，设置feature的起始点及起始、中心位置显示的文字标签
showLineArrow(map)	当设置了feature的起始点后，根据起始点在feature上标上箭头表示方向
setCurrentBaseVectorLayer(layer,baselayer)	设置当前的背景地图，以及可以编辑的矢量图层
setLayerVoltageStyleRuler(layer,styleRuler)	设置图形的显示规则
setFeatureVoltageByStyle(layer,voltages)	据style字段中保存的电压等级设置feature的电压等级
setFeatureVoltageByStrokColor(layer,voltages)	根据颜色设置设备的电压等级

使用说明如下所示：

根据参数，初始化一个矢量图层

var systemOption={layertype:"1800102",//图层类型layername:"系统图",//图层名称addarrow:true,//图层中是否可以显示箭头baselayer:true,//是否作为基础背景图层maxFontSize:30,//图层中文字的最大值fontcolor:"#ff00ff",//默认的文字颜色resolutions:resolutions,//自定义的解析率labellength:5,//文字标签一行能显示的最大字符数//能分行显示文字标签的图元labelnewlinesymbol:["C70DED16-3060-0001-9FF8-6AD011B0153A"]};systemLayer =initLayer(systemOption);

根据style字段中保存的电压等级编号设置feature的电压等级

//电压等级列表
var voltages={"0200203":"500","0200210":"15.75","0200202":"750","0200201":"1000","0200207":"66","0200206":"110","0200205":"220","0200204":"330","0200209":"20","0200208":"35","0200211":"13.8","0200212":"10"};
setFeatureVoltageByStyle(systemLayer,voltages);

根据电压等级设置显示规则

var styleRuler={"500":{maxlevel:13,minlevel:9},"220":{maxlevel:14,minlevel:11},"35":{maxlevel:18,minlevel:15}};
setLayerVoltageStyleRuler(systemLayer,styleRuler);

设置图元显示文字标签时文字标签的样式

var symbolStyle={};
var style={"fontSize":"10","fontFamily":"宋体","fontColor":"red","fontStyle":"italic&bold"};
symbolStyle[symbolid]=style;
setSymbolFontStyle(symbolStyle);