各位大神,我想实现物体运动轨迹的回放这一个功能,但网页加载出来是空白的,我都要哭辽,我的代码放下面啦,麻烦各位大神指教指教。
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Point",
"esri/geometry/Multipoint",
"esri/geometry/Polyline",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureFillSymbol",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/Color",
"dojo/dom",
"dojo/on",
"dojo/domReady!"],
function(Map,
MapView,
Point,
Multipoint,
Polyline,
SimpleLineSymbol,
PictureMarkerSymbol,
SimpleMarkerSymbol,
PictureFillSymbol,
GraphicsLayer,
Graphic,
Color,
dom,
on){
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
});
var lineArry = [[12433521.06,4273745.89],[13414042.33,3493111.16],[12080691.56,3434168.72],
[11646671.34,3345981.72]]
var graphicsLayer = new GraphicsLayer();//放置线图层以及起点终点图片图层
var cargraphicsLayer = new GraphicsLayer();//放置小车图层
//加载线图层
var linesymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),3);
var linegeometry = new Polyline(lineArry);
var graphic = new Graphic(linegeometry,linesymbol);
//加载起点图片
var startSymbol = new PictureMarkerSymbol("img/start.jpg",50,50);
startSymbol.yoffset = 15;
var startGeometry = new Point(lineArry[0]);
var startGraphic = new Graphic(startGeometry,startSymbol);
//加载终点图片
var endSymbol = new PictureMarkerSymbol("img/end.jpg",50,50);
endSymbol.yoffset = 15;
var endGeometry = new Point(lineArry[3]);
var endGraphic = new Graphic(endGeometry,endSymbol);
//添加到地图
graphicsLayer.add(graphic);
graphicsLayer.add(startGraphic);
graphicsLayer.add(endGraphic);
map.add(graphicsLayer);
//创建小车图层
var carSymbol = new PictureMarkerSymbol("img/shang.png",50,50);
var carGeometry = new Point(lineArry[0]);
var carGraphic = new Graphic(carGeometry,carSymbol);
cargraphicsLayer.add(carGraphic);
map.add(cargraphicsLayer);
var i=0;
var Auto;
document.getElementById("startbtn").onclick = function (){
Auto=window.setInterval(function(){
if(i<lineArry.length-1){
i = i+1;
carGraphic.visible=false;//上一个点的小车graphic隐藏掉
carGeometry = new Point(lineArry);
carGraphic = new Graphic(carGeometry,carSymbol);
cargraphicsLayer.add(carGraphic);//加载下一个点的小车graphic
}
});
} ;
} );
</script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Point",
"esri/geometry/Multipoint",
"esri/geometry/Polyline",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureFillSymbol",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/Color",
"dojo/dom",
"dojo/on",
"dojo/domReady!"],
function(Map,
MapView,
Point,
Multipoint,
Polyline,
SimpleLineSymbol,
PictureMarkerSymbol,
SimpleMarkerSymbol,
PictureFillSymbol,
GraphicsLayer,
Graphic,
Color,
dom,
on){
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
});
var lineArry = [[12433521.06,4273745.89],[13414042.33,3493111.16],[12080691.56,3434168.72],
[11646671.34,3345981.72]]
var graphicsLayer = new GraphicsLayer();//放置线图层以及起点终点图片图层
var cargraphicsLayer = new GraphicsLayer();//放置小车图层
//加载线图层
var linesymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),3);
var linegeometry = new Polyline(lineArry);
var graphic = new Graphic(linegeometry,linesymbol);
//加载起点图片
var startSymbol = new PictureMarkerSymbol("img/start.jpg",50,50);
startSymbol.yoffset = 15;
var startGeometry = new Point(lineArry[0]);
var startGraphic = new Graphic(startGeometry,startSymbol);
//加载终点图片
var endSymbol = new PictureMarkerSymbol("img/end.jpg",50,50);
endSymbol.yoffset = 15;
var endGeometry = new Point(lineArry[3]);
var endGraphic = new Graphic(endGeometry,endSymbol);
//添加到地图
graphicsLayer.add(graphic);
graphicsLayer.add(startGraphic);
graphicsLayer.add(endGraphic);
map.add(graphicsLayer);
//创建小车图层
var carSymbol = new PictureMarkerSymbol("img/shang.png",50,50);
var carGeometry = new Point(lineArry[0]);
var carGraphic = new Graphic(carGeometry,carSymbol);
cargraphicsLayer.add(carGraphic);
map.add(cargraphicsLayer);
var i=0;
var Auto;
document.getElementById("startbtn").onclick = function (){
Auto=window.setInterval(function(){
if(i<lineArry.length-1){
i = i+1;
carGraphic.visible=false;//上一个点的小车graphic隐藏掉
carGeometry = new Point(lineArry);
carGraphic = new Graphic(carGeometry,carSymbol);
cargraphicsLayer.add(carGraphic);//加载下一个点的小车graphic
}
});
} ;
} );
</script>
1 个回复
Alisa
赞同来自:
要回复问题请先登录或注册