마커가 좌표 변경으로 레이어 열기 문제가 발생했습니다.

Question

미친 듯이 움직이는 문제가 있습니다. 나는 잘 작동하는 openlayers 맵 프로젝트를 가지고있다. 이 개념 코드를 가져 와서 .Net을 사용하는 프로젝트로 옮겼고 마커/아이콘에 대한 투영법이 엉망이되었습니다.

//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'); 
    } 

위도와 경도를 확인하도록 경고가 설정되었습니다. 이것들은 정확합니다. 다음과 같이 테스트 실행을 위해 나는 3, 채워진 경도와 위도되는 개체가 있습니다 -112.04883, 40.492104 -95.673328, 29.95752 -95.638558, 29.880014 내가 (코드에게 vectorSource.getExtent에 대한 경고를 실행하는 경우) -12473218.699582075, -8426499.834030088, -10646435.576762961, -6361484.120029401

그리고 마커는 칠레의 낮은 해안에서 나타납니다. 위도는 잘못되었지만 경도는 정확합니다.

여기에 몇 가지 지침을 확실히 사용할 수 있습니다. 이것은 나를 미치게 만든다.

어떤 도움을 주셔서 감사합니다.

Answer 1

여러 번 시도한 후에 작동하는 해결책을 찾았습니다. 바라기를 이것은 누군가를 도울 것입니다.

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

는 자바 스크립트를 숫자로 제대로 변수를 치료하기 위해 강제 행으로 * 1를 추가하여 :

 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);   
    } 

의 핵심은이 두 줄을이었다. 이제 마커를 올바른 위치에 배치합니다.