Openlayers2实现的路径追踪动态效果

本功能将实现在给定的任意线路（线上可以有任意多个节点）上，要素在线的轨迹上进行匀速移动。
track.js

var map = new OpenLayers.Map("map");
function initMap(){
    var baseLayer = new OpenLayers.Layer.WMS(
        "basic",
        "http://localhost:8080/geoserver/chinaNS/wms",
        {
            layers: "chinaNS:china",
            transparent: true
        },
        {isBaseLayer:true}
    );
    var protocolObj = new OpenLayers.Protocol.WFS({
        url:"http://localhost:8080/geoserver/chinaNS/wfs",
        featureType: "heliu",
        geometryName: "the_geom"
    });

    var filterObj = new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.EQUAL_TO,
        property: "NAME",
        value: "金沙江"
    });

    var styles = new OpenLayers.StyleMap({
        fillColor: "#B18904",
        strokeColor: "#FE9A2E",
        strokeWidth: 1
    })

    var wfsLayer = new OpenLayers.Layer.Vector(
        'vector',
        {
            strategies: [new OpenLayers.Strategy.BBOX()],
            protocol: protocolObj,
            styleMap: styles,
            filter: filterObj
        }
    );    
    map.addLayers([baseLayer,wfsLayer]);
    map.setCenter(new OpenLayers.LonLat(108, 34), 4);
}

var movePoints=[];//运动状态的点集合
var insertResult = [];//插入点的结果集合
var timer;//定时器
var index=0;//数组索引

/**
 * 开始追踪动画，动画方法入口
 * @param {要实现动画的线,一个geometry对象} lineGeometry
 * @param {点间距} points_distance 
 * @param {闪烁频率} refresh_time 
 */
function startTracker(line,points_distance,refresh_time){
	var myStyles1 = new OpenLayers.StyleMap({
	    "default": new OpenLayers.Style({
	        strokeColor: "${color}",
	        strokeWidth: "${type}",
	    })
	});
	
	//定义图层，用于承载追踪要素
	var lineLayer = new OpenLayers.Layer.Vector(
	    'line',
	    {
	        // styleMap: new OpenLayers.StyleMap({
	        // strokeColor: "#FF4000",
	        // strokeWidth: 5
	        // })
	        //styleMap: new OpenLayers.StyleMap(myStyles)
	        styleMap:myStyles1,
	        rendererOptions: {zIndexing: true}
	    }
	);

    var points = line.getVertices();
    insertResult = insertPoint(points,points_distance);
    map.zoomToExtent(line.bounds);
    timer = window.setInterval("tracking()",refresh_time);
}

//蝌蚪状追踪效果，需要将图层样式，如myStyles1
function tracking(){
    if(index >= insertResult.length){
        window.clearInterval(timer);
        index=0;
        lineLayer.removeAllFeatures();
        return;
    }
    var features = [];
    var curPoints = insertResult.slice(index,index + 100);
    for (let i = 0; i < 5; i++) {
        var movePoints = curPoints.slice(i * 20,(i +1) *20);
        var lineGeom = new OpenLayers.Geometry.LineString(movePoints);
        var lineFeature = new OpenLayers.Feature.Vector(
            lineGeom,
            {
                type:i * 2,
                color: "#" + i + i + i + i + "FF"
            }
        );
        features.push(lineFeature);
    }
    lineLayer.removeAllFeatures();
    lineLayer.addFeatures(features);
    //map.setCenter(new OpenLayers.LonLat(insertResult[index].x,insertResult[index].y), 6);
    ++index;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="/css/map.css" rel="stylesheet">
    <link href="/bootstrap-4.1.3-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="/jquery-2.0.0/jquery.min.js"></script>
    <script src="/openlayers2/lib/OpenLayers.js"></script>
    <style>
        body{
            background-color:#151515;
        }
        #map{
            width: 100%;
            height: 600px;
            border: 0ch;
            background-color:#151515;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <button type="button" class="btn" id ="start">开始</button>                
                <div id="map" class="map"></div>
            </div>
        </div>
    </div>
    <script src="/js/ol2/track.js"></script>
      <script src="/js/ol2/insertPointInLine.js"></script>
    <script>
        $(document).ready(function(){
            initMap();
        });
        $("#start").click(function(){            
            var dataSource = map.getLayersByName("vector");
            var features = dataSource[0].features;
            var line = features[0].geometry;
            startTracker(line,0.05,10);
        });
    </script>
</body>
</html>

Openlayers2实现的路径追踪动态效果

猜你喜欢