draw the biggest polygon and more stuff

parent 1ec08d39
...@@ -55,7 +55,6 @@ var makeRequest = function (value) { ...@@ -55,7 +55,6 @@ var makeRequest = function (value) {
}, },
dataType: 'json', dataType: 'json',
success: function(data) { success: function(data) {
console.log("DATA: ", data.polygonList);
polygonList = data.polygonList; polygonList = data.polygonList;
while (pol_element.firstChild) { while (pol_element.firstChild) {
...@@ -75,9 +74,19 @@ var makeRequest = function (value) { ...@@ -75,9 +74,19 @@ var makeRequest = function (value) {
}; };
function drawPolygon(element) { function drawPolygon(element) {
polygonList.forEach(function (pol) { polygonList.forEach(function (polygon) {
if (pol.id === element.id) { if (polygon.id === element.id) {
console.log(pol); // remove prev polygon
osmap.removePolygon();
// format coords to draw
var coords = osmap.formatCoords(polygon.geojson.geometry.coordinates);
// get the biggest area
var biggest = osmap.getBiggestPolygon(coords);
// draw coords
osmap.addPolygon(biggest);
} }
}) })
} }
...@@ -138,7 +147,6 @@ $(document).ready(function () { ...@@ -138,7 +147,6 @@ $(document).ready(function () {
return return
} }
console.log(value);
// console.log("TOKEN: ", document.getElementsByName('csrfmiddlewaretoken')[0].value); // console.log("TOKEN: ", document.getElementsByName('csrfmiddlewaretoken')[0].value);
makeRequest(value); makeRequest(value);
// $.ajax({ // $.ajax({
......
...@@ -87,29 +87,71 @@ OpenStreetMapsClass.prototype.geolocation = function() ...@@ -87,29 +87,71 @@ OpenStreetMapsClass.prototype.geolocation = function()
*/ */
OpenStreetMapsClass.prototype.addPolygon = function(coords) OpenStreetMapsClass.prototype.addPolygon = function(coords)
{ {
// formar coords
var polyCoords = [];
for (var index in coords) {
var c = coords[index];
polyCoords.push(ol.proj.fromLonLat([parseFloat(c[0]), parseFloat(c[1])], 'EPSG:3857', 'EPSG:4326'));
}
// remove previous layers
this.vectorLayer.getSource().clear();
// create feature // create feature
var feature = new ol.Feature({ var feature = new ol.Feature({
geometry: new ol.geom.Polygon([polyCoords]) geometry: new ol.geom.Polygon(coords)
}) })
// add feature to map with zoom animation // fit zoom with animation
this.map.getView().fit(feature.getGeometry(), {duration: 1000, padding: [0, 0, 70, 0]}); this.map.getView().fit(feature.getGeometry(), {duration: 1000, padding: [0, 0, 70, 0]});
// add feature to map
this.vectorLayer.getSource().addFeature(feature); this.vectorLayer.getSource().addFeature(feature);
// show coords // show coords
document.getElementById("id_polygon").value = feature.getGeometry().clone().transform( 'EPSG:3857', 'EPSG:4326').getCoordinates(); document.getElementById("id_polygon").value = feature.getGeometry().clone().transform( 'EPSG:3857', 'EPSG:4326').getCoordinates();
} }
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
/**
* calculate the area of each polygon and return the coords of the biggest polygon
* @param coords polygons coords
* @return biggest coords of the biggest polygon
*/
OpenStreetMapsClass.prototype.getBiggestPolygon = function(coords)
{
if (coords.length <= 1) { return coords; }
// calculate areas
var areas = [];
for (var index in coords) {
var polygon = new ol.geom.Polygon([coords[index]]);
var area = ol.Sphere.getArea(polygon);
areas.push(area);
}
// get coords with max area
var max = Math.max.apply(null, areas);
var biggest = coords[areas.indexOf(max)];
return [biggest];
}
//------------------------------------------------------------------------------
/**
* format database coords to openlayers coords
* @param coords database coords array
* @return formatCoords coords with correct format
*/
OpenStreetMapsClass.prototype.formatCoords = function(coords)
{
var formatCoords = [];
// algunos municipios tienes regiones separadas (campeche tiene 4, merida tiene 1)
for (var index = coords.length - 1; index >= 0; index--) {
var regionCoords = [];
var region = coords[index][0];
// se formatea las coordenadas de una region
for (var regionIndex = region.length - 1; regionIndex >= 0; regionIndex--) {
var c = region[regionIndex];
regionCoords.push(ol.proj.fromLonLat([parseFloat(c[0]), parseFloat(c[1])], 'EPSG:3857', 'EPSG:4326'));
}
formatCoords.push(regionCoords);
}
return formatCoords;
}
//------------------------------------------------------------------------------
/** /**
* set value in input with wkt format * set value in input with wkt format
* POLYGON ((30 10, 40 40, 20 40, 10 20, 30 10)) * POLYGON ((30 10, 40 40, 20 40, 10 20, 30 10))
...@@ -121,6 +163,14 @@ OpenStreetMapsClass.prototype.setPolygonInputValue = function(coords) ...@@ -121,6 +163,14 @@ OpenStreetMapsClass.prototype.setPolygonInputValue = function(coords)
// todo // todo
} }
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
/**
* delete current polygon in map
*/
OpenStreetMapsClass.prototype.removePolygon = function()
{
this.vectorLayer.getSource().clear();
}
//------------------------------------------------------------------------------
/** /**
* @param lng Longitude * @param lng Longitude
* @param lat Latitude * @param lat Latitude
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment