编辑输出字符串函数ol.control.MouseControl

Question

我想更改ol.control.MouseControl（openlayers 3.15.1）的目标属性内的输出文本。现在，代码只显示经度和纬度值，我想在单个值之前添加"long"字符串和"lat"字符串：例如lat:12.543，long:14.567。我该怎么做？？

var regStyle = new ol.style.Style ({
           fill: new ol.style.Fill({
            color: 'rgba(127,129,112,0.1)'

           }),
           stroke: new ol.style.Stroke({
            color: 'green', width: 2})                             
        });

var reg = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'http://localhost:8080/Project_first/assets/geojson/regioni.geojson',
    format: new ol.format.GeoJSON(),
    projection: 'EPSG:3857' 
  }),
  style: regStyle
});


var prov = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'http://localhost:8080/Project_first/assets/kml/province.kml',
    format: new ol.format.KML(),
    projection: 'EPSG:3857'
  })
});

  var base_layer = new ol.layer.Tile({
    source: new ol.source.OSM()
  }); 
  var italy = ol.proj.fromLonLat([14.334, 40.965])
  var view = new ol.View({
    center: italy,
    zoom: 6,
  });

var scale = new ol.control.ScaleLine({
  className: 'ol-scale-line',
  target: document.getElementById('scale-line')
});


  var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(2),
        projection: 'EPSG:3857',
        // comment the following two lines to have the mouse position
        // be placed within the map.
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: ' '
      });





  var scale = new ol.control.ScaleLine();
  var map = new ol.Map({
     controls: ol.control.defaults({
          attributionOptions: ({  collapsible: false })
           }).extend([mousePositionControl, scale]),
    target: 'map',
    layers: [base_layer, prov,reg],
    view: view
  });


  function initMap()
{
    // do map object creation and initialization here
    // ...
    // add a click event handler to the map object
    GEvent.addListener(map, "click", function(overlay, latLng)
    {
        // display the lat/lng in your form's lat/lng fields
        document.getElementById("lat").value = latLng.lat();
        document.getElementById("lng").value = latLng.lng();
    });
}

Answer 1

您可以创建这样的自定义函数：

function formatCoord(fraction) {
  var template = 'Coordinate is: {x} | {y}';
  return (
    function(coordinate) {
        return ol.coordinate.format(coordinate, template, fraction);
    });
}

然后在ol.control.MousePosition构造函数中将其传递给coordinateFormat

var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: formatCoord(2),
  projection: 'EPSG:4326',
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
  undefinedHTML: ' '
});

请参阅http://jsfiddle.net/jonataswalker/qchbpawm/.

Answer 2

有工作解决方案：

function formatC(prec) {
  var template = 'Coordinate is: {x} | {y}';
  return (
    function(coordinate) {
        var cs = ol.coordinate.format(coordinate, template, fraction);
        console.log( 'cs='+cs);
        return
    });
}
var mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: formatC(6), // ol.coordinate.createStringXY(6), 
    projection: 'EPSG:4326',
    className: 'custom-mouse-position',
    target: document.getElementById('mapCoDiv'), //   'latitude'
    undefinedHTML: ' '
});

2） 如何利用render功能仍然是个问题：

    var assCoor = function(e) {
        var coo = e. ????? 
        var lat, long = coo.split(',');
        console.log( 'lat='+lat+',   long='+long ); 
        $('#'+this.latEl).val(lat);
        $('#'+this.longEl).val(long);    
    }; 

   var mousePositionControl = new ol.control.MousePosition({
        // shall disbale this function coordinateFormat: formatCoord(6), // ol.coordinate.createStringXY(6), 
        projection: 'EPSG:4326',
        render : assCoor,
        className: 'custom-mouse-position',
        target: document.getElementById('mapCoDiv'), //   'latitude'
        undefinedHTML: ' '
    });