Question

我正在d3中构建地图，并以安迪·巴特富特（Andy Barefoot）https://codepen.io/nb123456/pen/zLdqvM?editors=0010的这个密码笔为基础。我想修改initiateZoom()函数，以便如果我为“ Ohio”周围的框设置纬度/经度坐标，则地图会将其平移初始化为在“ Ohio”上。

function initiateZoom() {
  minZoom = Math.max($("#map-holder").width() / w, $("#map-holder").height() / h);
  maxZoom = 20 * minZoom;

  zoom
    .scaleExtent([minZoom, maxZoom])
    .translateExtent([[0, 0], [w, h]])
  ;

  midX = ($("#map-holder").width() - minZoom * w) / 2;
  midY = ($("#map-holder").height() - minZoom * h) / 2;//These are the original values
  var swlat = 32;
  var swlon = -82;
  var nelat = 42;
  var nelon = -72;
  var projectCoordinates = projection([(swlat+nelat)/2, (swlon+nelon)/2]);

  /*This did not work
  var midX =  minZoom*(w-(swlat+nelat)/2) - ($("#map-holder").width()-(swlat+nelat)/2);
  var midY = minZoom*(h-(swlon+nelon)/2) - ($("#map-holder").height()-(swlon+nelon)/2);*/
  /*Neither did this
  var midX = minZoom*(w-projectCoordinates[0])-($("#map-holder").width()-projectCoordinates[0]);
  var midY = minZoom*(h-projectCoordinates[1])-($("#map-holder").height()-projectCoordinates[1]);*/

  svg.call(zoom.transform, d3.zoomIdentity.translate(midX, midY).scale(minZoom));
}

原始方法的想法是：

1: Get the current pixel display of the map
2: Get the new pixel distance from the map corner to the map point after zoom has been applied 
3: The pixel distance of the center of the container to the top of the container
4: subtract the values from 2 and 3

原始帖子试图平移地图，以便初始化地图中心上方的缩放和平移。我试图通过直接将经纬度值代入上述方程式来修改此方法。我还尝试过先使用投影来转换经/纬度值，然后再替换这些值，但收效甚微。我需要做些什么才能获得想要的结果？

Answer 1

设置translateExtent可能不是一个好主意，因为它取决于缩放比例。

以下替代作品。

function initiateZoom() {
  // Define a "minzoom" whereby the "Countries" is as small possible without leaving white space at top/bottom or sides
  minZoom = Math.max($("#map-holder").width() / w, $("#map-holder").height() / h);
  // set max zoom to a suitable factor of this value
  maxZoom = 20 * minZoom;
  // set extent of zoom to chosen values
  // set translate extent so that panning can't cause map to move out of viewport
  zoom
    .scaleExtent([minZoom, maxZoom])
    .translateExtent([[0, 0], [w, h]])
  ;

  var swlat = 32;
  var swlon = -82;
  var nelat = 42;
  var nelon = -72;
  var nwXY = projection([swlon, nelat]);
  var seXY = projection([nelon, swlat]);
  var zoomScale = Math.min($("#map-holder").width()/(seXY[0]-nwXY[0]), $("#map-holder").height()/(seXY[1]-nwXY[1]))
  var projectCoordinates = projection([(swlon+nelon)/2, (swlat+nelat)/2]);

  svg.call(zoom.transform, d3.zoomIdentity.translate($("#map-holder").width()*0.5-zoomScale*projectCoordinates[0], $("#map-holder").height()*0.5-zoomScale*projectCoordinates[1]).scale(zoomScale));
}

在给定纬度和经度的特定区域上启动d3地图

1 个答案: