2

I'm using OpenLayers to build a map with some features that are polygons, together they are a heat map which shows the number of issues in that area.

When I click on a feature, for now, it shows an alert that says "clicked", but some features does not fire the click action, some of them when I click, the click works, the others the click does not work.

Here is my code:

    var listaBairros = document.getElementById("lista-bairros").value;
var lotes = [];

lotes = lotes_parser();

var styles = [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
        })
    })
];

var styles15 = function () {
    return [new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(80, 233, 179,1)'
        })
    })];
};

var styles610 = [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'yellow',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(213, 236, 70, 1)'
        })
    })
];

var styles1115 = [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'orange',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(246, 149, 56, 1)'
        })
    })
];

var styles15mais = [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'purple',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255, 0, 119, 1)'
        })
    })
];


var osm = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var vectorSource = new ol.source.Vector({        
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    name: 'bairros'
});

var map = new ol.Map({
    interactions: ol.interaction.defaults({
        doubleClickZoom: false,
        dragAndDrop: false,
        dragPan: false,
        keyboardPan: false,
        keyboardZoom: false,
        mouseWheelZoom: false,
        pointer: false,
        select: false
    }),
    controls: ol.control.defaults({
        attribution: false,
        zoom: false,
    }),
    layers: [vectorLayer],
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([-46.48758604980461, -23.9616060511448], 'EPSG:3857'),
        zoom: 12
    })
});

map.on('click', function (evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,
        function (feature) {
            return feature;
        });

    if (feature) {
        coord = map.getView().getCenter();            
        alert("clicked");
    }
});


assignFeaturesToPolygon();




function polygonToArray(entrada) {
    var removePolygon = entrada.replace("POLYGON ((", "").replace("))", "").replace("(", "").replace(")", "");
    var points = removePolygon.split(", ");
    var finalPoints = [];
    points.forEach(function (point) {
        var temporaryPoint = point.split(" ");
        temporaryPoint[0] = Number(temporaryPoint[0]);
        temporaryPoint[1] = parseFloat(temporaryPoint[1]);
        finalPoints.push(temporaryPoint);
    })
    return finalPoints;
}

function assignFeaturesToPolygon() {        
    lotes.forEach(function (value, index) {
        var new_feature = criarFeature(value);
        var teste = Math.floor((Math.random() * 4) + 1);

        if (teste == 1) {
            new_feature.setStyle(styles15);
        } else if (teste == 2) {
            new_feature.setStyle(styles610);
        } else if (teste == 3) {
            new_feature.setStyle(styles1115);
        } else if (teste == 4) {
            new_feature.setStyle(styles15mais);
        }
        vectorSource.addFeature(new_feature);            
    });
};

function criarFeature(geometria) {
    var feature = new ol.Feature(
        new ol.geom.Polygon([geometria])
    );

    feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
    return feature;
}


function lotes_parser() {
    var bairros_separados = [];
    var bairros_parser = listaBairros.split(" _ ");
    bairros_parser.forEach(function (lote, index) {
        bairros_separados.push(polygonToArray(lote));
    });
    return bairros_separados;
}

This is all of my map code because I don't know what is really usefull to find an answer.

This is the input with the data that I'm working on:

https://pastebin.com/hXpng27j

I used pastebin because it is too many lines.

Another edit here:

In jsFiddle the code works perfectly, but in my C# Project it does not. Does anyone have any idea what is wrong?

Link to jsFiddle > https://jsfiddle.net/5u95mwqb/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.