将事件绑定到openlayer3映射

Question

I have a div in my webpage that contains many tabs and each tab contains one openlayer map in it.

The problem is when i'm using following code to attach a click event to the map , it is not working.

//create map in given div ID//
    createMap : function(id) {

         var _this = this;//To refer this dojo AMD module
         //Array of maps.
         //_this.index to track the total no. of maps.
        _this.maps[_this.index] = new ol.Map({
            controls: [],
            interactions: [],
            //layers: [_this.raster],
            target: id,
            view: new ol.View({
                center: [0, 0],
                zoom: 4,
            })
        });

        //get the latlong on
        //map click


        var thisMap = _this.maps[_this.index];
         //Attaching the event.
        _this.maps[_this.index].on("click", function(evt){
            console.log(evt);
        });
    }

But when i'm using the following code to attach event its working fine.

//create map in given div ID//
    createMap : function(id) {

         var _this = this;//To refer this dojo AMD module
         //Array of maps.
         //_this.index to track the total no. of maps.
        _this.maps[_this.index] = new ol.Map({
            controls: [],
            interactions: [],
            //layers: [_this.raster],
            target: id,
            view: new ol.View({
                center: [0, 0],
                zoom: 4,
            })
        });

        //get the latlong on
        //map click


        var thisMap = _this.maps[_this.index];

        //Attaching the event

        _this.maps[_this.index].getViewport().addEventListener("click", function(evt){
            console.log(evt);
        });
    }

But i don't want to use the second method to register the event because the first approach is a part of openlayer and i can do so many things with the mouseEvent argument like i can get the latitude and longitude directly.

Earlier both were used to working but then i re-created my GUI using dojo widget after that first method stopped working.

Can anyone help me what's wrong ? or what additional thing require to use first method?

Answer 1

Try this way:

createMap : function(id) {

    var thisMap = new ol.Map({
        controls: [],
        interactions: [],
        //layers: [_this.raster],
        target: id,
        view: new ol.View({
            center: [0, 0],
            zoom: 4,
        })
    });

    thisMap.on('click', function(evt){

    });

    this.maps.push(thisMap);
}