我想更改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();
});
}
答案 0 :(得分:0)
您可以创建一个像这样的自定义函数:
function formatCoord(fraction) {
var template = 'Coordinate is: {x} | {y}';
return (
function(coordinate) {
return ol.coordinate.format(coordinate, template, fraction);
});
}
然后将其传递给coordinateFormat
构造函数中的ol.control.MousePosition
:
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: formatCoord(2),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'),
undefinedHTML: ' '
});
答案 1 :(得分:0)
有工作解决方案:
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: ' '
});