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, //母线图元的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.F1ContextMenuF1样式的右键菜单控件
$F1Map.Control.Toolbar工具条控件,可在其上添加工具按钮
$F1Map.Control.F1PanelF1样式的工具条控件,可在其上添加工具按钮
$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面积测量
locatedByIdid定位
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);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值