Question

我正在尝试创建一个带有openlayers 4的地图，其中包含一个具有此要求的标记： - 地图只有一个标记（功能） - 将从输入字段（lonlat）生成功能。 - 如果用户点击地图，旧标记将被删除，新标记将被添加，新标记的位置将在输入字段中更改。

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

Here is JSFIDDLE example

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

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

1 个答案: