supermap的IClientForJavaScript实现的车辆历史行动轨时序显示功能
<%@ 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>
<%@ 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>