首页 / 浏览问题 / WebGIS / 问题详情
iClient Classic如何实现车辆轨迹播放效果
25EXP 2020年07月08日

使用产品:iClient 8C(2017);

操作系统:win7 x64;

数据类型:数据库;

问题详细描述:iClient Classic如何实现车辆轨迹播放效果,且具备播放/暂停//停止事件,能够设置速度(km/h),有能够将车辆移动到轨迹任意位置的api;

问题重现步骤:无;

需求如下图效果

1个回答

您好,您可以参考https://iclient.supermap.io/examples/classic/editor.html#vizLayer_animatorCar该范例

var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, baseLayer, resultLayer, vectorLayer,
        points = [new SuperMap.Geometry.Point(4933.319287022352, -3337.3849141502124),
            new SuperMap.Geometry.Point(4960.9674060199022, -3349.3316322355736),
            new SuperMap.Geometry.Point(5006.0235999418364, -3358.8890067038628),
            new SuperMap.Geometry.Point(5075.3145648369318, -3378.0037556404409),
            new SuperMap.Geometry.Point(5305.19551436013, -3376.9669111768926)],
            
            
        roadLine = new SuperMap.Geometry.LineString(points),
        styleLine = {
            strokeColor: "blue",
            strokeWidth: 3,
            strokeLinecap: "round",
            strokeDashstyle: "solid"
        },
        styleRegion = {
            strokeColor: "#304DBE",
            strokeWidth: 2,
            pointerEvents: "visiblePainted",
            fillColor: "#304DBE",
            fillOpacity: 0.4
        },
        url1 = host + "/iserver/services/map-changchun/rest/maps/长春市区图",
        url2 = host + "/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";

    init();

    function init() {
map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })], units: "m"
        });
        map.addControl(new SuperMap.Control.LayerSwitcher(), new SuperMap.Pixel(42, 80));
        map.allOverlays = true;
        baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("Changchun", url1, {
            transparent: true,
            cacheEnabled: true
        }, {maxResolution: "auto"});
        baseLayer.events.on({"layerInitialized": addLayer});
        resultLayer = new SuperMap.Layer.Vector("缓冲区分析结果");
        vectorLayer = new SuperMap.Layer.Vector("vectorLine");

        var featureLine = new SuperMap.Feature.Vector();
        featureLine.geometry = roadLine;
        featureLine.style = styleLine;
        //vectorLayer.addFeatures(featureLine);
    }

    function addLayer() {
        map.addLayers([baseLayer, resultLayer, vectorLayer]);
        map.setCenter(new SuperMap.LonLat(5105, -3375), 4);
        
      var  animatorVector = new SuperMap.Layer.AnimatorVector("Vector Layer", {rendererType: "StretchLine"}, {
            speed: 0.005,
            startTime: 0,
            endTime: 200
        });
        var layer=new SuperMap.Layer.Vector("Vect");
map.addLayer(layer);
animatorVector.events.on({"featurerendered": (fea)=>{
    console.log(fea,"fea")
    layer.addFeatures([fea])
    
}});

     var lines=[];   
for(let j=0;j<points.length-1;j++)
{
  var  line= new SuperMap.Geometry.LineString([points[j],points[j+1]]);
  lines.push(line)
}
  console.log(lines,"lines")      
        

    map.addLayer(animatorVector);
    var feas=[];
    for(var i=0;i<lines.length;i++)
    {
               var fea=new SuperMap.Feature.Vector(lines[i],{
                    FEATUREID:0,
                    TIME:i
             })
              feas.push(fea)
        
       
    };
    console.log(feas,"feas")
    
    animatorVector.addFeatures(feas);
    animatorVector.animator.start();
    
    }

r这个是我写的简单范例也可以供你参考

3,357EXP 2020年07月08日
...