I have a map, that has both new and migrated areas. The new areas are being pushed to the map, but the migrated ones are not. They are somewhat loading, as the length of the collection is correct. map.entites.push('polygon') is not working.
here is the code I am using:
var checkExist = setInterval(function () {
var counter = 0;
for (var i = 0; i < viewData.zones.length; i++) {
var zone = viewData.zones[i];
var id = zone["ID"];
var geometricArea = zone["CoverageArea"];
var geography = geometricArea["Geography"];
//console.log("geography object :" + JSON.parse(geography));
//var zoneShape = zoneShapes[i];
// console.log(geography.WellKnownText);
var polygon = WKTModule.Read(geography.WellKnownText)
polygon.shapeType = ('Polygon').toLowerCase();
polygon.id = id;
map.entities.push(polygon);
zoneEntities.push(polygon);
});
});
Also- Even though the polygon isnt being pushed to the map, the coordinates are there and it has an id. I am not sure what is happening.
Thanks!
What is the zoneEntities variable? If it is a layer/entityCollection this would cause an issue as you already tried adding the shape to the map. Which map control are you using V7 or v8. V8 renders on an HTML5 canvas and has to redraw with every change to your shape. If you are changing the shapes in an interval like this and the interval is too small, the renderer will wait for the changes to stop for a period of time before drawing. Looking at your code you aren't specifying an interval time which means it is firing this even a ridiculous number of times.
Related
I want to combine all the Landsat sensors from 1985 up today in Google Earth Engine, remove the clouds and calculate the time-series of the NBR index. As a new GEE user I have the following:
// find all data and filter them by date
var lst5 = ee.ImageCollection('LANDSAT/LT5_SR').filterDate('1984-10-01', '2011-10-01');
var lst7 = ee.ImageCollection('LANDSAT/LE7_SR').filterDate('2011-10-01', '2013-04-07');
var lst8 = ee.ImageCollection('LANDSAT/LC8_SR').filterDate('2013-04-07', '2018-05-01');
var lst7_08 = ee.ImageCollection('LANDSAT/LE7_SR').filterDate('2007-12-01', '2008-02-01');
var lst7_92 = ee.ImageCollection('LANDSAT/LT4_SR').filterDate('1992-01-02', '1992-04-01');
// Combine all landsat data, 1985 through 2015
var everything = ee.ImageCollection(lst5.merge(lst7));
everything = everything.merge(lst8);
everything = everything.merge(lst7_08);
everything = everything.merge(lst7_92);
var alltogether = ee.ImageCollection(everything.filterDate('1984-01-01', '2018-05-01'));
From this point, I do not know how to remove the clouds and calculate the NBR index (NBR index here) for every image in my final collection.
Can anyone help me?
Thank you.
EDIT:
I think that I need to map a normalizedDifference function over my collection in order to get the NBR index but I am not sure how to do this for my collection with the different sensors.
You've got quite a lot going on here, but here's what I think you want. You should check this very carefully to ensure it's behaving as intended:
// Function to cloud mask Landsat 8.
var maskL8SR = function(image) {
// Bits 3 and 5 are cloud shadow and cloud, respectively.
var cloudShadowBitMask = ee.Number(2).pow(3).int();
var cloudsBitMask = ee.Number(2).pow(5).int();
// Get the QA band.
var qa = image.select('pixel_qa');
// Both flags should be set to zero, indicating clear conditions.
var mask = qa.bitwiseAnd(cloudShadowBitMask).eq(0).and(
qa.bitwiseAnd(cloudsBitMask).eq(0));
return image
// Scale the data to reflectance and temperature.
.select(['B5', 'B7'], ['NIR', 'SWIR']).multiply(0.0001)
.addBands(image.select(['B11'], ['Thermal']).multiply(0.1))
.updateMask(mask);
};
// Function to cloud mask Landsats 5-7
var maskL57SR = function(image) {
var qa = image.select('pixel_qa');
// Second bit must be zero, meaning none to low cloud confidence.
var mask1 = qa.bitwiseAnd(ee.Number(2).pow(7).int()).eq(0).and(
qa.bitwiseAnd(ee.Number(2).pow(3).int()).lte(0)); // cloud shadow
// This gets rid of irritating fixed-pattern noise at the edge of the images.
var mask2 = image.select('B.*').gt(0).reduce('min');
return image
.select(['B4', 'B7'], ['NIR', 'SWIR']).multiply(0.0001)
.addBands(image.select(['B6'], ['Thermal']).multiply(0.1))
.updateMask(mask1.and(mask2));
};
// find all data and filter them by date
var lst5 = ee.ImageCollection('LANDSAT/LT05/C01/T1_SR')
.filterDate('1984-10-01', '2011-10-01')
.map(maskL57SR)
var lst7 = ee.ImageCollection('LANDSAT/LE07/C01/T1_SR')
.filterDate('2011-10-01', '2013-04-07')
.map(maskL57SR)
var lst8 = ee.ImageCollection('LANDSAT/LC08/C01/T1_SR')
.filterDate('2013-04-07', '2018-05-01')
.map(maskL8SR)
var lst7_08 = ee.ImageCollection('LANDSAT/LE07/C01/T1_SR')
.filterDate('2007-12-01', '2008-02-01')
.map(maskL57SR)
var lst7_92 = ee.ImageCollection('LANDSAT/LT04/C01/T1_SR')
.filterDate('1992-01-02', '1992-04-01')
.map(maskL57SR)
// Combine all landsat data, 1985 through 2015
var everything = ee.ImageCollection(lst5.merge(lst7));
everything = everything.merge(lst8);
everything = everything.merge(lst7_08);
everything = everything.merge(lst7_92);
// NBR:
var nbrFunction = function(image) {
image = ee.Image(image)
return image.addBands(image.expression(
'(nir - 0.0001 * swir * thermal) / ' +
'(nir + 0.0001 * swir * thermal)', {
nir: image.select(['NIR']),
swir: image.select(['SWIR']),
thermal: image.select(['Thermal'])
}).rename('NBR').clamp(-1, 1));
};
everything = everything.map(nbrFunction);
var check = ee.Image(everything.first());
Map.centerObject(check);
Map.addLayer(check);
The answer works great for SR imagery! Thanks! Sorry I can't just comment because I don't have 50 reputation yet, but I saw #Abhilash Singh Chauhan's question about why ee.Number(2).pow(3)... is used for the variables cloudshadow and clouds. I had the same question and I wanted to answer that it's because of the fact that the QA Pixel bands are Decimal integers that contain Binary information. So for example band 3 for surface reflectance LANDSAT products indicates the band for cloud shadow but the values are in binary. To get the values you need to convert the band to binary, hence 2^3 and similarly 2^5 for cloud values. I hope that clarifies the comment. you can check this here: https://www.usgs.gov/landsat-missions/landsat-4-7-surface-reflectance-quality-assessment
i am new in cocos2d-js here, i just created this code:`
var that = this;
that._dice
// add player
// create sprite sheet
cc.spriteFrameCache.addSpriteFrames(res.dice_plist);
var spriteSheet = new cc.SpriteBatchNode(res.diceRed_png);
that.addChild(spriteSheet, 2);
// init runningAction
var animFrames = [];
for (var i = 1; i < 7; i++) {
var str = "dieRed" + i + ".png";
var frame = cc.spriteFrameCache.getSpriteFrame(str);
animFrames.push(frame);
}
var animation = new cc.Animation(animFrames, 0.1);
that.runningAction = new cc.Repeat.create(new cc.Animate(animation), Math.random()*10);
var diceSprite = new cc.Sprite("#dieRed1.png");
diceSprite.visible = true;
console.log(this.getContentSize(diceSprite));
diceSprite.runAction(this.runningAction);
that._dice.push(diceSprite);
var size = cc.winSize;
spriteSheet.setPosition(size.width/6.5, size.height/1.20);
spriteSheet.setAnchorPoint(0.5, 0.5);
spriteSheet.addChild(diceSprite, 2);
`
and i would like to use the getFrames() feature to return the array of ccanimation frames. i'm just thinking to get the information of which picture are being animated on the screen there, for example, if the #dieRed1.png is being animated or visible on the screen, it would show value or return value of 1. i have tried to googled around and cannot find any other clue there. if there is any better method, i would love to see that as well. sorry for the english anyway, a bit confused how to arrange the words. thank you :)
Ok, so refering to
the official docs
{Array} getFrames()
Returns the array of animation frames
Which means you can just do:
var frames = animation.getFrames();
To get the array. And then you'll receive an array of cc.AnimationFrame.
To get sprite link do:
var frame = frames[0];//cc.AnimationFrame
var spriteFrame = frame.getSpriteFrame(); //cc.SpriteFrame
var texture = spriteFrame.getTexture(); // cc.Texture
And the texture itself should have the name attribute which may do the job.
i have so many columns in my shp,
i use data from my shp to show vector layer,
and i did it but sometimes take a long time even unresponsive script
can anyone help me how to show vector layers from shp in geoserver faster
this is my code that im using
var hitungJumlah = vectorSource.getFeatures();
for(var k=0;k<hitungJumlah.length;k++){
var id = vectorSource.getFeatures()[k].getId();
var feature = vectorSource.getFeatureById(id);
if(feature.get('klas')!=null){
var a = feature.get('klas');
}else{
a = "";
}
if(a=="Utama"){
//warna is my ol.layer.Vector
warna.getSource().addFeature(feature);
}
}
I'm trying to draw a Circle around every kind of geometry (could be every ol.geom type: point,polygon etc.) in an event called on 'postcompose'. The purpose of this is to create an animation when a certain feature is selected.
listenerKeys.push(map.on('postcompose',
goog.bind(this.draw_, this, data)));
this.draw_ = function(data, postComposeRender){
var extent = feature.getGeometry().getExtent();
var flashGeom = new ol.geom.Polygon.fromExtent(extent);
var vectorContext = postComposeRender.vectorContext;
...//ANIMATION CODE TO GET THE RADIUS WITH THE ELAPSED TIME
var imageStyle = this.getStyleSquare_(radius, opacity);
vectorContext.setImageStyle(imageStyle);
vectorContext.drawPolygonGeometry(flashGeom, null);
}
The method
drawPolygonGeometry( {ol.geom.Polygon} , {ol.feature} )
is not working. However, it works when I use the method
drawPointGeometry({ol.geom.Point}, {ol.feature} )
Even if the type of flashGeom is
ol.geom.Polygon that I just built from an extent. I don't want to use this method because extents from polygons could be received and it animates for every point of the polygon...
Finally, after analyzing the way drawPolygonGeometry in OL3 works in the source code, I realized that I need to to apply the style with this method before :
vectorContext.setFillStrokeStyle(imageStyle.getFill(),
imageStyle.getStroke());
DrawPointGeometry and drawPolygonGeometry are not using the same style instance.
Background: I'm a dev that knows JS, but is relatively new to Three JS. I've done a few small projects that involve static scenes with basic repeating animation.
I'm currently working on a modified version of Google's Globe project http://workshop.chromeexperiments.com/globe/. Looking back, I probably should have just started from scratch, but it was a good tool to see the approach their dev took. I just wish I could now update ThreeJS w/o the whole thing falling apart (too many unsupported methods and some bugs I never could fix, at least not in the hour I attempted it).
In the original, they are merging all of the geometric points into one object to speed up FPS. For my purposes, I'm updating the points on the globe using JSON, and there will never be more than 100 (probably no more than 60 actually), so they need to remain individual. I've removed the "combine" phase so I can now individually assign data to the points and then TWEEN the height change animation.
My question is, how do I manually select a single point (which is a Cube Geometry) so that I can modify the height value? I've looked through Stack Overflow and Three JS on GitHub and I'm not sure I understand the process. I'm assigning an ID to make it directly relate to the data that is being passed into it (I know WebGL adds an individual name/ID for particles, but I need something that is more directly related to what I'm doing for the sake of simplicity). That seems to work fine. But again, as a JS dev I've tried .getElementById(id) and $('#'+id) in jQuery, and neither works. I realize that Geometry objects don't behave the same way as HTML DOM objects, so I guess that's where I'm having struggles.
Code to add a point of data to the globe:
function addPoint(lat, lng, size, color, server) {
geometry = new THREE.Cube(0.75, 0.75, 1, 1, 1, 1, null, false, { px: true,
nx: true, py: true, ny: true, pz: false, nz: true});
for (var i = 0; i < geometry.vertices.length; i++) {
var vertex = geometry.vertices[i];
vertex.position.z += 0.5;
}
var point = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial ({
vertexColors: THREE.FaceColors
}));
var phi = (90 - lat) * Math.PI / 180;
var theta = (180 - lng) * Math.PI / 180;
point.position.x = 200 * Math.sin(phi) * Math.cos(theta);
point.position.y = 200 * Math.cos(phi);
point.position.z = 200 * Math.sin(phi) * Math.sin(theta);
if($('#'+server).length > 0) {
server = server+'b';
}
point.id = server;
point.lookAt(mesh.position);
point.scale.z = -size;
point.updateMatrix();
for (var i = 0; i < point.geometry.faces.length; i++) {
point.geometry.faces[i].color = color;
}
console.log(point.id);
scene.addObject(point);
}
So now to go back, I know I can't use point.id because obviously that will only reference inside the function. But I've tried 'Globe.id', 'Globe.object.id', 'object.id', and nothing seems to work. I know it is possible, I just can't seem to find a method that works.
Okay, I found a method that works for this by playing with the structure.
Essentially, the scene is labeled "globe" and all objects are its children. So treating the scene as an array, we can successfully pass an object into a var using the following structure:
Globe > Scene > Children > [Object]
Using a matching function, we loop through each item and find the desired geometric object and assign it to a temporary var for animation/adjustment:
function updatePoints(server){
var p, lineObject;
$.getJSON('/JSON/'+server+'.json', function(serverdata) {
/* script that sets p to either 0 or 1 depending on dataset */
var pointId = server+p;
//Cycle through all of the child objects and find a patch in
for(var t = 3; t < globe.scene.children.length; t++) {
if(globe.scene.children[t].name === pointId) {
//set temp var "lineObject" to the matched object
lineObject = globe.scene.children[t];
}
}
/* Manipulation based on data here, using lineObject */
});
}
I don't know if this is something that anyone else has had questions on, but I hope it helps someone else! :)
EDIT: Just realized this isn't a keyed array so I can use .length to get total # of objects