我正在使用 v7 Bing Maps Javascript“控件”(我不知道为什么它被称为“控件”...)。我正在调用 Microsoft.Maps.Map.setView({bounds: bounds}) 但它没有像我期望的那样工作。

我有一组多边形，其点跨越第 180 条子午线。一个例子是新西兰岛屿的边界——其中一些位于 180 度经线以西，一些部分(查塔姆群岛)位于东经。

当我用这些边界创建多边形并调用 setView() 时， map waaaaaay 缩小。

为什么？以及如何避免？

This page提供问题的演示。

这是代码。

var map, MM = Microsoft.Maps;

function showMap(m) {
  var options = {
    mapTypeId: MM.MapTypeId.road // aerial,
    // center will be recalculated
    // zoom will be recalculated
  },
  map1 = new MM.Map(m, options);
  return map1;
}

function doubleclickCallback(e) {
  e.handled = true;
  var bounds = map.getBounds();
  map.setView({ bounds: bounds });
}

function init() {
  var mapDiv = document.getElementById("map1");
    map = showMap(mapDiv);

  MM.Events.addHandler(map, "dblclick", doubleclickCallback); 
}

如果双击 View 中没有第 180 条子午线的 map ，则什么也不会发生。如果在 map 确实显示 180 经线时双击， map 将重置为缩放级别 1。

最佳答案

我调查过这个。

特别是我查看了 veapicore.js，版本 7.0.20120123200232.91，可在

http://ecn.dev.virtualearth.net/mapcontrol/v7.0/js/bin/7.0.20120123200232.91/en-us/veapicore.js

当您包含 bing map 控件时会下载此模块，如下所示:

<script charset="UTF-8" type="text/javascript"
        src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>

我发现我认为是两个截然不同的问题。

• 当 LocationRect 的边界框跨越第 180 条子午线时，MapMath.locationRectToMercatorZoom 函数(一个内部函数，不供应用程序直接使用)总是返回 1 的缩放。这是不正确的。 Map.setView()函数使用该函数自动设置缩放，导致缩放waaay out现象。

• LocationRect.fromLocations() 使用一种朴素的方法来确定一组位置的边界框。事实上，它并不能保证是“最小边界框”或“最小边界矩形”。据我所知，从该方法返回的框永远不会跨越第 180 条子午线。例如，为表示新西兰岛屿边界的一组位置返回的 LocationRect 将从纬度 -176 度开始，向东延伸，一直到子午线 +165 度。这是错误的。

我通过猴子修补 veapicore.js 中的代码解决了这些问题。

function monkeyPatchMapMath() {
  Microsoft.Maps.InternalNamespaceForDelay.MapMath.
    locationRectToMercatorZoom = function (windowDimensions, bounds) {
      var ins = Microsoft.Maps.InternalNamespaceForDelay,
        d = windowDimensions,
        g = Microsoft.Maps.Globals,
        n = bounds.getNorth(),
        s = bounds.getSouth(),
        e = bounds.getEast(),
        w = bounds.getWest(),
        f = ((e+360 - w) % 360)/360,
        //f = Math.abs(w - e) / 360,
        u = Math.abs(ins.MercatorCube.latitudeToY(n) -
                     ins.MercatorCube.latitudeToY(s)),
        r = Math.min(d.width / (g.zoomOriginWidth * f),
                     d.height / (g.zoomOriginWidth * u));
      return ins.VectorMath.log2(r);
    };
}



function monkeyPatchFromLocations() {
  Microsoft.Maps.LocationRect.fromLocations = function () {
    var com = Microsoft.Maps.InternalNamespaceForDelay.Common,
      o = com.isArray(arguments[0]) ? arguments[0] : arguments,
      latMax, latMin, lngMin1, lngMin2, lngMax1, lngMax2, c,
      lngMin, lngMax, LL, dx1, dx2,
      pt = Microsoft.Maps.AltitudeReference,
      s, e, n, f = o.length;

    while (f--)
      n = o[f],
    isFinite(n.latitude) && isFinite(n.longitude) &&
      (latMax = latMax === c ? n.latitude : Math.max(latMax, n.latitude),
       latMin = latMin === c ? n.latitude : Math.min(latMin, n.latitude),
       lngMax1 = lngMax1 === c ? n.longitude : Math.max(lngMax1, n.longitude),
       lngMin1 = lngMin1 === c ? n.longitude : Math.min(lngMin1, n.longitude),
       LL = n.longitude,
       (LL < 0) && (LL += 360),
       lngMax2 = lngMax2 === c ? LL : Math.max(lngMax2, LL),
       lngMin2 = lngMin2 === c ? LL : Math.min(lngMin2, LL),
       isFinite(n.altitude) && pt.isValid(n.altitudeReference) &&
       (e = n.altitude, s = n.altitudeReference));

    dx1 = lngMax1 - lngMin1,
    dx2 = lngMax2 - lngMin2,
    lngMax = (dx1 > dx2) ? lngMax2 : lngMax1,
    lngMin = (dx1 > dx2) ? lngMin2 : lngMin1;

    return Microsoft.Maps.LocationRect.fromEdges(latMax, lngMin, latMin, lngMax, e, s);
  };
}

这些函数在使用前需要调用一次，但在加载之后。我认为第一个被延迟加载，所以你不能在文件就绪时进行猴子修补；您需要等到创建了 Microsoft.Maps.Map 之后。

第一个只是在给定 LocationRect 的情况下做正确的事情。在矩形跨越第 180 条子午线的情况下，原始方法会翻转东西边缘。

第二个函数修复了 fromLocations 方法。原始实现遍历所有位置，并将最小经度作为“左”，最大经度作为“右”。当最小经度刚好在 180 度子午线以东(比如 -178)，而最大经度值刚好在同一条线的西边(比如，+165)时，这会失败。生成的边界框应该跨越第 180 条子午线，但实际上使用这种天真的方法计算的值有很长的路要走。

更正后的实现计算了那个框，还计算了第二个边界框。对于第二个，当经度为负时，它不使用经度值，而是使用经度值或经度+ 360。生成的转换将经度从 -180 到 180 的值更改为 0 到 360 的值。然后该函数计算这组新值的最大值和最小值。

结果是两个边界框:一个经度范围为 -180 到 +180，另一个经度范围为 0 到 360。这些框将具有不同的宽度。

固定实现选择宽度较窄的框，猜测较小的框是正确答案。如果您尝试为大于半个地球的一组点计算边界框，则此启发式方法将失效。

示例用法可能如下所示:

monkeyPatchFromLocations();
bounds = Microsoft.Maps.LocationRect.fromLocations(allPoints);
monkeyPatchMapMath();
map1.setView({bounds:bounds});

本页演示:http://jsbin.com/emobav/4

双击 map 永远不会导致缩小效果，如http://jsbin.com/emobav/2中所见。

关于javascript - 当位置跨越第 180 条子午线时，如何使用 LocationRect.fromLocations() 正确获取边界框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9528669/