作者：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目录iClientorJavaScriptexamplesjs中获取。
//上传态势图文件。
function uploadSmlFile( ){
function sucess(){
getSMLInfos();
}
function fail(){
console.log("todo something if faied");
}
//要上传到服务器的态势图文件的div的id。
//成功回调函数
//失败回掉函数
sitManager.uploadSmlFile('smlFile', sucess, fail);
}
上传后的态势图，就可以在iServer的服务页面中看到。
到这里关于态势标绘图的保存、加载、上传、下载的操作已经全部介绍完毕了。那么关于标绘符号的SQL查询、几何查询等功能，我们下一篇再讲~
网友评论