出力文字列関数の編集ol.control.MouseControl

Question

ol.control.MouseControl（openlayers 3.15.1）のtarget属性内の出力テキストを変更したいと思います。 コードでは、経度と緯度の値のみを表示します。たとえば、lat：12.543、long：14.567など、「long」文字列と「lat」文字列を単一の値の前に追加します。 どうすればいいですか？

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

をそしてol.control.MousePositionコンストラクタでcoordinateFormatにそれを渡します：

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

あなたはこのようなカスタム関数を作成することができます

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: ' ' 

    });