Question

我正在使用d3 / topojson，我想仅为两个用户所在的两个国家着色（或呈现）。（用户的位置由纬度和经度表示。）

我正在修改code from this website以覆盖两个不同的国家/地区，但我只是想象这两个国家。链接中的图像是比较美国和澳大利亚，我希望地图只能显示美国和澳大利亚，而地图中没有其他国家，如加拿大或墨西哥。

我正在使用的代码是，

// define canvas object and context for large canvas
var largeCanvasObj = d3.select("#large").append("canvas")
  .attr("width", largeWidth)
  .attr("height", largeHeight)

var largeCanvasContext = largeCanvasObj.node().getContext("2d")
largeCanvasContext.globalAlpha = .9

var graticule = d3.geo.graticule()()

var mapObjects = []
var largeMapObjects = []

// set up ranges/scales
var zoomToBoxScale = d3.scale.log().domain([17098242, 50]).range([100,600]);

// set up initial visable state
for (var i = 0; i < 2; i++) {
  largeMapObjects[i] = setUpLargeMaps(state.latLon[i].lat, state.latLon[i].lon, i)

}

function setUpLargeMaps(lat, lon, name) {
  var projectionLarge = d3.geo.azimuthalEqualArea()
    .translate([largeWidth / 2, largeHeight / 2])
    // .scale(state.scale)
    .scale(state.scale)
    .center([0, 0])
    .clipAngle(180 - 1e-3)
    .clipExtent([
      [2 * padding, 2 * padding],
      [largeWidth - 2 * padding, largeHeight - 2 * padding]
    ])
    .rotate([-lon, -lat])
    .precision(.7);

  var path = d3.geo.path()
    .projection(projectionLarge)
    .context(largeCanvasContext);

  largeCanvasObj.call(dragSetupLarge())

  return {
    "projection": projectionLarge,
    "path": path,
  }
}

// what to draw on the canvas for large/small
var drawCanvasLarge = function() {
  largeCanvasContext.clearRect(0, 0, largeWidth, largeHeight);
  largeCanvasContext.strokeStyle = "#333", largeCanvasContext.lineWidth = 1, largeCanvasContext.strokeRect(2 * padding, 2 * padding, largeWidth - 4 * padding, largeHeight - 4 * padding);
  largeCanvasContext.fillStyle = "#b2d0d0", largeCanvasContext.fillRect(2 * padding, 2 * padding, largeWidth - 4 * padding, largeHeight - 4 * padding);

  largeCanvasContext.fillStyle = colors[0], largeCanvasContext.beginPath(), largeMapObjects[0].path(land), largeCanvasContext.fill();
  largeCanvasContext.strokeStyle = "black", largeCanvasContext.lineWidth = .5, largeCanvasContext.beginPath(), largeMapObjects[0].path(borders), largeCanvasContext.stroke();
  largeCanvasContext.fillStyle = colors[1], largeCanvasContext.beginPath(), largeMapObjects[1].path(land), largeCanvasContext.fill();
  largeCanvasContext.strokeStyle = "black", largeCanvasContext.lineWidth = .5, largeCanvasContext.beginPath(), largeMapObjects[1].path(borders), largeCanvasContext.stroke();
  largeCanvasContext.strokeStyle = "gray", largeCanvasContext.lineWidth = .5, largeCanvasContext.beginPath(), largeMapObjects[0].path(stateborder), largeCanvasContext.stroke();
  
}

d3.json("us.json", function(error, world) {
  stateborder = topojson.feature(world, world.objects.states);
})

d3.json("world-110m.json", function(error, world) {
  land = topojson.feature(world, world.objects.land);
  borders = topojson.mesh(world, world.objects.countries);
  // use data to draw paths on small maps
  drawCanvasLarge()

})

function drawfromarticle(matchObject, center_lat,center_lon, userarea, this_country_lat, this_country_lon, this_country_area, scale) {
  console.log(matchObject, center_lat,center_lon, userarea, this_country_lat, this_country_lon, this_country_area, scale);
  state.latLon[0] = {
          lat: center_lat,
          lon: center_lon
      }
  state.latLon[1] = {
        lat: this_country_lat,
        lon: this_country_lon
    }

  state.scale = this_country_area;
  rotateAndScale()
  updateHash()

}

drawfromarticle函数从另一个函数获取两个位置（两个纬度和经度）。如果有帮助，它也可以获得“国家名称”。

谢谢！

D3如何仅根据用户

0 个答案: