SuperMap iClient3D for WebGL动态标绘动画上传与下载

最新推荐文章于 2024-06-13 15:59:53 发布
最新推荐文章于 2024-06-13 15:59:53 发布
阅读量1k 收藏 1
点赞数
分类专栏： 三维GIS
本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com
本文链接：https://blog.csdn.net/supermapsupport/article/details/110955286
版权

作者：kele

一、前言

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

二、数据准备

1.在webgl中使用动态标绘，首先需要通过iserver发布动态标绘服务
1).在iDesktop桌面软件安装目录下中找到JY.plot标绘文件
在这里插入图片描述
2).通过iserver发布动态标绘服务，选择JY.plot标绘文件
在这里插入图片描述
3).发布成功后，点进标绘服务，前端上传的态势图及动画都会存储到smllnfos节点下
在这里插入图片描述
2.接口介绍
一个完整的动画是由标绘符号（态势图）和动画过程组成，在动态标绘总控类中，动画对象和态势图对象是分开的，所以我们需要使用动画管理器对象和态势图管理器对象来共同实现动画的上传与下载
在这里插入图片描述

三、实现过程

1.创建标绘对象

serverUrl = 'http://localhost:8090/iserver/services/plot-JY/rest/plot';
plotting = cesium.Plotting.getInstance(serverUrl, scene);
plotEditControl = new cesium.PlotEditControl(scene, plottingLayer);//编辑控件
plotEditControl.activate();
animationManager = plotting.getGOAnimationManager();               //动画管理对象
sitDataManager = plotting.getSitDataManager();                     //态势图管理对象

2.创建动画，动画包括标绘符号（态势图）和动画过程

