supermap的IClientForJavaScript实现的车辆历史行动轨时序显示功能

最新推荐文章于 2023-10-31 09:15:44 发布

大饼卷馒头蘸米饭

最新推荐文章于 2023-10-31 09:15:44 发布

阅读量8.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： SuperMap IClient

本文链接：https://blog.youkuaiyun.com/majian_1987/article/details/8561855

SuperMap IClient 专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何利用SuperMap iClient for JavaScript库来创建地图，并展示车辆的历史行动轨迹。通过创建点和线矢量图层，动态更新坐标以模拟车辆移动，实现了地图上的轨迹回放功能。用户可以通过开始和取消按钮控制轨迹的播放和停止。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ include file="/html/common/taglibs.jsp"%>
<%@ include file="/html/common/meta.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="${ctx}/css/map.css" />
<style>
.toolbar {
width: auto;
height: 30px;
position: absolute;
z-index: 1;
right: 50px;
top: 10px;
border: 0px;
}
</style>
<script src="${ctx}/js/supermap/libs/SuperMap.Include.js"></script>
<script type="text/javascript">
var map; //地图对象
var layer; //图层
var vectorLayer; //
var select; //选择点
var popup = new SuperMap.Popup.FramedCloud(); //气泡
var level = 3; //地图初始化时显示级别
var lng = 122;
var lat = 23;
var name = "test";
var iservername = "World";
var iserverurl = "http://172.16.113.13:8090/iserver/services/map-world/rest/maps/World";
var pope;

function initMap() {
//创建地图对象
map = new SuperMap.Map("map", {
controls : [
new SuperMap.Control.PanZoomBar(),
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.OverviewMap(),
new SuperMap.Control.Navigation({
dragPanOptions : {
enableKinetic : true
}
}) ]
});

layer = new SuperMap.Layer.TiledDynamicRESTLayer(iservername, iserverurl, null, {maxResolution : "auto"});

layer.events.on({
"layerInitialized" : addLayer
});

vectorLayer = new SuperMap.Layer.Vector();
select = new SuperMap.Control.SelectFeature(vectorLayer, {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect,repeat : true});
map.addControl(select);
select.activate();
}

function onFeatureSelect(feature){
//map.removePopup(pope);
pope = new SuperMap.Popup("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new SuperMap.Size(200,200),
"example popup",
true);
pope.closeOnMove = true;
map.addPopup(pope);

}

function onFeatureUnselect(feature){
//alert(2);
}

//map对象加载layer
function addLayer() {
map.addLayers([layer,vectorLayer]);
map.setCenter(new SuperMap.LonLat(lng, lat), level);
addFeature();
}

function addFeature(){
var point = new SuperMap.Geometry.Point(lng,lat);
var pointVector = new SuperMap.Feature.Vector(point,{name:name});
pointVector.style = {fillColor: "red",strokeColor: "yellow",pointRadius:6};
vectorLayer.addFeatures(pointVector);
}

var idInt;
var l1=110;
var l2=11;
var lastPoint;
var index = 0;
function begin(){
index = 0;
lastPoint = undefined;
l1=110;
l2=11;

idInt = setInterval(function(){
l1 = l1 + Math.random();
l2 = l2 + Math.random();
var point1 = new SuperMap.Geometry.Point(l1,l2);

var pointVector1 = new SuperMap.Feature.Vector(point1,
{
id:"1",
tabName:"ma",
name:"supermap"
}
);
vectorLayer.addFeatures(pointVector1);

if(lastPoint != undefined){
//新建线矢量图层
var lineLayer = new SuperMap.Geometry.LineString([lastPoint,point1]);
var lineVector = new SuperMap.Feature.Vector(lineLayer,{name:name});
lineVector.style = {fillColor: "red",strokeColor: "yellow",pointRadius:6};
vectorLayer.addFeatures(lineVector);
}

lastPoint = point1;

if(index == 13){
$.messager.show({title:'操作提示',msg:'救援队行动轨迹加载展现完成！',showType:'show'});
clearInterval(idInt);
}else{
index = index + 1;
}
},700);
}

function cancel(){
clearInterval(idInt);
}
</script>
</head>
<div class="toolbar">
<input type="button" onclick="begin();" value="开始" />
<input type="button" onclick="cancel();" value="取消" />
</div>
<body onload="initMap();">
<div id="map" class="map">
</div>
</body>
</html>