地图模块在使用过程中,涉及到地图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, //母线图元的id
joinLineSymbolId: 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);