function creatAnimation() {
    var geoJGSZ = null,geoTFXS = null,geoLJXS = null,geoTFXS2 = null,geoZYSS = null,geoLJZY = null,geoZYSS2 = null,geoJC = null,geoSJ = null,geoLJJL = null,geoJGJL = null;
    var pointsJGSZ = [];
    pointsJGSZ[0] = new cesium.PlotPoint3D(13.0486416724835, 47.827217402435, 0);
    pointsJGSZ[1] = new cesium.PlotPoint3D(13.0484530291208, 47.8273069046719, 0);
    pointsJGSZ[2] = new cesium.PlotPoint3D(13.0498576145008, 47.8282734633643, 0);
    pointsJGSZ[3] = new cesium.PlotPoint3D(13.0513393769035, 47.8287206684327, 0);
    pointsJGSZ = MoveSymbol(pointsJGSZ);
    plottingLayer.createSymbol(22, 1004, pointsJGSZ, function (even) {
        geoJGSZ = even.feature;
        var goAnimationJGSZ = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_GROW, "JGSZ", geoJGSZ);//进攻警力生长动画
        goAnimationJGSZ.startTime = 0;//动画开始时间
        goAnimationJGSZ.duration = 5;//动画播放时长
    });
    var pointsTFXS = [];
    pointsTFXS[0] = new cesium.PlotPoint3D(13.0523705219875, 47.828610443775, 0);
    pointsTFXS[1] = new cesium.PlotPoint3D(13.0528881926318, 47.8282317961645, 0);
    pointsTFXS = MoveSymbol(pointsTFXS);
    plottingLayer.createSymbol(22, 1003, pointsTFXS, function (even) {
        geoTFXS = even.feature;
        geoTFXS.symbolStyle.lineColor = {red: 1, green: 1, blue: 0, alpha: 1};//"#ffff00"
        var goAnimationTFXS = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_SHOW, "TFXS1", geoTFXS);//逃犯显隐动画
        goAnimationTFXS.showEffect = false;//是否有显隐特效
        goAnimationTFXS.finalDisplay = true; //最终显示状态，默认不显示
        goAnimationTFXS.startTime = 0;
        goAnimationTFXS.duration = 6;
        var goAnimationTFXS1 = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_GROW, "TFSZ1", geoTFXS);//逃犯生长动画
        goAnimationTFXS1.startTime = 5;
        goAnimationTFXS1.duration = 6;
        goAnimationTFXS1.startScale = 1;//生长动画开始比例
        goAnimationTFXS1.endScale = 0;//生长动画结束比例
    });

    var pointsLJXS = [];
    pointsLJXS[0] = new cesium.PlotPoint3D(13.0534667673921, 47.8270362098687, 0);
    pointsLJXS[1] = new cesium.PlotPoint3D(13.0538011154244, 47.827160636473, 0);
    pointsLJXS[2] = new cesium.PlotPoint3D(13.0536234845445, 47.8277084980454, 0);
    pointsLJXS[3] = new cesium.PlotPoint3D(13.0527838234958, 47.8283098940719, 0);
    pointsLJXS = MoveSymbol(pointsLJXS);
    plottingLayer.createSymbol(421, 311, pointsLJXS, function (even) {
        geoLJXS = even.feature;
        var goAnimationLJXZ = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_SHOW, "LJXZ", geoLJXS);//拦截警力显隐动画
        goAnimationLJXZ.showEffect = false;
        goAnimationLJXZ.finalDisplay = true;
        goAnimationLJXZ.startTime = 0;
        goAnimationLJXZ.duration = 6;
        var goAnimationLJXZ1 = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_GROW, "LJXZ1", geoLJXS);//拦截警力生长动画
        goAnimationLJXZ1.startTime = 5;
        goAnimationLJXZ1.duration = 6;
    });
    var pointsTFXS2 = [];
    pointsTFXS2[0] = new cesium.PlotPoint3D(13.0523210258708, 47.8288491462176, 0);
    pointsTFXS2[1] = new cesium.PlotPoint3D(13.0529279851615, 47.8293174019239, 0);
    pointsTFXS2 = MoveSymbol(pointsTFXS2);
    plottingLayer.createSymbol(22, 1003, pointsTFXS2, function (even) {
        geoTFXS2 = even.feature;
        geoTFXS2._symbolStyle._lineColor = {red: 1, green: 1, blue: 0, alpha: 1};//"#ffff00"
        var goAnimationTFXS2 = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_SHOW, "TFXS2", geoTFXS2);//逃犯显隐动画
        goAnimationTFXS2.showEffect = false;
        goAnimationTFXS2.finalDisplay = true;
        goAnimationTFXS2.startTime = 0;
        goAnimationTFXS2.duration = 12;
        var goAnimationTFSZ2 = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_GROW, "TFSZ2", geoTFXS2);//逃犯生长动画
        goAnimationTFSZ2.startTime = 11;
        goAnimationTFSZ2.duration = 3;
        goAnimationTFSZ2.startScale = 0;
        goAnimationTFSZ2.endScale = 1;
    });
    var pointsZYSS = [];
    pointsZYSS[0] = new cesium.PlotPoint3D(13.0542650683879, 47.8287131454005, 0);
    pointsZYSS = MoveSymbol(pointsZYSS);
    plottingLayer.createSymbol(421, 80101, pointsZYSS, function (even) {
        geoZYSS = even.feature;
        geoZYSS.textContent = "支援警力";
        var goAnimationZYSS = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_BLINK, "ZYSS", geoZYSS);//支援警力闪烁动画
        goAnimationZYSS.blinkStyle = cesium.BlinkAnimationBlinkStyle.Blink_Frequency;//闪烁类型，频率闪烁
        goAnimationZYSS.replaceStyle = cesium.BlinkAnimationReplaceStyle.Replace_Color;//颜色交替类型
        goAnimationZYSS.startColor = {red:0,green:0,blue:1,alpha:1}; //开始颜色，默认为蓝色
        goAnimationZYSS.endColor =  {red:1,green:0,blue:0,alpha:1}; //结束颜色，默认为红色
        goAnimationZYSS.startTime = 14;
        goAnimationZYSS.duration = 3;
    });
    var pointsLJZY = [];
    pointsLJZY[0] = new cesium.PlotPoint3D(13.0532740180585, 47.829706145191, 0);
    pointsLJZY = MoveSymbol(pointsLJZY);
    plottingLayer.createSymbol(421, 80202, pointsLJZY, function (even) {
        geoLJZY = even.feature;
        geoLJZY.textContent = "拦截车";

        var goAnimationJGZY = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_BLINK, "JGZY", geoLJZY);//拦截车闪烁动画
        goAnimationJGZY.blinkStyle = cesium.BlinkAnimationBlinkStyle.Blink_Frequency;
        goAnimationJGZY.replaceStyle = cesium.BlinkAnimationReplaceStyle.Replace_Color;
        goAnimationJGZY.startTime = 14;
        goAnimationJGZY.duration = 3;
    });
    var pointsZYSS2 = [];
    pointsZYSS2[0] = new cesium.PlotPoint3D(13.0520708307129, 47.8299387619131, 0);
    pointsZYSS2 = MoveSymbol(pointsZYSS2);
    plottingLayer.createSymbol(421, 80101, pointsZYSS2, function (even) {
        geoZYSS2 = even.feature;
        geoZYSS2.textContent = "支援警力";

        var goAnimationZYSS2 = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_BLINK, "ZYSS2", geoZYSS2);//支援警力闪烁动画
        goAnimationZYSS2.blinkStyle = cesium.BlinkAnimationBlinkStyle.Blink_Frequency;
        goAnimationZYSS2.replaceStyle = cesium.BlinkAnimationReplaceStyle.Replace_Color;
        goAnimationZYSS2.startTime = 14;
        goAnimationZYSS2.duration = 3;
    });
    var pointsJC = [];
    pointsJC[0] = new cesium.PlotPoint3D(13.0523196095789, 47.8276819225323, 0);
    pointsJC = MoveSymbol(pointsJC);
    plottingLayer.createSymbol(421, 50, pointsJC, function (even) {
        geoJC = even.feature;
        geoJC.symbolStyle.surroundLineType = 1;//衬线
        geoJC.textContent = "路卡";
        var goAnimationJC = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_SCALE, "JC", geoJC);
        goAnimationJC.startTime = 0;
        goAnimationJC.duration = 3;
    });
    var pointsSJ = [];
    pointsSJ[0] = new cesium.PlotPoint3D(13.0522206845731, 47.8287075057692, 0);
    pointsSJ = MoveSymbol(pointsSJ);
    plottingLayer.createSymbol(421, 20100, pointsSJ, function (even) {
        geoSJ = even.feature;
        geoSJ.symbolStyle.lineColor = {red: 1, green: 1, blue: 0, alpha: 1};//"#ffff00"
        geoSJ.textContent = "事件";
    });
    var pointsLJJL = [];
    pointsLJJL[0] = new cesium.PlotPoint3D(13.053414647609, 47.8268751538344, 0);
    pointsLJJL = MoveSymbol(pointsLJJL);
    plottingLayer.createSymbol(421, 9, pointsLJJL, function (even) {
        geoLJJL = even.feature;
        geoLJJL.textContent = "拦截警力";
    });
    var pointsJGJL = [];
    pointsJGJL[0] = new cesium.PlotPoint3D(13.0485470948225, 47.8271255667932, 0);
    pointsJGJL = MoveSymbol(pointsJGJL);
    plottingLayer.createSymbol(421, 9, pointsJGJL, function (even) {
        geoJGJL = even.feature;
        geoJGJL.textContent = "进攻警力";
    });
}

