我正在创建一个允许用户创建多个地图的网络应用程序。在每张地图上，用户都可以添加/删除标记。然后他们可以将其拖到适当的位置和/或更改标记的大小。在大多数情况下，功能正常，但我遇到了一个小问题。
当用户在地图之间来回切换时，应用程序应引用标记的纬度/经度（保存在变量中）并将其放回地图上。但是，当我切换到带有标记的上一张地图时，标记位置会稍微偏离。我觉得这与标记的锚值有关，但不太清楚如何解决问题。非常感谢任何帮助。
为了重现这个问题，我采取了以下步骤：
这里是 JSFiddle 与我当前代码的链接。
/*jshint multistr: true */
/*these variables will come from previous user elections */
var numMaps = 2;
var selectedMapStyle = "OSMHumanitarian" //this will be selected on previous step
/* end user variables */
var currentMap;
var mapDetails = [];
var layoutDetails = [];
var tmpMapData = [];
// set some variables
var currentLonLat = [-63.5859487, 44.648618]; //Halifax Lon/Lat
//var currentLonLat = [-63.61089784934739,44.67050745]; //Leeds St. Lon/Lat
var defaultZoom = 12;
var defaultRotation = 0;
mapCenter = (ol.proj.fromLonLat(currentLonLat)); //Converts Lon/Lat to center
//array with available markers
var availableMarkers = [
['https://testing.52weekdog.com/images/markers/marker_marker01_black.svg', 0.06, [0.5, 1], 'standard'],
['https://testing.52weekdog.com/images/markers/marker_marker02_black.svg', 1.1, [0.5, 1], 'minimal'],
['https://testing.52weekdog.com/images/markers/marker_house01_black.svg', 0.8, [0.5, 1], 'house'],
['https://testing.52weekdog.com/images/markers/marker_pin01_black.svg', 1, [0.5, 1], 'pin']
];
//setup the map
const marker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-63.5859487, 44.648618])),
});
const markerStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: availableMarkers[0][2],
anchorYUnits: 'pixels',
scale: availableMarkers[0][1],
src: availableMarkers[0][0]
})
});
const vectorSource = new ol.layer.Vector({
source: new ol.source.Vector({
features: [marker]
}),
style: markerStyle
});
marker.setStyle([markerStyle]);
const map = new ol.Map({
view: new ol.View({
center: mapCenter,
zoom: defaultZoom,
rotation: defaultRotation,
}),
target: 'map',
controls: []
});
var view = map.getView();
var translate = new ol.interaction.Translate({
features: new ol.Collection([marker])
});
map.addInteraction(translate);
translate.on('translating', function(evt) {
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
tmpMapData[currentMap][5] = lonlat;
document.getElementById("markerDetails" + currentMap + "_lonlat").innerHTML = "[" + lonlat[0].toFixed(5) + ", " + lonlat[1].toFixed(5) + "]";
checkMarkerLocation();
});
//setup the map controls
const rotationbutton = new ol.control.Rotate({
target: 'rotateButton',
autoHide: false
});
const zoombuttons = new ol.control.Zoom({
target: 'zoom'
})
const zoomslider = new ol.control.ZoomSlider();
zoomslider.setTarget('zoom');
const attribution = new ol.control.Attribution({
className: 'ol-attribution customAttribution',
collapsed: false,
collapsible: false,
target: document.getElementById('attribution')
});
map.addControl(zoomslider);
map.addControl(zoombuttons);
map.addControl(rotationbutton);
map.addControl(attribution);
// when rotating using slider
rotationSlider.oninput = function() {
map.getView().setRotation(degreesToRads(this.value - 180));
}
// update the rotation
map.getView().on("change:rotation", function(event) {
deg = radsToDegrees(event.target.getRotation());
if (deg < -180) {
deg = deg + 360
} else if (deg > 180) {
deg = deg - 360;
}
document.getElementById('rotationSlider').value = deg + 180;
updateMapDetails();
});
// END ROTATION //
map.getView().on(['change:center', 'change:resolution', 'change:rotation'], function() {
updateMapDetails();
});
/* Base Map Layer */
const openStreetMapStandard = new ol.layer.Tile({
source: new ol.source.OSM(),
visible: false,
title: 'OSMStandard'
})
const openStreetMapHumanitarian = new ol.layer.Tile({
source: new ol.source.OSM({
url: 'https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
}),
visible: false,
title: 'OSMHumanitarian'
})
const stamenToner = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png',
attributions: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, \
under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. \
Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
}),
visible: false,
title: 'StamenToner'
})
const stamenTerrain = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',
attributions: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, \
under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. \
Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
}),
visible: false,
title: 'StamenTerrain'
})
const stamenWaterColor = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
attributions: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, \
under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. \
Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
}),
visible: false,
title: 'StamenWatercolor'
})
/* End Base Map Layer */
//Layer Group
const baseLayerGroup = new ol.layer.Group({
layers: [
openStreetMapStandard, openStreetMapHumanitarian, stamenToner, stamenTerrain, stamenWaterColor, OpenStreetMap_Mapnik
]
})
map.addLayer(baseLayerGroup);
//populate based on number of maps
addressesContainer = document.getElementById('addressPickerContainer').getElementsByClassName('addressPickerTabColumn')[0];
for (i = 1; i <= numMaps; i++) {
html = "<div id='MapTab" + i + "' class='addressPickerTab' onclick='clickTab(this)''>";
html += "<div>";
html += "<label>Map " + i + "</label><span>Incomplete</span>";
html += "<div class='autocomplete-container' id='autocomplete-container" + i + "'></div>";
html += "</div>";
html += "</div>";
html += "<div class='addressPickerDataBlock'>";
html += "<div class='mapDetails'>";
html += "<h4>Details for Map " + i + "</h4>";
html += "Address: <span class='mapInfo' id='mapDetails" + i + "_address1'></span><br>";
html += "Lon: <span class='mapInfo' id='mapDetails" + i + "_lon'> </span> Lat: <span class='mapInfo' id='mapDetails" + i + "_lat'></span><br>";
html += "Zoom: <span class='mapInfo' id='mapDetails" + i + "_zoom'></span> Map Rotation: <span class='mapInfo' id='mapDetails" + i + "_rotation'></span><br>";
html += "</div>";
html += "<div>";
html += "<label class='includeMarkerChk'>";
html += "<input type='checkbox' class='includeMarkerChk' id='includeMarkerChk" + i + "' onclick='toggleMarker(this)' /> Include a marker on this map.</label>";
html += "<div class='chkBoxArea'>";
html += "<button type='button' id='resetMarker" + i + "_btn' class='resetMarkerBtn' onclick='resetMarker()'>reset marker</button>";
html += "<select name='markerSelect' onchange='changeMarker(this)' id='markerSelect" + i + "'>";
for (m = 0; m < availableMarkers.length; m++) {
html += "<option value='" + m + "'>" + availableMarkers[m][3] + "</option>";
}
html += "</select><br>";
html += "Marker Size: <input type='range' oninput='resizeMarker(this)' id='markerSize" + i + "' min='1' max='100' value='10' class='markerSlider' onchange='resizeMarker(this)'>";
html += "<span class='mapInfo' id='markerDetails" + i + "_size'>10</span><br>";
html += "Current Marker Location: <span class='mapInfo' id='markerDetails" + i + "_lonlat'></span><br>";
html += "<span class='mapInfo markerVisible' id='markerDetails" + i + "_visible'>The location of the marker is not currently on the map.</span><br>";
html += "</div>";
html += "</div>";
html += "<div style='margin-top: -10px'>";
html += "<button type='button' id='saveMap" + i + "_btn' class='btn btn-primary btn-sm saveMapBtn'>Save Details</button>";
html += "</div>";
html += "</div>";
addressesContainer.innerHTML += html;
}
tmpMapData.push(["formatted", "lat", "lon", "zoom", "rotation", "markerLocation", "markerStyle", "markerSize", "mapStyle"]);
for (i = 1; i <= numMaps; i++) {
const j = i;
addressAutocomplete(document.getElementById("autocomplete-container" + j), (data) => {
if (data) {
//THIS IS WHAT HAPPENS WHEN AN ADDRESS IS SELECTED
tmp = [data.properties.lon, data.properties.lat];
tmpArray = [data.properties.formatted, data.properties.lat, data.properties.lon, defaultZoom, defaultRotation,
tmp, availableMarkers[0][0], "10", selectedMapStyle
];
tmpMapData[j] = tmpArray;
//updateMap();
document.getElementById("MapTab" + currentMap).nextElementSibling.classList.add("active");
document.getElementById('MapTab' + currentMap).children[0].children[1].innerHTML = "In Progress";
document.getElementById('MapTab' + currentMap).children[0].children[1].style.color = "orange";
} else {
// when delete X is pressed on autocomplete
}
}, {
placeholder: "Enter an address for map " + j
});
}
function updateMapDetails() {
var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
var zoom = view.getZoom();
var rotation = view.getRotation();
document.getElementById('mapDetails' + currentMap + '_address1').innerHTML = tmpMapData[currentMap][0];
document.getElementById('mapDetails' + currentMap + '_lat').innerHTML = center[1];
document.getElementById('mapDetails' + currentMap + '_lon').innerHTML = center[0];
document.getElementById('mapDetails' + currentMap + '_zoom').innerHTML = zoom;
document.getElementById('mapDetails' + currentMap + '_rotation').innerHTML = radsToDegrees(rotation) + "\u00B0";
document.getElementById('markerDetails' + currentMap + '_lonlat').innerHTML = "[" + tmpMapData[currentMap][5][0].toFixed(5) + ", " + tmpMapData[currentMap][5][1].toFixed(5) + "]";
document.getElementById('markerSize' + currentMap).value = tmpMapData[currentMap][7];
tmpMapData[currentMap][1] = center[1];
tmpMapData[currentMap][2] = center[0];
tmpMapData[currentMap][3] = zoom;
tmpMapData[currentMap][4] = radsToDegrees(rotation);
}
function clickTab(tab) {
clickedTab = document.getElementById(tab.id);
var tabNum = clickedTab.id.substring(clickedTab.id.indexOf("MapTab") + 6);
currentMap = tabNum;
//if map details already exist
if (tmpMapData[tabNum]) {
//hide the image
document.getElementById("layoutImage").style.display = "none";
//load the mapData
tmp_lat = tmpMapData[tabNum][1];
tmp_lon = tmpMapData[tabNum][2];
tmp_center = ol.proj.fromLonLat([tmp_lon, tmp_lat]);
map.removeLayer(vectorSource);
changeMarker(document.getElementById('markerSelect' + tabNum));
resizeMarker(document.getElementById('markerSize' + tabNum));
toggleMarker(document.getElementById('includeMarkerChk' + tabNum));
setMap(tmp_center, tmpMapData[tabNum][3], tmpMapData[tabNum][4]);
updateMapDetails();
} else {
//hide the map and show the layout
document.getElementById("layoutImage").style.display = "flex";
}
//switch the mask svg path
if (clickedTab.classList.contains('active')) { //if the clicked tab is already active
if (document.activeElement.classList[0] != "addressAutocompleteInput") { //if the active element isn't the autocomplete dropdown then minimize
clickedTab.classList.remove("active");
clickedTab.nextElementSibling.classList.remove("active");
document.getElementById("layoutImage").style.display = "flex";
document.getElementById("layoutImage").focus();
}
} else { //if the clicked tab is not currently active
for (i = 0; i < clickedTab.parentElement.children.length; i++) { //close any tabs that are 'active'
if (clickedTab.parentElement.children[i].classList.contains('active')) {
// minimize the tab and hide the details
clickedTab.parentElement.children[i].classList.remove("active");
clickedTab.parentElement.children[i].nextElementSibling.classList.remove("active");
}
}
//set the clicked tab to active
clickedTab.classList.add("active");
if (tmpMapData[currentMap]) {
clickedTab.nextElementSibling.classList.add("active");
}
document.getElementById("autocomplete-container" + currentMap + "-input").focus();
}
}
function setMap(center, zoom, rotation) {
map.getView().setCenter(center);
map.getView().setZoom(zoom);
map.getView().setRotation(degreesToRads(rotation));
//should add marker to this?
}
function toggleMarker(input) {
if (input.checked == true) {
input.parentElement.nextElementSibling.style.display = "block";
//if there is no marker location set then set it to the center of the map
marker.getGeometry().setCoordinates((ol.proj.fromLonLat(tmpMapData[currentMap][5])));
/* reset marker to center if the marker is not visible on map when markerchk is checked
if (checkMarkerLocation() == true){
marker.getGeometry().setCoordinates((ol.proj.fromLonLat([tmpMapData[currentMap][2], tmpMapData[currentMap][1]])));
}
*/
map.addLayer(vectorSource);
checkMarkerLocation();
} else {
input.parentElement.nextElementSibling.style.display = "none";
map.removeLayer(vectorSource);
}
}
function changeMarker(input) {
markerStyle.setImage(new ol.style.Icon({
anchor: availableMarkers[input.value][2],
scale: availableMarkers[input.value][1],
src: availableMarkers[input.value][0]
}));
marker.changed();
resizeMarker(document.getElementById('markerSize' + currentMap));
tmpMapData[currentMap][6] = availableMarkers[input.value][0];
//tmpMapData[currentMap][6] = availableMarkers[input.value][2];
//tmpMapData[currentMap][7] = availableMarkers[input.value][1];
}
function resizeMarker(input) {
newScale = input.value / 10 * availableMarkers[document.getElementById('markerSelect' + currentMap).value][1];
markerStyle.getImage().setScale([parseFloat(newScale), parseFloat(newScale)]);
document.getElementById('markerDetails' + currentMap + '_size').innerHTML = input.value;
tmpMapData[currentMap][7] = input.value;
marker.changed();
}
function resetMarker() {
marker.getGeometry().setCoordinates((ol.proj.fromLonLat(ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326'))));
tmpMapData[currentMap][5] = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
updateMapDetails();
resizeMarker(document.getElementById('markerSize' + currentMap));
}
function degreesToRads(deg) {
return (deg) * (Math.PI / 180);
}
function radsToDegrees(rad) {
return (rad) / (Math.PI / 180);
}
function checkMarkerLocation() {
const size = map.getSize();
const tl = map.getCoordinateFromPixel([0, 0]);
const tr = map.getCoordinateFromPixel([size[0], 0]);
const bl = map.getCoordinateFromPixel([0, size[1]]);
const br = map.getCoordinateFromPixel(size);
const polygon = new ol.geom.Polygon([
[tl, tr, br, bl, tl]
]);
if (polygon.intersectsCoordinate(marker.getGeometry().getCoordinates())) {
document.getElementById('markerDetails' + currentMap + '_visible').style.visibility = 'hidden';
return false;
} else {
document.getElementById('markerDetails' + currentMap + '_visible').style.visibility = 'visible';
return true;
}
}
function addressAutocomplete(containerElement, callback, options) {
// create input element
var inputElement = document.createElement("input");
inputElement.setAttribute("type", "text");
inputElement.setAttribute("class", "addressAutocompleteInput");
inputElement.setAttribute("id", containerElement.id + "-input");
inputElement.setAttribute("placeholder", options.placeholder);
containerElement.appendChild(inputElement);
// add input field clear button
var clearButton = document.createElement("div");
clearButton.classList.add("clear-button");
addIcon(clearButton);
//when a clear button is clicked
clearButton.addEventListener("click", (e) => {
//clear the currently selected address
e.stopPropagation();
inputElement.value = '';
callback(null);
clearButton.classList.remove("visible");
document.getElementById("autocomplete-container" + currentMap + "-input").focus();
document.getElementById('MapTab' + currentMap).children[0].children[1].style.color = "red";
closeDropDownList();
});
containerElement.appendChild(clearButton);
/* Current autocomplete items data (GeoJSON.Feature) */
var currentItems;
/* Active request promise reject function. To be able to cancel the promise when a new request comes */
var currentPromiseReject;
/* Focused item in the autocomplete list. This variable is used to navigate with buttons */
var focusedItemIndex;
/* Execute a function when someone writes in the text field: */
inputElement.addEventListener("input", function(e) {
var currentValue = this.value;
var currentInput = this.id;
/* Close any already open dropdown list */
closeDropDownList();
// Cancel previous request promise
if (currentPromiseReject) {
currentPromiseReject({
canceled: true
});
}
if (!currentValue) {
clearButton.classList.remove("visible");
return false;
}
// Show clearButton when there is a text
clearButton.classList.add("visible");
/* Create a new promise and send geocoding request */
var promise = new Promise((resolve, reject) => {
currentPromiseReject = reject;
var apiKey = "47f523a46b944b47862e39509a7833a9";
var url = `https://api.geoapify.com/v1/geocode/autocomplete?text=${encodeURIComponent(currentValue)}&limit=5&apiKey=${apiKey}`;
if (options.type) {
url += `&type=${options.type}`;
}
fetch(url)
.then(response => {
// check if the call was successful
if (response.ok) {
response.json().then(data => resolve(data));
} else {
response.json().then(data => reject(data));
}
});
});
promise.then((data) => {
currentItems = data.features;
/*create a DIV element that will contain the items (values):*/
var autocompleteItemsElement = document.createElement("div");
autocompleteItemsElement.setAttribute("class", "autocomplete-items");
containerElement.appendChild(autocompleteItemsElement);
/* For each item in the results */
data.features.forEach((feature, index) => {
/* Create a DIV element for each element: */
var itemElement = document.createElement("DIV");
/* Set formatted address as item value */
itemElement.innerHTML = feature.properties.formatted;
/* Set the value for the autocomplete text field and notify: */
itemElement.addEventListener("click", function(e) {
inputElement.value = currentItems[index].properties.formatted;
//selecting address by clicking
callback(currentItems[index]);
/* Close the list of autocompleted values: */
closeDropDownList();
/* give the focus back to the input field */
document.getElementById(inputElement.id).focus();
/* get the number of the input being seelected */
/*
var inputNum = inputElement.id.substring(
inputElement.id.indexOf("autocomplete-container") + 22,
inputElement.id.lastIndexOf("-input")
);
*/
//alert(currentMap + ' - ' + currentItems[index]);
/* end */
});
autocompleteItemsElement.appendChild(itemElement);
});
}, (err) => {
if (!err.canceled) {
console.log(err);
}
});
});
/* Add support for keyboard navigation */
inputElement.addEventListener("keydown", function(e) {
var autocompleteItemsElement = containerElement.querySelector(".autocomplete-items");
if (autocompleteItemsElement) {
var itemElements = autocompleteItemsElement.getElementsByTagName("div");
if (e.keyCode == 40) { //downarrow
e.preventDefault();
/*If the arrow DOWN key is pressed, increase the focusedItemIndex variable:*/
focusedItemIndex = focusedItemIndex !== itemElements.length - 1 ? focusedItemIndex + 1 : 0;
/*and and make the current item more visible:*/
setActive(itemElements, focusedItemIndex);
/* get the number of the input being seelected */
/*
var mySubString = inputElement.id.substring(
inputElement.id.indexOf("autocomplete-container") + 22,
inputElement.id.lastIndexOf("-input")
);
*/
//inputNum = mySubString.charCodeAt(0) - 64;
//alert('input ' + inputNum + ' selected.');
/* end */
} else if (e.keyCode == 38) { //uparrow
e.preventDefault();
/*If the arrow UP key is pressed, decrease the focusedItemIndex variable:*/
focusedItemIndex = focusedItemIndex !== 0 ? focusedItemIndex - 1 : focusedItemIndex = (itemElements.length - 1);
/*and and make the current item more visible:*/
setActive(itemElements, focusedItemIndex);
/* get the number of the input being seelected */
/*
var mySubString = inputElement.id.substring(
inputElement.id.indexOf("autocomplete-container") + 22,
inputElement.id.lastIndexOf("-input")
);
inputNum = mySubString.charCodeAt(0) - 64;
*/
//alert('input ' + inputNum + ' selected.');
/* end */
} else if (e.keyCode == 13) { //enter
/* If the ENTER key is pressed and value as selected, close the list*/
e.preventDefault();
const itmNum = focusedItemIndex;
if (focusedItemIndex > -1) {
closeDropDownList();
}
document.getElementById("layoutImage").style.display = "none";
setActive(itemElements, itmNum);
tmp_center = ol.proj.fromLonLat([currentItems[itmNum].properties.lon, currentItems[itmNum].properties.lat]);
setMap(tmp_center, defaultZoom, defaultRotation);
/* get the number of the input being seelected */
/*
var mySubString = inputElement.id.substring(
inputElement.id.indexOf("autocomplete-container") + 22,
inputElement.id.lastIndexOf("-input")
);
inputNum = mySubString.charCodeAt(0) - 64;
*/
//alert('input ' + inputNum + ' selected.');
/* end */
}
} else {
if (e.keyCode == 40) { //downarrow
/* Open dropdown list again */
var event = document.createEvent('Event');
event.initEvent('input', true, true);
inputElement.dispatchEvent(event);
}
}
});
// Used when scrolling autocomplete dropdown with keyboard
function setActive(items, index) {
if (!items || !items.length) return false;
for (var i = 0; i < items.length; i++) {
items[i].classList.remove("autocomplete-active");
}
/* Add class "autocomplete-active" to the active element*/
items[index].classList.add("autocomplete-active");
// Change input value and notify
inputElement.value = currentItems[index].properties.formatted;
callback(currentItems[index]);
}
function closeDropDownList() {
var autocompleteItemsElement = containerElement.querySelector(".autocomplete-items");
if (autocompleteItemsElement) {
containerElement.removeChild(autocompleteItemsElement);
}
focusedItemIndex = -1;
}
function addIcon(buttonElement) {
var svgElement = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
svgElement.setAttribute('viewBox', "0 0 24 24");
svgElement.setAttribute('height', "24");
var iconElement = document.createElementNS("http://www.w3.org/2000/svg", 'path');
iconElement.setAttribute("d", "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z");
iconElement.setAttribute('fill', 'currentColor');
svgElement.appendChild(iconElement);
buttonElement.appendChild(svgElement);
}
/* Close the autocomplete dropdown when the document is clicked.
Skip, when a user clicks on the input field */
document.addEventListener("click", function(e) {
if (e.target !== inputElement) {
closeDropDownList();
} else if (!containerElement.querySelector(".autocomplete-items")) {
// open dropdown list again
var event = document.createEvent('Event');
event.initEvent('input', true, true);
inputElement.dispatchEvent(event);
}
});
}
translate.on('translating', function(evt) {
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
记住用于拖动标记的指针位置，而不是标记锚定的点 - 只要您始终使用点几何，您就可以使用几何坐标。它也可能缺少最后一步，所以听
translateendtranslatingtranslate.on(['translating', 'translateend'], function(evt) {
var lonlat = ol.proj.transform(evt.features.item(0).getGeometry().getCoordinates(), 'EPSG:3857', 'EPSG:4326');