I have seen an impressive mapping example on http://jerusalem.com/map#!/tour/the_way_of_the_cross/location/abu_jaafar, Does anybody how a similar animation on the drawn path of the points can done using openlayers?
The following fiddle shows the linestrings http://jsfiddle.net/pwuVz/58/ but I need is to be able to animate the line string itself so that the string is not directly drawn.
var map = new OpenLayers.Map( 'map', {theme:null,
controls:[new OpenLayers.Control.Navigation()]} );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.setCenter([3, 49], 5);
var startPt=new OpenLayers.Geometry.Point( 2, 45);
var endPt=new OpenLayers.Geometry.Point(7,55);
//make the line:
var line=new OpenLayers.Geometry.LineString([startPt, endPt]);
//style
var style={strokeColor:"#0500bd", strokeWidth:15, strokeOpacity: 0.5, strokeColor: '#0000ff'};
//make vector
var fea=new OpenLayers.Feature.Vector(line, {}, style);
//make vectorLayer
var vec= new OpenLayers.Layer.Vector();
//add the feature
vec.addFeatures([fea]);
//add to map
map.addLayer(vec);
setTimeout(function() {
var startPt=new OpenLayers.Geometry.Point( 7, 55);
var endPt=new OpenLayers.Geometry.Point(13,52);
//make the line:
var line=new OpenLayers.Geometry.LineString([startPt, endPt]);
//style
var style={strokeColor:"#0500bd", strokeWidth:15, strokeOpacity: 0.5, strokeColor: '#0000ff'};
//make vector
var fea=new OpenLayers.Feature.Vector(line, {}, style);
//make vectorLayer
var vec= new OpenLayers.Layer.Vector();
//add the feature
vec.addFeatures([fea]);
//add to map
map.addLayer(vec);
}, 2000);
You can animate it by drawing only one part of the line at a time. Here is one way you could do it:
function drawAnimatedLine(startPt, endPt, style, steps, time, fn) {
var directionX = (endPt.x - startPt.x) / steps;
var directionY = (endPt.y - startPt.y) / steps;
var i = 0;
var prevLayer;
var ivlDraw = setInterval(function () {
if (i > steps) {
clearInterval(ivlDraw);
if (fn) fn();
return;
}
var newEndPt = new OpenLayers.Geometry.Point(startPt.x + i * directionX, startPt.y + i * directionY);
var line = new OpenLayers.Geometry.LineString([startPt, newEndPt]);
var fea = new OpenLayers.Feature.Vector(line, {}, style);
var vec = new OpenLayers.Layer.Vector();
vec.addFeatures([fea]);
map.addLayer(vec);
if(prevLayer) map.removeLayer(prevLayer);
prevLayer = vec;
i++;
}, time / steps);
}
The time argument specifies how long you want the animation to last (in milliseconds), and the steps specifies how many steps you want to divide the animation into. fn is a callback that will be executed when the animation is complete.
Here is a jsFiddle demo that demonstrates this.
Related
I know this question has been asked I lot of times but I cannot understand how does raycasting work. I have a function creating country borders from a geo json file as well as the fill of the country which I want to be clicked. When clicked some information should be displayed about the clicked country.
var borders = new THREE.Group();
function createBorders(dataJSON) {
var SIZE_AMPLIFIER = 20;
var WIDTH = 2500 * SIZE_AMPLIFIER;
var projection = d3.geoTransverseMercator().rotate([-10, 0, 0]) //center meridian
.center([10, 52]) //longitude, latitude
.scale(WIDTH * 1.5 - 505); //scale
var path = d3.geoPath().projection(projection);
var svg = d3.select("#Map").append("svg");
svg.selectAll(".country")
.data(dataJSON)
.enter()
.append("path")
.attr("class", ".country")
.attr("d", path);
var svgMarkup = svg.node().outerHTML;
var loader = new SVGLoader();
var svgData = loader.parse(svgMarkup);
svgData.paths.forEach((path, i) => {
var shapes = path.toShapes(true);
shapes.forEach((shape, j) => {
var geomSVG = new THREE.ExtrudeBufferGeometry(shape, {
depth: 50,
bevelEnabled: false
})
//needed for click event!
var materialSVG = new THREE.MeshLambertMaterial({
color: 0xFFFFFF,
transparent: true,
opacity: 0.8,
});
var meshSVG = new THREE.Mesh(geomSVG, materialSVG);
this.borders.add(meshSVG);
//create borders
var borderMaterial = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 3 })
var borderGeometry = new THREE.EdgesGeometry(geomSVG, 15);
var bordermesh = new THREE.LineSegments(borderGeometry, borderMaterial);
this.borders.add(bordermesh);
})
})
this.borders.rotateX(Math.PI / 2)
this.borders.position.z = -300;
this.borders.position.x = 16300;
this.borders.position.y = 0;
//get only meshes, no linesegments
var countryMeshes = [];
for(let m in this.borders.children){
if(this.borders.children[m] instanceof THREE.Mesh){
countryMeshes.push(this.borders.children[m])
}
}
//add callback for each mesh
for(let c in countryMeshes){
countryMeshes[c].callback = function(){console.log(dataJSON[c].properties.name_long)}
}
this.scene.add(this.state.borders);
svg.remove();
}
Then I make the raycasting function:
var raycaster = new THREE.Raycaster();
function onMeshClick(event) {
event.preventDefault();
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
raycaster.setFromCamera(vector, camera);
var intersects = raycaster.intersectObjects(this.borders.children, true);
if (intersects.length > 0) {
intersects[0].object.callback();
}
}
and at the end I add an event listener:
window.addEventListener('click', onMeshClick, false);
The callback works but not in the correct order. I have to click on another country or even outside the map to be able to call some of the countries.
You're grouping your LineSegments together with your Meshes. Maybe when clicking, it's capturing a line instead of the mesh, since the Raycaster has a precision threshold of 1 world unit when measuring lines, which might be too large. Think of it as ray-casting with a wide brush instead of a single pixel.
You have 2 options:
Group your country areas separately from its borders.
var areas = new THREE.Group();
var borders = new THREE.Group();
scene.add(areas);
scene.add(borders);
svgData.paths.forEach((path, i) => {
// ...
areas.add(meshSVG);
// ...
borders.add(bordermesh);
})
// When raycasting, only test country areas, leaving borders out
var intersects = raycaster.intersectObjects(areas, true);
Lower the threshold of your raycaster so borders don't take up as much space in the raycaster's eyes:
raycaster.params.Line.threshold = 0.1
I am working on openlayers, there is an issue when I try to add a linestring on the map which crosses the dateline several times.
To display the linestring across two worlds in the continuous segment I have added a function HandleDateline() which returns me modified (shifted either to left or right world) coordinates.
However, when you zoom-in on the left world to current settled view the linestring disappears. Also if you try to move the map to left, the line goes away.
The weird thing is if the line crosses more than 1 time, linestring on left worlds disappears otherwise same happens for right worlds. Too observe that, remove either first 3 or last 3 points from datelinecrossing[] which I will be posting down.
I am expecting a continuous linestring crossing the international dateline without any issues like disappearing.
If there is a better approach to this, I am open to all ideas.
Here is the bin : ol dateline problem
You have to split the lines crossing the dateline programmatically at the dateline.
var points = [
[-170, -10],
[170, 0],
[-170, 10]
];
var vectorSource = new ol.source.Vector();
vectorSource.addFeature(createFeature(points));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
width: 2,
color: "red"
})
})
});
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [osmLayer, vectorLayer],
target: document.getElementById("map"),
view: new ol.View({
center: ol.proj.transform([180, 0], "EPSG:4326", "EPSG:3857"),
zoom: 3
})
});
var graticule = new ol.Graticule({
strokeStyle: new ol.style.Stroke({
color: "rgba(255,120,0,0.9)",
width: 1.5,
lineDash: [0.5, 4]
}),
showLabels: true
});
graticule.setMap(map);
// -------------------------------------------------
function createFeature(points) {
var pointsSplitted = [];
var pointsArray = [];
pointsSplitted.push(points[0]);
var lastLambda = points[0][0];
for (var i = 1; i < points.length; i++) {
var lastPoint = points[i - 1];
var nextPoint = points[i];
if (Math.abs(nextPoint[0] - lastLambda) > 180) {
var deltaX = xToValueRange(nextPoint[0] - lastPoint[0]);
var deltaY = nextPoint[1] - lastPoint[1];
var deltaXS = xToValueRange(180 - nextPoint[0]);
var deltaYS;
if (deltaX === 0) {
deltaYS = 0;
} else {
deltaYS = deltaY / deltaX * deltaXS;
}
var sign = lastPoint[0] < 0 ? -1 : 1;
pointsSplitted.push([180 * sign, nextPoint[1] + deltaYS]);
pointsArray.push(pointsSplitted);
pointsSplitted = [];
pointsSplitted.push([-180 * sign, nextPoint[1] + deltaYS]);
}
pointsSplitted.push(nextPoint);
lastLambda = nextPoint[0];
}
pointsArray.push(pointsSplitted);
var geom = new ol.geom.MultiLineString(pointsArray);
geom.transform("EPSG:4326", "EPSG:3857");
var feature = new ol.Feature({
geometry: geom
});
return feature;
}
function xToValueRange(x) {
if (Math.abs(x) > 180) {
var sign = x < 0 ? -1 : 1;
return x - 2 * 180 * sign;
} else {
return x;
}
}
html,
body,
#map {
width: 100%;
height: 100%;
overflow: hidden
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<body>
<div id="map" class="map" tabindex="0"></div>
</body>
Simplifying HandleDateline so all coordinates are either in the western part of the normal world or the eastern part of the left world seems to fix it (so if the geometry crosses the date line the extent starts in the left world)
function HandleDateline(array) {
for (var i = 0; i < array.length ; i++) {
if (array[i][0] > 0) {
array[i][0] -= 360;
}
}
}
However in worlds to the right the points west of the dateline then appear to be rendered below to linestring, while those east of the dateline are above it. Moving HandleDateline(datelinecrossing); above datelinecrossing.forEach fixes that.
You might also want to consider using a multipoint geometry for the points (unless you need them to be individually selectable).
HandleDateline(datelinecrossing);
var pdlcrossing = new ol.Feature({
geometry: new ol.geom.MultiPoint(datelinecrossing).transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(pdlcrossing);
var dlcrossing = new ol.Feature({
geometry: new ol.geom.LineString(datelinecrossing).transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(dlcrossing);
There is still a problem zooming in west of the dateline in the worlds on the right, so I think there will need to be two sets of each geometry, one offset to the left and another 360 degrees to the right:
function PlotGeometries(datelinecrossing){
var pgeom = new ol.geom.MultiPoint(datelinecrossing);
var pdlcrossing = new ol.Feature({
geometry: pgeom.clone().transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(pdlcrossing);
pgeom.translate(360,0);
var pdlcrossing2 = new ol.Feature({
geometry: pgeom.transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(pdlcrossing2);
var geom = new ol.geom.LineString(datelinecrossing);
var dlcrossing = new ol.Feature({
geometry: geom.clone().transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(dlcrossing);
geom.translate(360,0);
var dlcrossing2 = new ol.Feature({
geometry: geom.transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(dlcrossing2);
}
Just set an extent to the map view for the part of the world you're working on.
I have the current set up here: fully functional fiddle example and I need to animate the point feature... make it pulse like a GPS location on Google etc. I have found this article: http://openlayers.org/en/master/examples/feature-animation.html but find it really confusing and have no idea how to apply it to my code.
This the the part of the fiddle that creates the point feature and applies it to the map...
function locate_me() {
var locationPoint = new ol.Feature({
geometry: new ol.geom.Point([0.3901863098144531, 52.803332200169166])
});
locationPoint.getGeometry().transform('EPSG:4326', 'EPSG:3857');
// A vector layer to hold the location point
var locationLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
locationPoint
]
})
});
map.addLayer(locationLayer);
}
Isolating and commenting the function which creates the flash effect to a feature:
/*
* #param {ol.Feature}
* #param {Number} Duration in milliseconds.
*/
function flash(feature, duration) {
var start = +new Date();
var listenerKey; // to remove the listener after the duration
function animate(event) {
// canvas context where the effect will be drawn
var vectorContext = event.vectorContext;
var frameState = event.frameState;
// create a clone of the original ol.Feature
// on each browser frame a new style will be applied
var flashGeom = feature.getGeometry().clone();
var elapsed = frameState.time - start;
var elapsedRatio = elapsed / duration;
// radius will be 5 at start and 30 at end.
var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
var opacity = ol.easing.easeOut(1 - elapsedRatio);
// you can customize here the style
// like color, width
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
snapToPixel: false,
stroke: new ol.style.Stroke({
color: [51, 51, 51, opacity],
width: 0.25 + opacity
})
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(flashGeom);
if (elapsed > duration) { // stop the effect
ol.Observable.unByKey(listenerKey);
return;
}
// tell OL3 to continue postcompose animation
map.render();
}
listenerKey = map.on('postcompose', animate);
}
Usage:
var marker = new ol.Feature(new ol.geom.Point([0, 0]));
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [marker]
})
});
map.addLayer(vectorLayer);
flash(marker, 2000);
I was planning to draw polygon from lat long values referring this code.
open layers 3 how to draw a polygon programmically?
var polyCoordinates =[[1.300910900488229, 44.28372648003116],[1.3373031124022878, 44.13311552125895],[1.6648330196289067, 44.12030076099872]];
var polygon = new OpenLayers.Geometry.Polygon([polyCoordinates]);
// Create feature with polygon.
var feature = new OpenLayers.Feature(polygon);
// Create vector source and the feature to it.
var vectorSource = new OpenLayers.source.Vector();
// Create the vectorial layer
var vectorLayer = new OpenLayers.Layer.Vector('Vector Layer', {
source: vectorSource
styleMap: new OpenLayers.StyleMap({
'default': OpenLayers.Util.applyDefaults({
strokeWidth: 3,
graphicName: 'triangle',
pointRadius: '${radius}',
rotation: '${angle}'
}, OpenLayers.Feature.Vector.style['default']
),
'select': OpenLayers.Util.applyDefaults({
pointRadius: '${radius}'
}, OpenLayers.Feature.Vector.style['select']
)
})
});
OpenLayers.source is undefined is showing as error. Any help would be appreciated.
var sitePoints = [];
var coordinates =[{"long":1.300910900488229,"lat":44.28372648003116},
{"long":1.3373031124022878,"lat":44.13311552125895},
{"long":1.6648330196289067,"lat":44.12030076099872}];
var siteStyle = {
label:'ring',
title: 'press to close as a ring',
cursor: "pointer",
fontSize: '8px',
fontColor: '#222',
pointRadius: 10,
fillColor: '#cccccc',
strokeColor: '#444444'
};
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
for (var i in coordinates) {
var coord = coordinates[i];
var point = new OpenLayers.Geometry.Point(coord.long, coord.lat);
// transform from WGS 1984 to Spherical Mercator
point.transform(epsg4326, map.getProjectionObject());
sitePoints.push(point);
}
console.log(sitePoints);
var linearRing = new OpenLayers.Geometry.LinearRing(sitePoints);
var geometry = new OpenLayers.Geometry.Polygon([linearRing]);
var polygonFeature = new OpenLayers.Feature.Vector(geometry, null, siteStyle);
vectorLayer.addFeatures([polygonFeature]);
map.addLayer(vectorLayer);
Here is a proper way to do this in OpenLayers 3, which has a different API than previous versions.
var polyCoordinates =[
[1.300910900488229, 44.28372648003116],
[1.3373031124022878, 44.13311552125895],
[1.6648330196289067, 44.12030076099872]];
var polygon = new ol.geom.Polygon([polyCoordinates]);
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
// Create feature with polygon.
var feature = new ol.Feature({
geometry: polygon
});
// Create vector source and the feature to it.
var vectorSource = new ol.source.Vector({
features: [feature]
});
// Create the vectorial layer
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#eedd00',
width: 3
})
})
});
Edit: If you stick with OpenLayers 2, you need to create the polygon via linear ring. The setup is a little bit different. There is no OpenLayers source to deal with.
var polyCoordinates =[
[1.300910900488229, 44.28372648003116],
[1.3373031124022878, 44.13311552125895],
[1.6648330196289067, 44.12030076099872]];
// Create the polygon via linear ring
var points = [];
for (var i = 0; i < polyCoordinates.length; i++) {
coord = polyCoordinates[i];
points.push(new OpenLayers.Geometry.Point(coord[0], coord[1]));
}
var linearRing = new OpenLayers.Geometry.LinearRing(points);
var polygon = new OpenLayers.Geometry.Polygon([linearRing]);
var srcProj = new OpenLayers.Projection("EPSG:4326");
var targetProj = new OpenLayers.Projection("EPSG:3857");
polygon.transform(srcProj, targetProj);
// Create feature with polygon.
var feature = new OpenLayers.Feature.Vector(polygon);
// Create the vectorial layer
var vectorLayer = new OpenLayers.Layer.Vector('Vector Layer',
OpenLayers.Feature.Vector.style['default']
);
vectorLayer.addFeatures([feature]);
I'm creating project "flight controller" in order to pass the subject in my university. I imported Google Maps and I wrote a animated airplane.
var lineCoordinates = [
new google.maps.LatLng(fromX, fromY),
new google.maps.LatLng(toX, toY)
];
var lineSymbol = {
path: //SVG samolotu///,
scale: 0.5,
strokeColor: 'black',
fillColor: 'black',
fillOpacity: 1
};
var line = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
});
line.setMap(map);
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
if(count ==199) stopCircle(line);
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
},20);
But this solution has one defect. All airplane flight the same time, it's not depends on track.I must do that all airplane will have the same speed (not travel time). But If I zoom on my map , the airplane will move faster;) Can somebody help me?
(sorry if I ignore most of your code)
Okay, let's say we move the icon 100 km every second.
The main thing about the solution is this line; it returns a position that is X distance away from a point, along a route:
var pos = google.maps.geometry.spherical.computeOffset(start, newOffset, google.maps.geometry.spherical.computeHeading(start, end));
Here is an example you can copy/paste as is. I hope you can use this to do make your project.
If you want diferent speed and interval, look at lines 21 & 22.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps - animated Airline Routes</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map_canvas {
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 6,
center: new google.maps.LatLng(50.5, 4.5), // Over Belgium
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// settings:
previewInterval = 1000;
previewSpeed = 100; // 100 km (on the map) / interval time
// these variables will control the moving icon
var flightPathCoordinates=[
[4.485600, 50.90098, 20.96801, 52.167250], // Brussels - Warshau
[4.485600, 50.90098, -0.454256, 51.470054] // Brussels - London
];
var flightPathObjects = [];
var timers = [];
var markers = [];
// now we draw flight paths. notice, the 2 blocks here below can be put in a for-loop
// first path (i = 0)
var path = flightPathCoordinates[0];
var distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(path[1], path[0]), new google.maps.LatLng(path[3], path[2]));
flightPathObjects.push(drawPath(path[0], path[1], path[2], path[3])); // draw path
markers.push(drawIcon(0)); // set the icon
animateIcon(0, 0, distance);
// second path (i = 1)
path = flightPathCoordinates[1];
distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(path[1], path[0]), new google.maps.LatLng(path[3], path[2]));
flightPathObjects.push(drawPath(path[0], path[1], path[2], path[3]));
markers.push(drawIcon(1));
animateIcon(1, 0, distance);
/**
* Draw a flight path
*/
function drawPath(fromX, fromY, toX, toY) {
var lineCoordinates = [
new google.maps.LatLng(fromY, fromX), // notice: X is along the longitude, Y is along the lattitude
new google.maps.LatLng(toY, toX)
];
var line = new google.maps.Polyline({
path: lineCoordinates,
geodesic: true,
strokeColor: '#00FF00',
strokeOpacity: 1.0,
strokeWeight: 2
});
line.setMap(map);
return line;
}
/**
* recursive function. animates the the icon.
*/
function animateIcon(i, offset, totalDistance) {
var newOffset = (offset + previewSpeed * 1000) % totalDistance; // notice, the "% totalDistance" makes the plane loop. You could also stop the function if the distance > totalDistance
var start = new google.maps.LatLng(flightPathCoordinates[i][1], flightPathCoordinates[i][0]);
var end = new google.maps.LatLng(flightPathCoordinates[i][3], flightPathCoordinates[i][2]);
var pos = google.maps.geometry.spherical.computeOffset(start, newOffset, google.maps.geometry.spherical.computeHeading(start, end));
markers[i].setPosition(pos);
timers[i] = setTimeout(function () { // we trigger this function again in 1 second
animateIcon(i, newOffset, totalDistance)
}, previewInterval
);
}
/**
* sets a marker on the map, at the start of the path
*/
function drawIcon(i) {
var start = new google.maps.LatLng(flightPathCoordinates[i][1], flightPathCoordinates[i][0]);
var marker = new google.maps.Marker({
position: start,
icon: 'https://cdn0.iconfinder.com/data/icons/opensourceicons/32/plane.png', // you have your own icon ...
map: map
});
return marker;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
//
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>