OpenLayers tween и features

posmotret · Сообщение **posmotret** » 17 мар 2011, 15:21

Всем здравствовать!

Мне нужно отобразить на карте движение по lon lat координатам. Делаю так:

<html>
<head>
	<title>Tween tester</title>	
	<script
    src="http://openlayers.org/api/OpenLayers.js"></script>
</head>

<body>
	<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
	var mercator = new OpenLayers.Projection("EPSG:900913");
    var geographic = new OpenLayers.Projection("EPSG:4326");
	var options = {
			minResolution: "auto",
			maxResolution: "auto",
			maxExtent: new OpenLayers.Bounds(-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892),
			controls: [new OpenLayers.Control.MouseDefaults()]
		};
			  
        var map = new OpenLayers.Map('map', options);
		var mapnik = new OpenLayers.Layer.OSM();
		map.addLayer(mapnik);
		var lonLat = new OpenLayers.LonLat( 37.89, 51.32 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
 
 
 var feat = new OpenLayers.Feature.Vector(
                    new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat), {type:15});
					
					var myStyles = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style({
                    pointRadius: "${type}", // sized according to type attribute
                    fillColor: "#ffcc66",
                    strokeColor: "#ff9933",
                    strokeWidth: 2,
                    graphicZIndex: 1,
					graphic: true,
					externalGraphic: "http://localhost/mr.png"
                }),
                "select": new OpenLayers.Style({
                    fillColor: "#66ccff",
                    strokeColor: "#3399ff",
                    graphicZIndex: 2
                })
            });
		
		var tr = new OpenLayers.Layer.Vector("Маршрутки", 
		{
			styleMap: myStyles,
			
            rendererOptions: {zIndexing: true}
				});
		tr.addFeatures(feat);		
		map.addLayer(tr);
 
 
    var zoom=17;
	map.setCenter (lonLat, zoom);
		
		//map.zoomToMaxExtent();
		map.addControl(new OpenLayers.Control.LayerSwitcher());
		map.addControl(new OpenLayers.Control.MousePosition());
		
	//TWEEN
	var cars = tr.features[1];
	var lonLat_end = new OpenLayers.LonLat(38.90, 55.330)
		.transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
	var tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);
	
	var from = {x: lonLat.lon, y: lonLat.lat};
	var to = {x: lonLat_end.lon, y: lonLat_end.lat};
	
	var callbacks = 
	{
            eachStep: function(value) 
			{
                    //alert(value.x);
					//feat.Geometry.Point.move(value.x+1, value.y+1);
					cars.move (new OpenLayers.LonLat (value.x+0.1, value.y+0.1));
            }
	}
		tween.start(from, to, 100, {callbacks:callbacks});				
</script>
</body>
</html>

Подскажите что я делаю не правильно ? Точка стоит на месте, пробовал в функцию eachStep добавлять tr.redraw(); не помогло, да и в описании написано что move() - сам перерисовывать должен. Когда алертом смотрю координаты, они меняются.

А вот так делал с маркером по px координатам и так работает:

Код: Выделить всё

<script defer="defer" type="text/javascript">

		var options = {
			minResolution: "auto",
			maxResolution: "auto",
			maxExtent: new OpenLayers.Bounds(-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892),
			controls: [new OpenLayers.Control.MouseDefaults()]
		};
			  
        var map = new OpenLayers.Map('map', options);
		var mapnik = new OpenLayers.Layer.OSM();
		map.addLayer(mapnik);
		
		var lonLat = new OpenLayers.LonLat( 37.89, 51.32 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
 
    var zoom=15;
 
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
	var size = new OpenLayers.Size(35,21);
	var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
	var icon = new OpenLayers.Icon('http://localhost/mr.png', size, offset);
 
    markers.addMarker(new OpenLayers.Marker(lonLat, icon));
	
	//var mark = new markers.getViewPortPxFromLonLat(lonLat);

		//alert (mark);
 
    map.setCenter (lonLat, zoom);
		
		//map.zoomToMaxExtent();
		map.addControl(new OpenLayers.Control.LayerSwitcher());
		map.addControl(new OpenLayers.Control.MousePosition());
		
		
		var lonLat_end = new OpenLayers.LonLat( 37.90, 51.330)
		.transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
		var tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);
		var fr = markers.getViewPortPxFromLonLat(lonLat);
		var from = { x: fr.x, y: fr.y};
		var t = markers.getViewPortPxFromLonLat(lonLat_end);
		//alert (fr.x +" " + t.x);
		var to = {x: t.x, y: t.y};
		//var t = new OpenLayers.Pixel(37.89, 22.15);
		
			alert (to.x);
		
		//alert (markers.getViewPortPxFromLonLat(lonLat));
		var callbacks = {
                eachStep: function(value) {
				//alert (value.x);
                    markers.markers[0].moveTo (new OpenLayers.Pixel(value.x + 1, value.y + 1));
                   // block.style.top = (value.y + 1) + 'px';
                }
		}
		tween.start(from, to, 5000, {callbacks:callbacks});
			
</script>

И вот пример feature.move работающий, но без tween: http://kestrelcomputer.com/MovingMarker ... rkers.html смотрю код вроде бы все так же, не могу понять в чем дело, помогите пожалуйста

Сообщение **Denis Rykov** » 17 мар 2011, 21:15

Ошибка у вас вот в чём:

Код: Выделить всё

var cars = tr.features[1];

Нужно писать:

Код: Выделить всё

var cars = tr.features[0];

А в остальном вроде правильно - пример.

posmotret · Сообщение **posmotret** » 18 мар 2011, 08:48

_DR_ спасибо, я сначала поставил 0, начал проверять результат и точка вообще не отобразились (как сейчас понимаю из-за того что вылетела за пределы видимостии на близком зуме), а тогда решил что в яваскрипт нумерация начинается с 1)) спасибо

acsel · Сообщение **acsel** » 03 дек 2013, 07:38

День добрый.

Возник вопрос. А как сделать, чтобы движение по карте было не от точки А до точки Б (как в примере выше), а проходило путь А->Б->В->Г (т.е. проиграть трек, пройденный объектом)? Помогите пожалуйста.

Сообщение **Denis Rykov** » 03 дек 2013, 08:35

Видимо, последовательно вызвать tween.start для отдельных участков пути.

acsel · Сообщение **acsel** » 03 дек 2013, 08:49

Denis Rykov, спасибо.
Если кому интересно, решил вопрос так:

Код: Выделить всё

var i = 0;
    var timer = setInterval(function() {
        if(i < (20 - 1)) {
            var from = {x: point1[i].x, y: point1[i].y};
	         var to =   {x: point1[i+1].x, y: point1[i+1].y};	
	         tween.start(from, to, 100, {callbacks:callbacks});
            i++;
        } else {
            clearInterval(timer);
        }
    }, 1000);

,где point1 массив с точками длиной 20. Осталось только поработать над равномерностью передвижения

.

Форумы GIS-Lab.info

OpenLayers tween и features

OpenLayers tween и features

Re: OpenLayers tween и features

Re: OpenLayers tween и features

Re: OpenLayers tween и features

Re: OpenLayers tween и features

Re: OpenLayers tween и features

Кто сейчас на конференции