Open Layers Problem mit Markern Koordinaten ändern

Question

Ich habe ein Problem, das mich verrückt macht. Ich habe ein openlayers Kartenprojekt, das gut funktioniert. Ich nahm diesen Konzeptcode und bewegte ihn zu einem Projekt, das .Net verwendet und die Projektion für die Markierungen/Ikonen wird durcheinandergebracht.

//set the Icon/Marker that will be used 
    var iconStyle = new ol.style.Style({ 
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({ 
     anchor: [0.5, 46], 
     anchorXUnits: 'fraction', 
     anchorYUnits: 'pixels', 
     opacity: 0.8, 
     src: '<%=PinMarkerImage%>' 
    })) 
    }); 
    var vectorLayer = new ol.layer.Vector({ 
    source: vectorSource, 
    style: iconStyle 
    }); 



//we will zoom the map to fit the locations after we create 
    //the map 
    var mapObj = new ol.Map({ 
     layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer], 
     target: document.getElementById('map-canvas'), 
     view: new ol.View({ 
     center: ol.proj.fromLonLat([0, 0]), 
     zoom: 12 
     }) 
    }); 
    alert(vectorSource.getExtent()); 
    mapObj.getView().fit(vectorSource.getExtent(), { padding: [75, 40, 40, 75], constrainResolution: false }); 

//I pass in an object one at a time to populate the features 
    function changeMapOption(oBranch, i) { 
    // alert('selected'); 
    var long = oBranch.Longitude; 
    var lat = oBranch.Latitude; 
    alert(long + ' ' + lat); 
    //lastCord = ol.proj.transform([coord[0], coord[1]], 'EPSG:4326', 'EPSG:3857'); 
    var iconFeature = new ol.Feature({ 
     geometry: new ol.geom.Point(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857')), //ol.proj.fromLonLat([long, lat])), 
     id: oBranch.Id, 
     title: oBranch.Name, 
     address: oBranch.Address + ", " + oBranch.City + ", " + oBranch.State + " " + oBranch.ZipCode 
    }); 

    //alert(iconFeature.getGeometry()); 
    vectorSource.addFeature(iconFeature); 

    //mapObj.getView().fit(vectorSource.getExtent(), { padding: [75, 40, 40, 75], constrainResolution: false }); 
    //target = mapObj.getTarget(); 
    //This will zoom the map to fit all of the vector Sources in vectorSource 
    //alert(vectorSource.getExtent()); 
    //mapObj.addOverlay(popup); 
    //jTarget = typeof target === "string" ? $("#" + target) : $(target); 
    //element = document.getElementById('popup'); 
    } 

Ich habe die Warnungen eingestellt, um die Längen- und Breitengrad zu überprüfen. Diese sind korrekt. Für diesen Testlauf habe ich drei Objekte, die bevölkert sind, die Länge und Latitudes sind wie folgt: -112,04883, 40,492104 -95,673328, 29,95752 -95,638558, 29,880014 , wenn ich den Code, um den Alarm für die vectorSource.getExtent run() produziert dies: -12473218.699582075, -8426499.834030088, -10646435.576762961, -6361484.120029401

Und die Markierungen zeigen sich vor der unteren Küste von Chile. Die Breite ist falsch, aber die Länge scheint korrekt zu sein.

Ich könnte hier sicherlich einige Anleitung verwenden. Das macht mich verrückt.

Vielen Dank für Ihre Hilfe.

Answer 1

Nachdem ich mehrere Male versucht habe, habe ich eine Lösung gefunden, die funktioniert. Hoffentlich hilft das jemandem auf der ganzen Linie.

 function loadMarker(oBranch, i) { 
      var sHTML = getMarkerInfoHtml(oBranch); 
      var long = oBranch.Longitude * 1; 
      var lat = oBranch.Latitude * 1; 
      var iconFeature = new ol.Feature({ 
       geometry: new ol.geom.Point(ol.proj.fromLonLat(([long, lat]))), 
       index: oBranch.Id, 
       id: oBranch.Id, 
       title: oBranch.Name, 
       address: sHTML  //oBranch.Address + ", " + oBranch.City + ", " + oBranch.State + " " + oBranch.ZipCode 
     }); 

     vectorSource.addFeature(iconFeature);   
    } 

Der Schlüssel war, diese beiden Linien:

var long = oBranch.Longitude * 1; 
var lat = oBranch.Latitude * 1; 

durch die * 1 auf die Zeile hinzufügen zwingt JavaScript die Variablen korrekt als numerische zu behandeln. Es platziert jetzt die Markierungen an der richtigen Stelle.