标记更改坐标的开放层问题

Question

我遇到了一个让我抓狂的问题。我有一个运行良好的 openlayers 地图项目。我把这个概念代码移到了一个使用 .Net 的项目中，markers/icons 的投影搞砸了。

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

我设置了检查经度和纬度的警报。这些都是正确的。对于此测试运行我填充了三个对象，经度和纬度如下： -112.04883, 40.492104 -95.673328, 29.95752 -95.638558, 29.880014 当我运行代码时， vectorSource.getExtent() 的警报会产生以下内容： -12473218.699582075,-8426499.834030088,-10646435.576762961,-6361484.120029401

标记出现在智利的下海岸附近。纬度是错误的，但经度似乎是正确的。

我当然可以在这里使用一些指导。这让我发疯。

感谢您的帮助。

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

关键是这两行：

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

通过将 * 1 添加到它强制 JavaScript 将变量正确视为数字的行。它现在将标记放置在正确的位置。

标记更改坐标的开放层问题

Open Layers issue with markers changing coordinates

.net

asp.net

openlayers