ArcGIS JS API 路径回放
2021-05-05 本文已影响0人
polong
最近维护老项目,有个路径回放的功能,写的比较复杂,现在只要比较简单就能做好,只要使用turf.js的lineChunk就可以了,愉快的结束本篇水文.
以下都是水字数
生成线段,使用turf.lineChunk跟据turf.length来分割成定长线段,计算线段的范围好缩放至线段附近
let line = turf.lineString(data.data);
let options = {units: 'kilometers'};
let length = turf.length(line, options);
let along = turf.lineChunk(line, length/100, options);
let bbox = turf.bbox(line);
let extent = new Extent({
xmax: bbox[2],
xmin: bbox[0],
ymax: bbox[3],
ymin: bbox[1],
spatialreference: {
wkid: 4326
}
})
使用定时器来j进行数据修改,通过不停的修改几何数据,当开始是绘制一个线段,后面修改几何插入新的线段,让人有种动画的感觉.
ArcGIS JS API 4.18
clock = function () {
if (n >= along.features.length) {
clearInterval(r)
} else {
if(n==0){
let polyline = {
type: "polyline",
paths: [along.features[n].geometry.coordinates],
}
let polylineSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [0, 0, 255],
width: 4
}
let polylineGraphic = new Graphic({
geometry: polyline,
symbol: polylineSymbol,
});
layer.graphics.add(polylineGraphic);
}else{
let geo=layer.graphics.getItemAt(0).clone()
layer.graphics.removeAll()
geo.geometry.addPath(along.features[n].geometry.coordinates)
layer.graphics.add(geo);
}
n=n+1
}}
ArcGIS JS API 3.35
clock = function () {
if (n >= along.features.length) {
clearInterval(r)
} else {
if(n==0){
let polylineJson = {
'paths': [along.features[n].geometry.coordinates],
'spatialReference': {'wkid': 4326}
}
let lline = new Polyline(polylineJson)
let lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 255]), 6)
lineGraphicLayer.add(new Graphic(lline, lineSymbol))
}else{
let geo=lineGraphicLayer.graphics[0].clone()
lineGraphicLayer.clear()
geo.geometry.addPath(along.features[n].geometry.coordinates)
lineGraphicLayer.add(geo)
}
n=n+1
}}
参考资料:
https://turfjs.fenxianglu.cn/category/misc/lineChunk.html