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

Question

我想更改 ol.control.MouseControl (openlayers 3.15.1) 的 target 属性内的输出文本。现在，代码仅显示经度和纬度值我想在单个值之前添加“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/ .