在这里插入图片描述
3.将创建好的态势图及动画上传到iServer

//上传动画
animationManager.saveEvoFile("dh01", true)
//上传态势图
sitDataManager.saveSmlFile();

上传之后，在动态标绘服务中会生成对应文件
在这里插入图片描述
4.下载态势图及动画

//下载态势图
function clickTreeNode(clickSmlFileName) {
    var result = sitDataManager.downloadSmlFileUrl(clickSmlFileName);
    document.getElementById("downloadUrl").value = serverUrl + result;
    document.getElementById("smlFileName").value = clickSmlFileName;
    sitDataManager.openSmlFileOnServer(clickSmlFileName);
}
//下载动画
animationManager.openEvoFileOnServer("dh01")

在这里插入图片描述
刷新页面后，从iServer中下载态势图和动画，点击播放即可展示完整动画。
demo下载地址：https://pan.baidu.com/s/1EmW_-XmpDUZpjIV_znkA4Q
提取码：rv8i

supermapsupport
关注
专栏目录
vue2 集成 - 超图 - SuperMap iClient3D for WebGL 及常用方法
King Saj
11-06 918
vue2 集成 SuperMap3D 方案，对 SuperMap3D 常用方法进行汇总。
SuperMap iMobile for Android态势标绘符号的绘制与编辑
12-08
本范例提供了态势标绘功能，提供点符号及箭头符号的标绘。 通过这些标绘符号，可以快速的进行调度或指挥信息的表达，同时，也支持对这些标绘符号进行编辑，实现更丰富的表达信息。
SuperMap iObject .NET 场景中用鼠标点击进行动态标绘
12-13
加载态势标绘符号资源，在三维场景中用鼠标标绘对象。
SuperMap桌面动态标绘_二维点标号不显示及三维标绘绘制和编辑刷新后才能显示的问题
u010182811的专栏
01-16 1543
1月初，超图发布了新的产品，习惯性的下载新产品包并进行动态标绘的相关操作。但是在操作中发现两个小问题，问题虽小，自己还是掉了进去。。。 （1）.NET桌面二维标绘，若出现绘制的点标号不显示的情况，可通过下面的方法解决。 在地图上右键，选择【地图属性】，选择【压盖设置】，选择【点随标签显隐】与【显示被点压盖的点】即可。    （2）.NET三维标绘，点标号，绘制后需要刷新才能显示，且点标号鼠...
SuperMap iClient3D for WebGL 多源数据加载篇—常用汇总
最新发布
CX_Chan的博客
06-13 1135
最近小编整理了SuperMap iClient3D for WebGL常见的多源数据加载方式和示例代码，供大家参考。本文章适用于稍微有基础的同学。
SuperMap iClient3D for WebGL教程（模型篇）-S3M/GLTF制作-附件资源
03-05
SuperMap iClient3D for WebGL教程（模型篇）-S3M/GLTF制作-附件资源
基于SuperMap iClient for JavaScript和SuperMap iClient for 3D二三维一体化SQL查询
12-14
文件"基于SuperMap iClient for JavaScript和SuperMap iClient for 3D的二三维一体化标绘"可能包含了实现这一功能的示例代码、样例数据或者说明文档，可以帮助开发者理解并实践这个过程。学习和掌握这种技术，不仅...
SuperMap iClient3D for WebGL 吊机模型文件
11-08
吊机模型文件 .gltf 文件 ，超图 - SuperMap iClient3D for WebGL 及常用方法案例相关模型文件
地图动态标绘--C/S应用
SuperMap技术控
09-29 5714
* 作者：小诗 * 动态标绘广泛应用于电力、通信和应急等多个行业和领域。它可以用形象生动的矢量符号描述各种业务对象，表示各种资源，还可以动态渲染业务进度和流程。SuperMap iObjects.net产品提供了一套完整的态势推演解决方案，我们来具体看看如何能够在动态标绘产品基础上轻松完成二次开发和态势推演展现。
通过鼠标进行二维标绘并对标绘对象创建生长动画（支持多个生长动画）
12-15
通过鼠标进行二维标绘，选择创建好的标绘对象创建生长动画，支持多个生长动画同时进行。
三维标绘以及创建动画
12-07
本范例简单演示了三维标绘（不通过鼠标来绘制符号）以及创建动画功能。
ArcGIS for JavaScript 动态标绘燕尾箭头
12-21
ArcGIS for JavaScript 动态标绘燕尾箭头，需要放到web服务器上才能看到效果
GISpace动态标绘演示系统1.4源码
08-31
GISpace动态标绘演示系统1.4版本，主要增加对标绘文本标注的支持。同时更新序列化和反序列化功能，支持文本标注的保存及打开。
SuperMap iClient3D for WebGL扩展开发教程——动态棱锥标注
SuperMap技术控
11-22 722
作者：桔子 本文同步发布于https://www.jianshu.com/p/99e0f83f1352 最近有客户咨询是否能实现如下的动态标注效果，下面来看下如何实现。 1、棱锥实现 从截图可以看到，这里对象是棱锥，但是在Cesium的Enity对象中，并没有直接的棱锥对象可以使用，这里有两个思路去解决。 （1）通过primitive去绘制，需要自己构建棱锥的每一个顶点坐标、索引、位置矩阵，以及shader等等。从表面看这种方式比较直接，但是开发解决WebGL底层，需要大量的基础支持和计算，不是特别理.
GIS前端-地图标绘与动画
leva的博客
09-15 381
监听鼠标双击事件，当双击地图时，完成图形的绘制功能。在Leaflet中，图形绘制的基类为L.Path，从该基类中派生出了多个子类，用于基本图形的绘制，包括L.Polyline、L.Polygon、L.Rectangle、L.Circle等。（4）在脚本函数drawGraphic()中实现几何图形的绘制功能，通过options设置所绘制的几何图形的参数，如边线颜色、透明度等。形绘制功能，即在地图容器中绘制几何图形，包括点、线、圆、矩形与多边形等，既可以通过鼠标交互绘制，也可以直接添加进程序中绘制好的图形。
地图动态标绘--B/S应用（一）
SuperMap技术控
12-13 9103
动态标绘广泛应用于电力、通信和应急等多个行业和领域。它可以用形象生动的矢量符号描述各种业务对象，表示各种资源，还可以动态渲染业务进度和流程。 在前篇地图动态标绘一我们讲了动态标绘的基本构成及在C/S应用上的使用方法，今天我们着重介绍下iServer下的的动态标绘服务以及如何用iClient for javascript 开发动态标绘的B/S应用。开始前的准备SuperMap iClient for
基于Cesium的军事标绘，支持淡入淡出、生长动画
ethan_zf的博客
03-27 1158
基于Cesium的军事标绘，支持淡入淡出、生长动画
SuperMap iClient3D for WebGL扩展开发教程——圆形旋转广告牌
SuperMap技术控
11-22 775
作者：桔子 本文同步更新于https://www.jianshu.com/p/f1fb234e65b6 在这个效果图中，还有另外一个比较有意思的效果，圆形的旋转广告牌，这一级来实现该效果。 1、效果分析 在该效果中，可以将效果进行拆分，主要有一下两个难点： （1）侧面贴图，基于之前的经验可以选择wall对象进行实现。 （2）旋转效果，该效果可以有两个想法，一个是通过设置对象的orientation进行实现，类似前面实现的雷达扫描效果，另外一个想法就是通过改变wall的节点顺序，基于这两个想法，下面来做.
SuperMap iClient3D for WebGL 使用说明
weixin_46631365的博客
09-04 911
最近由于公司需要用的superMap相关的技术，本人之前也从未接触过这方面的东西，也是从零开始，边做边学。下面简单对本次项目进行一个技术总结，希望对各位没有经验的人有所帮助。SuperMap iClient3D for WebGL 官方文档。
supermap iclient3d for webgl教程
06-28
SuperMap iClient3D for WebGL的开发需要先配置开发环境，包括安装Node.js、下载安装SuperMap iServer、下载安装SuperMap iClient3D资源包、创建Web应用程序。 二、基本概念 在学习SuperMap iClient3D for WebGL...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值