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

我设置了警报以检查经度和纬度。这些是正确的。对于此测试运行，我有三个填充的对象，经度和纬度如下： -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将变量正确地视为数字。它现在将标记放在正确的位置。

使用标记更改坐标打开图层问题

1 个答案: