2014-11-12 19 views
7

sto mostra la posizione del mouse in OpenLayers 3 con il seguente controlloformattazione l'uscita di controllo MousePosition in OpenLayers 3

var mousePositionControl = new ol.control.MousePosition({ 
    coordinateFormat: ol.coordinate.createStringXY(2), 
    projection: 'EPSG:4326', 
    undefinedHTML: ' ' 
}); 

Ma il risultato mostra la posizione del mouse Lon, Lat anziché Lat, Lon.

Ecco uno jsfiddle example.

Come posso invertire l'ordine in modo che sia Lat, Lon?

risposta

8

Quello che funziona per me di aggiungere un varietà di controlli incl Lat, Long is:

var controls = [ 
 
    new ol.control.Attribution(), 
 
    new ol.control.MousePosition({ 
 
    projection: 'EPSG:4326', 
 
    coordinateFormat: function(coordinate) { 
 
     return ol.coordinate.format(coordinate, '{y}, {x}', 4); 
 
    } 
 
    }), 
 
    new ol.control.ScaleLine(), 
 
    new ol.control.Zoom(), 
 
    new ol.control.ZoomSlider(), 
 
    new ol.control.ZoomToExtent(), 
 
    new ol.control.FullScreen() 
 
];
(modificato dal the book of openlayers 3)

4

Cambi coordinateFormat - "funzione standard" per una funzione personalizzata:

var myFormat = function(dgts) 
{ 
    return (
    function(coord1) { 
     var coord2 = [coord1[1], coord1[0]]; 
     return ol.coordinate.toStringXY(coord2,dgts); 
    });   
} 

var mousePositionControl = new ol.control.MousePosition({ 
    coordinateFormat: myFormat(2), // <--- change here 
    projection: 'EPSG:4326', 
    className: 'custom-mouse-position', 
    target: document.getElementById('mouse-position'), 
    undefinedHTML: '&nbsp;' 
}); 

vedere il tuo modificato fiddle

3

Un'alternativa:

var template = 'LatLon: {y}, {x}'; 

var mousePositionControl = new ol.control.MousePosition({ 
    coordinateFormat: function(coord) {return ol.coordinate.format(coord, template, 2);}, 
    projection: 'EPSG:4326', 
    undefinedHTML: '&nbsp;' 
    }); 
2

anche utile per visualizzare in gradi, minuti, secondi:

controls: ol.control.defaults().extend([ 
     new ol.control.ScaleLine({ 
      units: 'nautical' 
     }), 
     new ol.control.MousePosition({ 
      coordinateFormat: function(coord) { 
       return ol.coordinate.toStringHDMS(coord); 
      }, 
      projection: 'EPSG:4326', 
      className: 'custom-mouse-position', 
      target: document.getElementById('mouse-position'), 
      undefinedHTML: '&nbsp;' 
     }) 
    ]), 
0

Opere in OpenLayers 3.7.0. Utilizzando proj4js Riproiettare coordinate di una proiezione diversa causa Mappa essendo in 'EGPS: 3857':

var proj1 = proj4.defs('EPSG:4326'); 
 
var proj2 = proj4.defs('EPSG:3857'); 
 

 
var myFormat = function(digits) { 
 
    return (
 
    function(originalCoordinates) { 
 
     var reprojectedCoordinates = proj4(proj2, proj1).forward(originalCoordinates); 
 
     var switchedCoordinates = [reprojectedCoordinates[1], reprojectedCoordinates[0]]; 
 
     return ol.coordinate.toStringXY(switchedCoordinates, digits); 
 
    } 
 
); 
 
} 
 

 
var mousePositionControl = new ol.control.MousePosition({ 
 
    coordinateFormat: mojFormat(10), 
 
    projection: 'ESPG:4326', 
 
    undefinedHTML: '&nbsp' 
 
}); 
 
// map.addControl(mousePositionControl); //equivalent to setMap 
 
mousePositionControl.setMap(map);

Problemi correlati