如何在我的OpenLayers 4项目中修复投影

Question

我正在尝试使用具有以下要求的一个标记的openlayers 4创建地图：-地图将仅具有一个标记（功能）-将从输入字段（lonlat）生成特征。 -如果用户单击地图，则旧标记将被删除，新标记将被添加，新标记的位置将在输入字段中更改。

我创建了一个示例，该示例在单击地图时成功显示了正确的位置，但是具有从输入生成的位置的原始标记是错误的。

这是JSFIDDLE示例

HTML代码

<p>Position (Long,Lat) - position can be manualy edited in input field 
(changers are visible on blur)</p>
<p>
<input type="text" value="27.9263,43.1564" data-value="27.9263,43.1564" 
id="position"  />
<button type="button" id="map-reset">Reset</button>
</p>
<div class="map" id="map"></div>
<p>Console log</p>
<div id="consolelog"></div>

JS代码

var position;
var lonlat;
var position2;
var lonlat2;
var feature;
var e;

//original map position if available
function originalPosition() {
    position2 = $('#position').data('value');//original position (if available)
    lonlat2 = new Array();
    lonlat2 = position2.split(',');
    console.log('Original position: '+lonlat2);
}
function centerMapBG() {
    map.getView().setCenter(ol.proj.fromLonLat([25.6751,42.6858]));
    map.getView().setZoom(7);
    markerSource.clear();   
}
function repositionMap(e){  
    if ( position != '' ) { //if there is a position
        map.getView().setCenter(ol.proj.fromLonLat(e));
    } else {
        centerMapBG();
    }
}
function addMarker(lonlat){
    markerLayer.getSource().clear();
    feature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat(lonlat)),
      name: 'marker'
    });
    markerSource.addFeature(feature);
}
//map raster layer
var raster = new ol.layer.Tile({
    //source: new ol.source.OSM() //default style
    source: new ol.source.XYZ({ //ArcGIS style
        attributions: [
            new ol.Attribution({
              html: 'EXAMPLE ATTRIBUTION'
            })
        ],
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' 
        + 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
    })
});
//Marker styles
var marker = new ol.style.Circle({ //default
    radius: 10,
    fill: new ol.style.Fill({color:'#c00'}),
    stroke: new ol.style.Stroke({color: '#900', width: 2})
});
var styles = {
    'Point': new ol.style.Style({
        image: marker
    })
};
var markerStyle = function(feature) {
    return styles[feature.getGeometry().getType()];
};
var markerSource = new ol.source.Vector();
var markerLayer = new ol.layer.Vector({
    source: markerSource,
    style: markerStyle
});

$(function(){

    //get values for the map and change marker position when input is edited
    $('#position').on('blur',function(){

        position = $(this).val();//visible position
        lonlat = new Array();
        lonlat = position.split(',');
        $('#consolelog').append('Position from input: '+lonlat+'<br>');

        if (map) { 
            //show map reset button
            //addMarker(lonlat);

            markerLayer.getSource().clear();
            feature = new ol.Feature({
              geometry: new ol.geom.Point(ol.proj.fromLonLat(lonlat)),
              name: 'marker'
            });
            markerSource.addFeature(feature);

            $('#map-reset').show();
        }
    });
    $('#position').trigger('blur');

    //create map
    var map = new ol.Map({
        layers: [
            raster,
            markerLayer
        ],
        projection: "EPSG:4326",
        displayProjection: "EPSG:4326",
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }),
        view: new ol.View({
            center: ol.proj.fromLonLat(lonlat,'EPSG:3857'),
            zoom: 11
        })
    });
    if ( position != '' ) {
        addMarker(lonlat);  
    } else {
        centerMapBG();
    }

    //marker on click
    map.on('click',function(evt){

        coords = ol.proj.toLonLat(evt.coordinate);
        $('#position').val(coords);
        $('#consolelog').append('Position from click: '+coords+'<br>');
        addMarker(coords);

        //show map reset button
        $('#map-reset').show();
    });

    $('#map-reset').on('click',function(){
        originalPosition();
        $('#position').val(position2);//reset old position
        $('#position').trigger('blur');
        $(this).hide();
        repositionMap(position2);
    });

});

提前致谢

Answer 1

尝试将lonlat数组格式化为数字：

lonlat = position.split(','); lonlat = [Number(lonlat[0]), Number(lonlat[1])]

Openlayers坐标需要一个数字数组：

https://openlayers.org/en/latest/apidoc/ol.html#.Coordinate