I was using the below function to fly the camera to required camera view in 3D view till now. But when I try this same function in Columbus view, the camera view is not as required.
goToLocation(-114.07201, 51.04357, 198.21, 43.20, 68.65, 1);
function goToLocation(longitude, latitude, altitude, heading, tilt, duration) {
var coords = Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude, Cesium.Ellipsoid.WGS84);
var heading = Cesium.Math.toRadians(heading);
var tilt = Cesium.Math.toRadians(tilt - 90);
var camera_v = viewer.camera;
var options = {
destination: coords,
duration: duration,
orientation: {
heading: heading,
pitch: tilt,
roll: 0.0
}
};
camera_v.flyTo(options);
}
Can anyone please suggest any changes to be done to this function for columbus view?
Related
I am trying make a multi colored polyline. I have been able to do it successfully before with Vue.js but now we are adding it to react native app and its not working as i expected in React js.
I am making multiple polylines, each line (segment) has multiple points. I have a structure like this:
groups: [ { key: 'BLUE', cordinates: [] }, key: 'GREEN', cordinates: [] ];
Now each key represent a color and cordinates is an array of cordinates. Now when I loop it like this:
{
this.state.groups.map((group, index) => {
return (
<Polyline
key={index}
coordinates={group.Points}
strokeColor={
group.Key === "GREEN" ? "#0F0" : "#000"
// "#000"
// group.Key === "G"
} // fallback for when `strokeColors` is not supported by the map-provider
strokeColors={[
'#7F0000',
'#00000000', // no color, creates a "long" gradient between the previous and next coordinate
'#B24112',
'#E5845C',
'#238C23',
'#7F0000'
]}
strokeWidth={6}
/>
);
})
}
The problem is it works! perfectly but it doesnt draw the last polyline which is being updated. So for example there are 10 segments in this polyline. Now after 3 are drawn and loop is on 4th segment, its pushing each cordinate in the last group with a delay of 30 ms. I added delay to show it animated. Now it won't draw on map untill all cordinates of the 4th segments are pushed. When its done, and 5th segment is started, 4th segment shows perfectly but now 5th segment stops working.
I know that points are being perfectly added because I have added a Camera as well and I change its center to be last point that was pushed in groups/segments.
Group/Segments loop:
addPoint(group, point) {
var data = this.state.data;
if (group <= (data.length - 1)) {
var g = data[group];
// console.log('g', g);
if (point <= (g.Item2.length - 1)) {
var p = g.Item2[point];
var {groups} = this.state;
// console.log('groups,', groups);
groups[group].Points = groups[group].Points.concat({
longitude: p.longitude,
latitude: p.latitude,
});
this.MapView.animateCamera({
center: {
latitude: p.latitude,
longitude: p.longitude,
},
duration: 100,
zoom: 15,
});
point++;
setTimeout(() => {
this.addPoint(group, point);
}, 300);
} else {
point = 0;
group++;
if (group < this.state.data.length - 1) {
var key = this.state.data[group].Item1;
console.log('key', key);
var groups = this.state.groups.concat({
Key: key,
Points: [],
});
this.setState({
groups: groups,
})
}
setTimeout(() => {
this.addPoint(group, point);
}, 300);
}
} else {
console.log('last group reached');
}
}
Is there any solution for this?
I figured it out. The problem was whenever I updated the coordinates array of any polyline, it had to re-render whole thing which was performance wise very poor decision.
I solved it by making a custom polyline component which maintains its own coordinates array. Implemented an inner timeout function which pushes coordinates incrementally. This solved the problem and its now super easy to use.
You can read more about this here: multi colored gradient polyline using google maps on react native
I'm trying to adjust the transparency of a PNG that I am overlaying on ArcGIS/ESRI API for Javascript.
I have tried to set an opacity option in the var but, am not having much luck.
map.on("load", function() {
// create and add the layer
var mil = new esri.layers.MapImageLayer({
});
// create an add the actual image
var mi = new esri.layers.MapImage({
'extent': { 'xmin': -125.0, 'ymin': 22.0, 'xmax': -66.5, 'ymax': 52.0},
'href': 'https://some.website/some.image.PNG',
'opacity': 0.75
});
What am I doing wrong?
I added opacity: 0.6 to
map.on("load", function() {
// create and add the layer
var mil = new esri.layers.MapImageLayer({
'opacity': 0.6,
});
I'm trying to get same size of my circle while zooming. I was tryging to do that with settings "scale" but it also doesnt work. How can i do that?
Could someone show me how can do that, maybe with any example ?
<MapView.Circle
key = { (this.state.longitude + this.state.latitude).toString() }
center = {{latitude: this.state.latitude,
longitude: this.state.longitude} }
radius = { 100 }
strokeWidth = { 1 }
strokeColor = { '#1a66ff' }
fillColor = { '#1a66ff' }
/>
Best regards
One way to do it is to save the current map region to the state, this expresses the coordinate domain which the viewer sees...
onRegionChange(region) {
// Update state
this.setState({ mapRegion: region });
}
<MapView
onRegionChange={this.onRegionChange.bind(this)}
/>
With this, you can use simple trigonometry to resize the radius kind of like this...
size = {radius / Math.sqrt(this.state.mapRegion.longitudeDelta*this.state.mapRegion.longitudeDelta + this.state.mapRegion.latitudeDelta*this.state.mapRegion.latitudeDelta)}
Im looking for a way to set up a fade in and fade out with CreateJS.I'm completely new on CreateJS and I wish to create a little advertise of 2 differents layouts, each one with some little layouts inside which they will appear by slide or fade in-out animation.
This is my try, I'm not sure if what I did is right but some steps work and other not. Any help is really welcome.
** Finally this is the sequence I wish to develop it in 10 seconds:
** Frame 1
-The background, product image should appear immediately on the first frame.
-Fade in the titleFrameOne.
-Then fade in the blueText.
-frame 1 should wait for two seconds.
-Fade out all content on frame one except the background.
**Frame 2
-Fade in the titleFrameOne.
-Then fade in the greyCopy.
-At the same time as the grey copy animate the stamp should animate from the top (off screen) to its final position, and bounce when it lands. I need to create an effect that makes it appear to fall from the sky and bounce a bit on the ground when it lands with its shadow ate the end.
-Fade out all content on frame 2 except the background image.
Also I was wondering if I can do this animation in CSS so if it's possible I wish to know how I reach the id's created in JS and manipulate them on my CSS style sheet.
I precise that I'm using:
PreloadJS
EaselsJS
TweenJS
Thanks everyone
HTML:
<body>
<canvas id="stage" width="300" height="250"></canvas>
</body>
JS:
// JavaScript Document
window.onload = function() {
console.log("ad");
// variables here.
//Frame 1
var background;
var products;
var titleFrameOne;
var blueText;
//Frame 2
var titleFrameTwo;
var greyCopy;
var stamp;
var shadow;
// store a reference to the canvas which we will draw on.
var stage = new createjs.Stage("stage");
// register the stage to handle mouse events.
stage.enableMouseOver(10);
// register the Ticker to listen for the tick event.
createjs.Ticker.addEventListener("tick", handleTick, false);
// redraw the canvas - like Event.ENTER_FRAME in Adobe Flash.
function handleTick(event) {
stage.update();
}
// create a preloader to load the images.
var loader = new createjs.LoadQueue(false);
// when all images are loaded call the handleAllImageLoaded function.
loader.on('complete', handleAllImagesLoaded, this);
// provide a manifest of files and ids to be loaded.
loader.loadManifest([
{ id: "background", src: "images/background.png" },
{ id: "products", src: "images/frameOne/products.png" },
{ id: "titleFrameOne", src: "images/frameOne/titleFrameOne.png" },
{ id: "blueText", src: "images/frameOne/blueText.png" },
{ id: "titleFrameTwo", src: "images/frameTwo/titleFrameTwo.png" },
{ id: "greyCopy", src: "images/frameTwo/greyCopy.png" },
{ id: "stamp", src: "images/frameTwo/stamp.png" },
{ id: "shadow", src: "images/frameTwo/shadow.png" },
]);
function handleAllImagesLoaded() {
console.log("All the images have loaded.");
drawTheBannerBackground();
drawFrameOne();
drawFrameTwo();
}
/**********Background**************/
function drawTheBannerBackground() {
console.log("Done - background draw & animation.");
// provide the loader result for the item with id == 'background'
// as a bitmap which will be stored in our background variable.
background = new createjs.Bitmap(loader.getResult("background"));
// set the background bitmap alpha to zero.
background.alpha = 0;
// add background to the display list.
stage.addChild(background);
// animate the background bitmap alpha value to 1 over the duration of 0 milliseconds.
createjs.Tween.get(background).to({ alpha: 1 }, 0);
// after the background is drawn on the canvas draw and animate the content for frame 1.
}
/*****************************Frame 1*****************************/
function drawFrameOne() {
products = new createjs.Bitmap(loader.getResult("products"));
titleFrameOne = new createjs.Bitmap(loader.getResult("titleFrameOne"));
blueText = new createjs.Bitmap(loader.getResult("blueText"));
products.alpha = 0;
titleFrameOne.alpha = 0;
blueText.alpha = 0;
stage.addChild(products);
stage.addChild(titleFrameOne);
stage.addChild(blueText);
createjs.Tween.get(products).to({ alpha: 1 }, 0);
createjs.Tween.get(titleFrameOne).to({ alpha: 1 }, 1000);
createjs.Tween.get(blueText).to({ alpha: 1 }, 2000);
console.log("Done - products draw & animation.");
console.log("Done - titleFrameOne draw & animation.");
console.log("Done - blueText draw & animation.");
setTimeout(drawFrameTwo, 2000);
}
/*****************************Frame 2*****************************/
function drawFrameTwo() {
titleFrameTwo = new createjs.Bitmap(loader.getResult("titleFrameTwo"));
greyCopy = new createjs.Bitmap(loader.getResult("greyCopy"));
stamp = new createjs.Bitmap(loader.getResult("stamp"));
shadow = new createjs.Bitmap(loader.getResult("shadow"));
tit`enter code here`leFrameTwo.alpha = 0;
greyCopy.alpha = 0;
stamp.alpha = 0;
shadow.alpha = 0;
stage.addChild(titleFrameTwo);
stage.addChild(greyCopy);
stage.addChild(stamp);
stage.addChild(shadow);
createjs.Tween.get(titleFrameTwo).to({ alpha: 1 }, 1000);
createjs.Tween.get(greyCopy).to({ alpha: 1 }, 2000);
createjs.Tween.get(stamp).to({ alpha: 1 }, 3000);
createjs.Tween.get(shadow).to({ alpha: 1 }, 4000);
console.log("Done - titleFrameTwo draw & animation.");
console.log("Done - greyCopy draw & animation.");
console.log("Done - stamp draw & animation.");
console.log("Done - shadow draw & animation.");
}
};
Instead of using setTimeout using callback of tweenjs.
In handleAllImagesLoaded you should not call both drawFrameOne and drawFrameTwo(); it should be callback drawFrameOne
createjs.Tween.get(blueText).to({ alpha: 1 }, 2000).call(drawFrameTwo);
Please refer the document for the more info
http://www.createjs.com/docs/tweenjs/modules/TweenJS.html
I'm using OpenLayers 3 and I need to show only the vertices of a polyline. For exemple see this image :
I want to be able to show only the red squares (they can be something else than squares, like circles). Using markers is not an option for performance issue, my lines can be huge (500 000 vertices).
Currently I have a working code :
// Define the style for vertex polyline :
var yellowVertexPolylineStyle = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 1.5,
fill: new ol.style.Fill({
color: 'yellow'
})
}),
geometry: function(feature) {
return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
}
})
];
// Create the line :
var lineLayer = new ol.layer.Vector({
zIndex: 1000,
source: new ol.source.Vector({ features: [new ol.Feature({ geometry: myLine })] }),
style: yellowVertexPolylineStyle
});
// Add the layer :
map.addLayer(lineLayer);
But this is causing performance issue when the polyline is quite big (> 10 000 points).
Using an ol.geom.MultiPoint geometry is even worse. Does someone knows a better way?
EDIT : I'm trying this now :
// Define the style for vertex polyline :
var yellowVertexPolylineStyle = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 1.5,
fill: new ol.style.Fill({
color: 'yellow'
})
}),
geometry: function(feature) {
var geom = feature.get('stylegeom');
if (!geom || (geom && geom.getCoordinates().length !== feature.getGeometry().getCoordinates().length) ) {
geom = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
feature.set('stylegeom', geom);
}
return geom;
}
})
];
I'll come back here to tell if it works...
You need to cache your style geometry, otherwise it will be calculated for every rendered frame, e.g.
geometry: function(feature) {
var geom = feature.get('stylegeom');
if (!geom) {
geom = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
feature.set('stylegeom', geom);
}
return geom;
}
If your feature geometry changes, you'll need to update the style geometry too:
source.on('changefeature', function(evt) {
feature.set('stylegeom', undefined);
});