source: sapic/static/explicacion_situacional/explicacion_situacional_map.js @ ce65723

$(document).ready(function () {
    $('#id_coordenadas_div_map').attr({
        'class': 'col-md-10 col-md-offset-2 text-center'
    });
    
    var clearFeatures = $('.clear_features a');
    clearFeatures.text('Eliminar selección');
    clearFeatures.attr({
        class: 'btn btn-warning'
    });
    $("#id_map_cartografico").fileinput({
        showCaption: true,
        previewFileType: "image",
        browseClass: "btn btn-danger",
        browseLabel: "Subir Imagen del mapa cartográfico",
        browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
        removeLabel: "Eliminar",
        uploadLabel: "Actualizar"
    });

    map = new ol.Map('id_coordenadas_map');
});

/**
 * @brief Función que permite cargar los datos geográficos de una comunidad seleccionada
 *
 * @author Ing. Roldan Vargas <rvargas@cenditel.gob.ve>
 * @copyright <a href='http://www.gnu.org/licenses/gpl-2.0.html'>GNU Public License versión 2 (GPLv2)</a>
 * @param data_selected Identificador de la comunidad seleccionada
 * @return Retorna falso en caso de que no se haya seleccionado ninguna comunidad
 */
function cargar_datos_ubicacion(data_selected) {
    if (data_selected) {
        var image = new ol.style.Circle({
            radius: 5,
            fill: null,
            stroke: new ol.style.Stroke({color: 'red', width: 1})
        });
        var styles = {
            'Point': new ol.style.Style({
                image: image
            }),
            'LineString': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'green',
                    width: 1
                })
            }),
            'MultiLineString': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'green',
                    width: 1
                })
            }),
            'MultiPoint': new ol.style.Style({
                image: image
            }),
            'MultiPolygon': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'yellow',
                    width: 1
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 0, 0.1)'
                })
            }),
            'Polygon': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    lineDash: [4],
                    width: 3
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0.1)'
                })
            }),
            'GeometryCollection': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'magenta',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'magenta'
                }),
                image: new ol.style.Circle({
                    radius: 10,
                    fill: null,
                    stroke: new ol.style.Stroke({
                        color: 'magenta'
                    })
                })
            }),
            'Circle': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255,0,0,0.2)'
                })
            })
        };
        var styleFunction = function(feature) {
            console.log(feature.getGeometry().getType())
            return styles[feature.getGeometry().getType()];
        };
        axios.get('/cargar-geometria?comunidad_id='+data_selected)
             .then(function (response) {
                //console.log(document.getElementById('id_coordenadas_div_map'))
                var geojsonObject = {
                    'type': 'FeatureCollection',
                    'crs': {
                        'type': 'name',
                        'properties': {
                            'name': 'EPSG:3857'
                        }
                    },
                    'features': [{
                        'type': 'Feature',
                        'geometry': JSON.parse(response.data.coordenadas),
                        'properties': {
                            'name': 'Comunidad [' + response.data.comunidad + ']'
                        }
                    }]
                };
                //console.log(geojsonObject);
                /*var map = new ol.Map({
                    layers: [new ol.layer.Vector({
                        source: new ol.source.Vector({
                            features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
                        }),
                        style: styleFunction
                    })],
                    target: 'id_coordenadas_div_map',
                    controls: ol.control.defaults({
                        attributionOptions: {
                            collapsible: false
                        }
                    }),
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 2
                    })
                });*/
                var map = new ol.Map('id_coordenadas_div_map');
                map.addLayer(new ol.layer.Vector({
                        source: new ol.source.Vector({
                            features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
                        }),
                        style: ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: 'blue',
                                lineDash: [4],
                                width: 3
                            }),
                            fill: new ol.style.Fill({
                                color: 'rgba(0, 0, 255, 0.1)'
                            })
                        })
                    }));
                //console.log(response.data.coordenadas);
            })
             .catch(function (error) {
                // handle error
                console.log(error);
            });

    }
}