在 OpenLayers 3 中格式化 MousePosition 控件输出答案

【问题标题】：Formatting the MousePosition control output in OpenLayers 3在 OpenLayers 3 中格式化 MousePosition 控件输出
【发布时间】：2014-11-12 06:15:09
【问题描述】：

我正在使用以下控件在 OpenLayers 3 中显示鼠标位置

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

但结果显示鼠标位置为 Lon,Lat 而不是 Lat,Lon。

这是jsfiddle example。

我怎样才能颠倒顺序，使它成为纬度，经度？

【问题讨论】：

标签： openlayers-3

【解决方案1】：

添加各种控件（包括经纬度）对我有用的是：

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()
];

（修改自the book of openlayers 3）

【讨论】：

【解决方案2】：

您将坐标格式 - “标准函数”更改为自定义函数：

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;'
});

查看您修改后的fiddle

【讨论】：

【解决方案3】：

另一种选择：

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;'
    });

【讨论】：

【解决方案4】：

也有助于以度、分、秒显示：

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;'
        })
    ]),

【讨论】：

【解决方案5】：

在 OpenLayers 3.7.0 中工作。由于地图视图位于“EGPS:3857”中，使用 proj4js 将坐标重新投影到不同的投影：

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);

【讨论】：