微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我想更改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();
    });
}

解决方法

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

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

http://jsfiddle.net/jonataswalker/qchbpawm/.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