[英]How to fix projection in my OpenLayers 4 project
I'm trying to create a map with openlayers 4 with one marker with this requirements: - map will have only one marker (feature) - feature will be generated from input field (lonlat). 我正在尝试使用具有以下要求的一个标记的openlayers 4创建地图:-地图将仅具有一个标记(功能)-将从输入字段(lonlat)生成特征。 - if user click on the map old marker will be removed and new one will be added and the position of the new marker will be changed in the input field. -如果用户单击地图,则旧标记将被删除,新标记将被添加,新标记的位置将在输入字段中更改。
I create an example that successfully show correct position when the map is clicked but original marker with location generated from the input is wrong. 我创建了一个示例,该示例在单击地图时成功显示了正确的位置,但是具有从输入生成的位置的原始标记是错误的。
Here is JSFIDDLE example 这是JSFIDDLE示例
Html Code 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 code 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);
});
});
Thanks in advance 提前致谢
Try formatting your lonlat array as numbers: 尝试将lonlat数组格式化为数字:
lonlat = position.split(','); lonlat = [Number(lonlat[0]), Number(lonlat[1])]
Openlayers coordinates require an array of Numbers: Openlayers坐标需要一个数字数组:
https://openlayers.org/en/latest/apidoc/ol.html#.Coordinate https://openlayers.org/en/latest/apidoc/ol.html#.Coordinate
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.