Question

我正在尝试使用经纬网绘制一个png地图文件。格线范围应对应于地图文件的宽度和高度（请参阅脚本结束）。尽管左侧和上侧范围正确显示，但是下方和右侧范围与地图尺寸不对应。我还在map函数中使用了范围值，只有左边和上边的范围是响应的。有什么建议吗？

<!doctype html>
<meta charset="utf-8">

<script src="./js/d3.js"></script>
<script src="./js/topojson.js"></script>
<script src="./js/jquery3.1.0.min.js"></script>

<style>

.MapPad {
    padding: 30px 30px 30px 30px;
    }

.graticule {
    fill: none;
    stroke: #000;
    stroke-opacity: .15;
    }

.graticule.outline {
    stroke: black;
    stroke-opacity: 1;
    stroke-width: 2px;
    stroke-dasharray: initial;
    }

.LonLatLabel {
    font-family: helvetica;
    font-size: 22px;
    dominant-baseline: central;
    text-anchor: middle;


</style>

<body>

  <div id='cont1_1'></div>


  <script charset="utf-8">
  //The function to plot the maps

  function plotMaps (container, width, height, rasterBounds, demFile){

    var projection = d3.geoMercator()
      .scale(1)
      .translate([0, 0]);

    var b = [projection(rasterBounds[0]), projection(rasterBounds[1])],
      s = 1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
      t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2]
    //update projection
    projection
      .scale(s)
      .translate(t)

    // geo path generator
    var path = d3.geoPath()
      .projection(projection)

    var map = d3.select(container).append('svg')
      .attr('width', width)
      .attr('height', height)
      .attr('class', 'MapPad');

     //define the data layers before drawing to ensure the order of appearance
    var gratLines = map.append('g');
    var demLayer = map.append('g');
    var samplPointsLayer = map.append('g');
    var outline = map.append('g');

    //make the graticule
    var graticule = d3.geoGraticule().extent([[rasterBounds[0][0], rasterBounds[1][0]], [rasterBounds[0][1], rasterBounds[1][1]]]).step([1, 1]);

    gratLines.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", path);


    // get the coordinates of the line paths and use them as labels 
    map.selectAll('text')
        .data(graticule.lines())
        .enter().append("text")
        .text(function(d) {
            if (d.coordinates[0][0] == d.coordinates[1][0]) {return (d.coordinates[0][0]);}
            else if (d.coordinates[0][1] == d.coordinates[1][1]) {return (d.coordinates[0][1]);}
            })
        .attr("class","LonLatLabel")
        .attr('transform', function(d) { return ('translate(' + projection(d.coordinates[0])[0] + ',' + projection(d.coordinates[1])[1] + ')')
        });

    //outline of the map   
    outline.append("path")
        .datum(graticule.outline)
        .attr("class", "graticule outline")
        .attr("d", path);


    /*var color = d3.scale.ordinal()
        .domain(["1", "2", "3"])
        .range(["#ffd633", "#aaff00" , "#267300"]);
    */

    demLayer.append('svg:image')
      .attr('xlink:href', demFile)
      .attr('width', width)
      .attr('height', height);

   d3.json('SamplingPoints.json', function(err, data) {
      samplPointsLayer.selectAll('circles')
      .data(data.features)
      .enter().append('circle')
      .attr('r', 5)
      .each(function(d) {
        var lonlat = projection(d.geometry.coordinates);
        d3.select(this)
          .attr('cx', lonlat[0])
          .attr('cy', lonlat[1])
          .style('fill', 'black')
          .style("opacity", .5)
      });
    });

  }

  //calculate the number with which the size of each map should be divided
  var mainWidth = 230

  //Plot the maps in each div
  //Alps
  var widthAlps = 4665;
  var heightAlps = 3589;
  var resCoefAlps = widthAlps/mainWidth
  var rasterBoundsAlps = [[ 5.907077970880465 , 45.29815864865324 ] , [ 11.330836684119511 , 48.15780097787413 ]];

  plotMaps('#cont1_1', widthAlps/resCoefAlps, heightAlps/resCoefAlps, rasterBoundsAlps, 'dem_alps.png');

  </script>

</body>

结果如下：

enter image description here

Answer 1

问题解决了！ d3.geoGraticule（）。extent（）函数中的[xmin，ymin]，[xmax，ymax]值应为：

[rasterBounds [0] [0]，rasterBounds [0] [1]]，[rasterBounds [1] [0]，rasterBounds [1] [1]]]

d3.js格线范围无响应

1 个答案: