代码拉取完成，页面将自动刷新
<!--********************************************************************
* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* iclient-plot-leaflet (https://iclient.supermap.io/web/libs/plotting/leaflet/12.0.0.0/iclient-plot-leaflet.min.js)
*********************************************************************-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_plotGOAnimation"></title>
<style type="text/css">
#map {
position: absolute;
left: 250px;
right: 0px;
height: 100%;
}
#plottingPanel {
float: left;
background: #ffffff;
width: 250px;
height: 100%;
border: 1px solid #3473b7;
}
#plottingMenu {
position: absolute;
top: 20%;
z-index: 999999;
border-radius: 4px;
padding-top: 2px;
left: 265px;
color: #000000;
background-color: #fff;
}
</style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary"
style=" position: absolute;top: 15px;right: 20px;text-align: center;z-index: 2000;border-radius: 4px;">
<div class="panel-heading" id="panelheading">
<h5 class="panel-title text-center" data-i18n="resources.title_plotGOAnimation" style=" font-size: 16px;color: #ffffff;"></h5>
</div>
<div class="panel-body content" id="panelbodycontent">
<div class="input-group" style="margin-top:15px; margin-left: 10px; margin-bottom: 10px;">
<select class="search-query form-control" id="SLT" data-i18n="[style]resources.style_plotAnimation"></select>
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_createAnimation" onclick="createAnimation()">
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_play" onclick="play()">
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_pause" onclick="pause()">
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_stop" onclick="stop()">
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_reset" onclick="reset()">
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deleteAnimation" onclick="deleteSelectedFeaturesAnimation()">
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deleteAllAnimation" onclick="deleteAllAnimation()">
</div>
</div>
</div>
<div id="plottingPanel">
<div class="easyui-panel" style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;padding:5px; width: 100%;">
<div class="easyui-tabs" style="width: 100%;height: 100%">
<div id="plotPanel" data-i18n="[title]resources.text_drawPanel" style="overflow: hidden"></div>
<div id="stylePanel" data-i18n="[title]resources.text_attributePanel"></div>
</div>
</div>
</div>
<div id="plottingMenu" class="sticklr">
<li>
<a class="glyphicon plotting-glyphicon-draw-deactivate notArrow"
data-i18n="[title]resources.text_cancelDraw"
onclick="cancelDraw()"></a>
</li>
<li>
<a class="glyphicon plotting-glyphicon-draw-removeAll notArrow"
data-i18n="[title]resources.text_input_value_clear"></a>
<ul>
<li><input type="button" data-i18n="[value]resources.btn_deleteMarker" onclick="deleteSymbol()"
style="width:70px;height: 25px ;margin:0 auto;"/> </li>
<li><input type="button" data-i18n="[value]resources.btn_clearLayers" onclick="clearLayer()"
style="width: 70px;height: 25px ;margin:0 auto;"/></li>
</ul>
</li>
<li>
<a class="glyphicon plotting-lyphicon-save-simulationMap"
data-i18n="[title]resources.text_situationMapOperation"></a>
<ul>
<li><input type="button" data-i18n="[value]resources.btn_saveSimulationMap" onclick="saveSimulationMap()"
style="width:70px;height: 25px ;margin:0 auto;"/> </li>
<li><input type="button" data-i18n="[value]resources.btn_loadSimulationMap" onclick="loadSimulationMap()"
style="width: 70px;height: 25px ;margin:0 auto;"/></li>
</ul>
</li>
</div>
<div id="map"></div>
<script type="text/javascript" include="bootstrap,sticklr,plottingPanel" src="../js/include-web.js"></script>
<script type="text/javascript" include="iclient-plot-leaflet"
src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript" include="PlotPanel,StylePanel"
src="../js/plottingPanel/PlottingPanel.Include.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var url = host + "/iserver/services/map-china/rest/maps/China_4326";
var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
var map;
var item = [resources.text_attrAnimation, resources.text_flickerAnimation, resources.text_growthAnimation, resources.text_revolveAnimation, resources.text_proportionAnimation, resources.text_SHAnimation, resources.text_pathAnimation],
select, animationtype;
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG4326,
center: [35, 104],
maxZoom: 18,
zoom: 7
});
new L.supermap.TiledMapLayer(url).addTo(map);
var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
plottingLayer.spatialAnalystUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
plottingLayer.addTo(map);
var drawControl = L.supermap.plotting.drawControl(plottingLayer);
drawControl.addTo(map);
var editControl = L.supermap.plotting.editControl();
editControl.addTo(map);
L.supermap.plotting.initPlotPanel("plotPanel", serverUrl, drawControl);
L.supermap.plotting.initStylePanel("stylePanel", serverUrl, editControl);
var plotting = L.supermap.plotting.getControl(map, serverUrl);
var goAnimationManager = plotting.getGOAnimationManager();
window.setInterval("execute()", 100);
initHtml();
loadSmlAndAnimation();
function initHtml(){
select = document.getElementById("SLT");
for (var i = 0, len = item.length; i < len; i++) {
var options = document.createElement("option");
options.setAttribute("value", item[i]);
options.innerHTML = item[i];
select.appendChild(options);
}
}
function loadSmlAndAnimation(){
$.getJSON("../data/ZaoYiHuiZhan_Sml.json",function(sitData){
plotting.getSitDataManager().openSmlData(sitData, true);
plottingLayer = plotting.getSitDataManager().getSitDataLayers()[0];
drawControl.setDrawingLayer(plottingLayer);
$.getJSON("../data/ZaoYiHuiZhan_Animation.json",function(animationJsonData){
goAnimationManager.fromJSONData(animationJsonData);
});
});
}
//保存态势图
function saveSimulationMap() {
cancelDraw();
plotting.getSitDataManager().saveAsSmlFile("situationMap");
}
function loadSimulationMap() {
plotting.getSitDataManager().openSmlFileOnServer("situationMap", function (evt) {
drawControl.setDrawingLayer(evt.sitDataLayers[0]);
});
}
//取消标绘
function cancelDraw() {
drawControl.handler.disable();
}
//删除选中标号
function deleteSymbol() {
editControl.deleteSelectedFeatures();
}
//清空绘制
function clearLayer() {
cancelDraw();
for (var i = 0; i < map.getPlottingLayers().length; i++) {
map.getPlottingLayers()[i].removeAllFeatures();
}
}
//播放动画
function play() {
if (null === goAnimationManager.goAnimations) {
return;
}
for (var i = 0; i < goAnimationManager.goAnimations.length; i++) {
goAnimationManager.goAnimations[i].play();
}
}
//暂停
function pause() {
if (null === goAnimationManager.goAnimations) {
return;
}
for (var i = 0; i < goAnimationManager.goAnimations.length; i++) {
goAnimationManager.goAnimations[i].pause();
}
}
//停止
function stop() {
if (null === goAnimationManager.goAnimations) {
return;
}
for (var i = 0; i < goAnimationManager.goAnimations.length; i++) {
goAnimationManager.goAnimations[i].stop();
}
}
//复位
function reset() {
if (null === goAnimationManager.goAnimations) {
return;
}
for (var i = 0; i < goAnimationManager.goAnimations.length; i++) {
goAnimationManager.goAnimations[i].reset();
}
}
function execute() {
goAnimationManager.execute();
}
function deleteSelectedFeaturesAnimation() {
if (null === goAnimationManager.goAnimations) {
return;
}
if (0 === editControl.getSelectedFeatures().length) {
return;
}
var selectFeature = editControl.getSelectedFeatures()[0];
var animations = goAnimationManager.findGOAnimationsByFeature(selectFeature);
for (var i = 0; i < animations.length; i++) {
goAnimationManager.removeGOAnimation(animations[i]);
}
}
function deleteAllAnimation() {
if (null === goAnimationManager.goAnimations) {
return;
}
goAnimationManager.reset();
goAnimationManager.removeAllGOAnimation();
}
//创建动画
function createAnimation() {
if (0 === editControl.getSelectedFeatures().length) {
return;
}
var obj = selectAnimationType();
var feature = editControl.getSelectedFeatures()[0];
var goAnimationNameUUid = SuperMap.Plot.PlottingUtil.generateUuid();
var goAnimationName = obj.selectValue + goAnimationNameUUid;
var goAnimation = goAnimationManager.createGOAnimation(obj.animationType, goAnimationName, feature);
switch (goAnimation.getGOAnimationType()) {
case SuperMap.Plot.GOAnimationType.ANIMATION_ATTRIBUTE:
{//属性动画
// goAnimation.startTime=0;//开始时间
// goAnimation.duration=5;//间隔时间
//goAnimation.repeat = true;//重复播放
goAnimation.lineColorAnimation = true;//线色动画
goAnimation.startLineColor = "#ff0000";//开始线色
goAnimation.endLineColor = "#1a1817";//结束线色
goAnimation.lineWidthAnimation = true;//线宽动画
goAnimation.startLineWidth = 1;//开始线宽
goAnimation.endLineWidth = 5;//结束线宽
goAnimation.surroundLineColorAnimation = true;//衬线动画
goAnimation.startSurroundLineColor = "#ffff00";//开始衬线色
goAnimation.endSurroundLineColor = "#009933";//结束衬线色
goAnimation.surroundLineWidthAnimation = true;//衬线宽
goAnimation.startSurroundLineWidth = 2;//开始衬线宽
goAnimation.endSurroundLineWidth = 4;//结束衬线宽
break;
}
case SuperMap.Plot.GOAnimationType.ANIMATION_BLINK:
{//闪烁动画
// goAnimation.startTime = 5;
// goAnimation.duration = 5;
//goAnimation.repeat = true;//重复播放
//闪烁类型：次数闪烁
goAnimation.blinkStyle = SuperMap.Plot.BlinkAnimationBlinkStyle.Blink_Number;
goAnimation.blinkNumber = 5;//闪烁次数
//闪烁类型：频率闪烁
//goAnimation.blinkStyle = SuperMap.Plot.BlinkAnimationBlinkStyle.Blink_Frequency;
//goAnimation.blinkInterval = 500;//闪烁频率
//闪烁颜色交替类型:无颜色交替
//goAnimation.replaceStyle = SuperMap.Plot.BlinkAnimationReplaceStyle.Replace_NoColor;
//闪烁颜色交替类型：有颜色交替
goAnimation.replaceStyle = SuperMap.Plot.BlinkAnimationReplaceStyle.Replace_Color;
goAnimation.startColor = "#00ff00";
goAnimation.endColor = "#ff0000";
break;
}
case SuperMap.Plot.GOAnimationType.ANIMATION_GROW:
{//生长动画
// goAnimation.startTime =10;
// goAnimation.duration = 5;
//goAnimation.repeat = true;
goAnimation.startScale = 0;
goAnimation.endScale = 1;
break;
}
case SuperMap.Plot.GOAnimationType.ANIMATION_ROTATE:
{//旋转动画
// goAnimation.startTime = 15;
// goAnimation.duration = 5;
//goAnimation.repeat = true;
goAnimation.rotateDirection = SuperMap.Plot.RotateDirection.AntiClockWise;//逆时针旋转
//goAnimation.rotateDirection = SuperMap.Plot.RotateDirection.ClockWise;//顺时针旋转
goAnimation.startAngle = 0;
goAnimation.endAngle = 90;
break;
}
case SuperMap.Plot.GOAnimationType.ANIMATION_SCALE:
{//比例动画
// goAnimation.startTime = 20;
// goAnimation.duration = 5;
//goAnimation.repeat = true;
goAnimation.startScale = 1;
goAnimation.endScale = 2;
break;
}
case SuperMap.Plot.GOAnimationType.ANIMATION_SHOW:
{//显隐动画
// goAnimation.startTime=25;//开始时间
// goAnimation.duration=5;//间隔时间
//goAnimation.repeat = true;//重复播放
goAnimation.finalDisplay = true;
goAnimation.showEffect = true;
break;
}
case SuperMap.Plot.GOAnimationType.ANIMATION_WAY:
{//路径动画
// goAnimation.startTime = 30;//开始时间
// goAnimation.duration = 5;//间隔时间
//goAnimation.repeat = true;//是否重复播放
var arypts = [];
var pt = L.latLng(44, 88);
var pt1 = L.latLng(30, 91);
var pt2 = L.latLng(37, 102);
var pt3 = L.latLng(30, 106);
var pt4 = L.latLng(34, 109);
var pt5 = L.latLng(35, 114);
var pt6 = L.latLng(40, 116);
arypts.push(pt);
arypts.push(pt1);
arypts.push(pt2);
arypts.push(pt3);
arypts.push(pt4);
arypts.push(pt5);
arypts.push(pt6);
goAnimation.setWayPoints(arypts);
//路径类型：折线类型
goAnimation.pathType = SuperMap.Plot.WayPathType.POLYLINE;
//路径类型：曲线路径
//goAnimation.pathType=SuperMap.Plot.WayPathType.CURVE;
goAnimation.pathColor = "#005eff";
goAnimation.pathWidth = 3;
//是否是切线方向
goAnimation.tangentDirection = true;
goAnimation.setShowPath(true);
break;
}
}
}
function selectAnimationType() {
var select = document.getElementById("SLT");
var type;
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].selected) {
type = select.children[i].value;
}
}
//item=["属性动画","闪烁动画","生长动画","旋转动画","比例动画","显隐动画","路径动画"]
if (type === item[0]) {
animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_ATTRIBUTE;
}
else if (type === item[1]) {
animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_BLINK;
}
else if (type === item[2]) {
animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_GROW;
}
else if (type === item[3]) {
animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_ROTATE;
}
else if (type === item[4]) {
animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_SCALE;
}
else if (type === item[5]) {
animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_SHOW;
}
else if (type === item[6]) {
animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_WAY;
}
var obj = new Object();
obj.selectValue = type;
obj.animationType = animationtype;
return obj;
}
$(document).ready(function(){
$('#panelheading').click(function(){
$('#panelbodycontent').toggle();
});
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手