地图动态标绘–B/S应用（二）

作者：Sniper

动态标绘广泛应用于电力、通信和应急等多个行业和领域。它可以用形象生动的矢量符号描述各种业务对象，表示各种资源，还可以动态渲染业务进度和流程。

在地图动态标绘–B/S应用（一）这篇博客中我们介绍了在B/S应用中使用SuperMap iServer和SuperMap iClient实现关于动态标绘的数据发布、使用标绘控件和面板以及编辑标号等功能。那么今天我们介绍下标绘态势图保存、加载、上传以及下载的操作。

一、态势图的保存和加载

首先我们需要知道的是，再客户端绘制成功的态势图，可以保存在服务器中，也可以保存在本地。对服务器中态势图的相关操作就是态势图的保存和加载。

首先，我们可以在iServer的动态标绘服务中看到当前服务器保存的态势图，本地服务地址为：
http://iserverihost:8090/iserver/services/plot-jingyong/rest/plot/smlInfos

态势图文件在服务器中的物理存储路径为发布的plot文件同级目录下的SmlFile目录下，即：

打开态势图文件可以看到，实际上态势图文件中存储的是json格式的标绘符号信息，如下：

加载态势图的时候，iClient会读取到态势图中的内容并绘制到地图上。需要注意的是，态势图文件本身不包含坐标信息，其中的坐标值是地图坐标系中的值。暂时不支持投影转换。

那么如何用iClient的代码来实现保存和载入态势图呢？
1、按照上一篇文章中描述的那样，添加标绘图层，添加标绘绘制控件和编辑控件，定义态势标绘总控类，获取获取态势数据管理接口，绘制标绘符号。这里只贴出来定义总控类和获取获取态势数据管理接口的代码，其余代码请参考地图动态标绘–B/S应用（一）。

//总控类
plotting = new SuperMap.Plotting(map, serverUrl);
//获取获取态势数据管理接口
sitManager = plotting.getSitDataManager();

2、保存态势图

sitManager.saveSmlFile();

这里非常简单，就是使用态势数据管理类，调用saveSmlFile方法。但需要注意的是，如果当前服务器中没有保存态势图，则会新建一个名为situationMap的态势图文件。如果服务器中已经有了situationMap，则覆盖。

3、另存态势图

sitManager.saveAsSmlFile("yourSituationMap");

将当前绘制的符号保存到一个名为yourSituationMap的态势图文件中，同样的道理，如果已经存在yourSituationMap，就会覆盖原文件。

4、加载态势图

        //加载态势图
        function loadSimulationMap() {
            function success() {
                var sitDataLayers = sitManager.getSitDataLayers();
                plottingEdits = [];
                drawGraphicObjects = [];
                for (var i = 0; i < sitDataLayers.length; i++) {
                    plottingEdits.push(sitDataLayers[i].plottingEdit);
                    drawGraphicObjects.push(sitDataLayers[i].drawGraphicObject);
                    stylePanel.addEditLayer(sitDataLayers[i]);
                }
                plotPanel.setDrawFeature(drawGraphicObjects[0]);
            }
            function fail() {
                console.log("error");
            }
            var select = document.getElementById("SLT");
            for (var i = 0; i < select.children.length; i++) {
                if (select.children[i].selected) {
	                //打开指定的已发布态势图文件到指定图层，未指定图层则加载到this.activeLayer。
                    sitManager.openSmlFileOnServer(select.children[i].value, success, fail);
                }
            }
        }

这里是创建一个select标签，从标签中获取要加载的态势图名称，然后读取态势图文件，将其中的标绘符号渲染出来。

二、态势图的上传和下载

态势图的下载就是将当前服务器上的态势图文件保存到本地，同时也可以将本地的态势图文件上传到服务器。下载的态势图中的数据结构和服务器中存储的一样，上传的态势图保存在服务器中的相应位置。
下面我们来看一下怎么通过代码来实现上传和下载的操作：

1、下载

//服务地址
var serverUrl = "http://localhost:8090/iserver/services/plot-jingyong/rest/plot/";
//从服务器上获取指定的态势文件的下载地址
var result = sitManager.downloadSmlFileURL(downliadFileName);
//组织url
var downloadUrl = serverUrl + result;
//打开新页面下载
window.open(downloadUrl);

下载下来的态势图如图所示，是一个以态势图名称命名的没有后缀名的文件。

用nodepad++打开该文件可以看到，其中的文件格式和服务器中保存的一样：

2、上传

        function fileFilter(){
	        //上传文件
            var file = document.getElementById('smlFile');
            file.setAttribute("accept",".sml");
        }

这里使用fileupLoad.js来上传文件，fileupLoad.js可以在 iServer目录\iClient\forJavaScript\examples\js中获取。

       //上传态势图文件。
       function uploadSmlFile( ){
           function sucess(){
               getSMLInfos();
            }
            function fail(){
                console.log("todo something if faied");
            }
            
            //要上传到服务器的态势图文件的div的id。
            //成功回调函数
            //失败回掉函数
            sitManager.uploadSmlFile('smlFile', sucess, fail);
        }

上传后的态势图，就可以在iServer的服务页面中看到。

到这里关于态势标绘图的保存、加载、上传、下载的操作已经全部介绍完毕了。那么关于标绘符号的SQL查询、几何查询等功能，我们下一篇再讲~

转载自：https://blog.csdn.net/supermapsupport/article/details/53885477