javascript - Draw a convex hull on a google map -
i new javascript , working google maps api javascript.
this asignment school , provided working script , php code display map, position, update position , on.
our task implement convex hull algorithm.
these things i'm having problems with:
- the data-structure of objects
- how display lines of hull on map once i've computed them
here's code;
function convexhull(){ console.log("convexhull()"); console.log(obj.length); //check if there more 1 user, otherwise convex hull calculation useless if(obj.length > 0){ //lists x-positions , y-positions var pos_x = []; var pos_y = []; //fill lists for(var = 0;i < obj.length; i++){ pos_y.push(parsefloat(obj[i][1])); pos_x.push(parsefloat(obj[i][2])); console.log("point " + + ": lat = " + pos_y[i] + ", lon = " + pos_x[i]); } //find lowest point index var low_index = 0 for(var = 1;i < obj.length; i++){ if(pos_y[i] < pos_y[low_index]){ low_index = } } var angle_list = [] //make list of angles linked index, lowest point not in list for(var = 0;i < obj.length; i++){ if(i != low_index){ var opos = pos_y[i] - pos_y[low_index]; var adj = pos_x[i] - pos_x[low_index]; //opos positive, since point index low_index lowest point if(adj > 0){ var new_angle = math.atan(opos/adj); var list_item = {index:i, angle:new_angle}; angle_list.push(list_item); } if(adj < 0){ var new_angle = math.atan(opos/adj)+ math.pi; var list_item = {index:i, angle:new_angle}; angle_list.push(list_item); } if(adj == 0){ //if adj = 0, angle 90 degrees var new_angle = 90; var list_item = {index:i, angle:new_angle}; angle_list.push(list_item); } } } //sort angle_list ascending angles angle_list = angle_list.sort(function(a,b){return a.angle - b.angle;}); for(var i=0;i< angle_list.length;i++){ console.log("angle = " + angle_list[i].angle + ", index = " + angle_list[i].index); } //graham algorithm starts here //this list hold indexes of convex points var final_list = []; //put lowest point in angle_list var list_item = {index:low_index, angle:0}; angle_list.unshift(list_item); //new stuff here //eerst het beginpunt met laagste y-coor invoegen //english: inserting starting point [lowest y coordinate] final_list.unshift(angle_list[0]); for(var i=2;i<angle_list.length;i++){ var value = (((pos_x[angle_list[i-1].index]-pos_x[angle_list[i-2].index])*(pos_y[angle_list[(i)].index]-pos_y[angle_list[i-2].index]))-((pos_y[angle_list[i-1].index]-pos_y[angle_list[i-2].index])*(pos_x[angle_list[(i)].index]-pos_x[angle_list[i-2].index]))); //left turn, if(value > 0){ console.log("left turn"); final_list.push(angle_list[i-1]); } //right turn, not if(value < 0){ console.log("right turn"); continue; } //points lie on line if(value == 0){ final_list.push(angle_list[i-1]); console.log("colinear"); } } } settimeout(function(){convexhull();}, 5000); console.log(final_list);//this console outputs: [object, object, object, object, object] don't understand why has structure! return final_list; } function drawhull(final_list){ for(var = 0; < final_list.length-1; i++){ console.log(parsefloat(obj[final_list[i]])); var p1 = new l.latlng(parsefloat(obj[final_list[i]][1]),parsefloat(obj[final_list[i]][2])); var p2 = new l.latlng(parsefloat(obj[final_list[i+1]][1]),parsefloat(obj[final_list[i+1]][2])); var pointlist = [p1, p2]; polylines.push(new l.polyline(pointlist, { color: 'yellow', weight: 10, opacity: 0.5, smoothfactor: 1 }).addto(mymap)); } }
my main lookslike this;
getlocation(); var mymap = l.map('mapid').setview([51.0336851,3.7019778], 13); l.tilelayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accesstoken}', { attribution: 'map data © <a href="http://openstreetmap.org">openstreetmap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">cc-by-sa</a>, imagery © <a href="http://mapbox.com">mapbox</a>', maxzoom: 18, id: 'mapbox.streets', accesstoken: //i deleted this, figured should stay private }).addto(mymap); drawhull(convexhull()); //these 2 funcions , line things wrote classmate [and code based on code found on web , adjusted our needs]
basicly want know first why var final_list has structure [object, object, object, object, object] (what console outputs)
because error: uncaught typeerror: cannot read property 'length' of undefined @ drawhull
i think implemented algorithm in correct way, can't test out.
if need additional info don't hesitate ask, tips on how make question better welcome [this first question! take consideration , kind while providing constructive feedback]
i ended fixing myself , taught idea answer own question if people stumble uppon have answer :)
here's code:
function convexhull(){ console.log("convexhull()"); console.log(obj.length); //check if there more 1 user, otherwise convex hull calculation useless if(obj.length > 0){ //lists x-positions , y-positions var pos_x = []; var pos_y = []; //fill lists for(var = 0;i < obj.length; i++){ pos_y.push(parsefloat(obj[i][1])); pos_x.push(parsefloat(obj[i][2])); console.log("point " + + ": lat = " + pos_y[i] + ", lon = " + pos_x[i]); } //find lowest point index var low_index = 0 for(var = 1;i < obj.length; i++){ if(pos_y[i] < pos_y[low_index]){ low_index = } } var angle_list = [] //make list of angles linked index, lowest point not in list for(var = 0;i < obj.length; i++){ if(i != low_index){ var opos = pos_y[i] - pos_y[low_index]; var adj = pos_x[i] - pos_x[low_index]; //opos positive, since point index low_index lowest point if(adj > 0){ var new_angle = math.atan(opos/adj); var list_item = {index:i, angle:new_angle}; angle_list.push(list_item); } if(adj < 0){ var new_angle = math.atan(opos/adj)+ math.pi; var list_item = {index:i, angle:new_angle}; angle_list.push(list_item); } if(adj == 0){ //if adj = 0, angle 90 degrees var new_angle = 90; var list_item = {index:i, angle:new_angle}; angle_list.push(list_item); } } } //sort angle_list bij ascending angles angle_list = angle_list.sort(function(a,b){return a.angle - b.angle;}); for(var i=0;i< angle_list.length;i++){ console.log("angle = " + angle_list[i].angle + ", index = " + angle_list[i].index); } //graham algorithm starts here //this list hold indexes of convex points var final_list = []; //put lowest point in angle_list var list_item = {index:low_index, angle:0}; angle_list.unshift(list_item); //new stuff here //eerst het beginpunt met laagste y-coor invoegen final_list.unshift(angle_list[0]); for(var i=2;i<angle_list.length;i++){ var value = (((pos_x[angle_list[i-1].index]-pos_x[angle_list[i-2].index])*(pos_y[angle_list[(i)].index]-pos_y[angle_list[i-2].index]))-((pos_y[angle_list[i-1].index]-pos_y[angle_list[i-2].index])*(pos_x[angle_list[(i)].index]-pos_x[angle_list[i-2].index]))); //left turn, if(value > 0){ console.log("left turn"); final_list.push(angle_list[i-1]); if(i==angle_list.length-1)final_list.push(angle_list[i]); } //right turn, not if(value < 0){ console.log("right turn"); continue; } //points lie on line if(value == 0){ final_list.push(angle_list[i-1]); console.log("colinear"); } } } console.log(final_list);//dit de output: [object, object, object, object, object] console.log("final_list length: " + object.keys(final_list).length); console.log("drawing hull now\n"); //console.log("obj:" + obj + "\n"); for(var = 0; < object.keys(final_list).length-1; i++){ //console.log("obj[final_list[i].index]\n" + parsefloat(obj[final_list[i].index])); var p1 = new l.latlng(parsefloat(obj[final_list[i].index][1]),parsefloat(obj[final_list[i].index][2])); var p2 = new l.latlng(parsefloat(obj[final_list[i+1].index][1]),parsefloat(obj[final_list[i+1].index][2])); var pointlist = [p1, p2]; //adding last line close hull if(i == object.keys(final_list).length-2){ console.log("laatste punt bereikt"); var p1 = new l.latlng(parsefloat(obj[final_list[i+1].index][1]),parsefloat(obj[final_list[i+1].index][2])); var p2 = new l.latlng(parsefloat(obj[final_list[0].index][1]),parsefloat(obj[final_list[0].index][2]));//start var pointlist = [p1, p2]; } polylines.push(new l.polyline(pointlist, { color: 'yellow', weight: 5, opacity: 0.5, smoothfactor: 1 }).addto(mymap)); } settimeout(function(){convexhull();}, 5000); //l.polyline.setmap(null); }
Comments
Post a Comment