如何找到我的预先投影的GeoJSON使用的投影？

问题描述

我的问题与D3 V4 Properly placing a bubble in the US Map非常相似，但是我使用的地图是苏格兰地方政府所在地的地图，因此我不太清楚如何应用这两种解决方案。

我正在苏格兰的choropleth地图上创建一个气泡图，并在指定位置以我的纬度/经度坐标提供圆圈。

但是，圆圈​​的位置完全消失了-阿伯丁的圆圈在海中！

基于D3 V4 Properly placing a bubble in the US Map，我认为GeoJSON可能是预先投影的，所以我使用了两种不同的投影，一种用于地图，另一种用于圆圈。理想情况下，我认为我会找到另一种不会引起此问题的GeoJSON，但我认为我从https://martinjc.github.io/UK-GeoJSON/中使用的是唯一可用的。

所以我的问题是，是否有一种明智的方法可以弄清楚该地图是什么投影，以便可以对圆使用相同的投影？

var year = 2015;
var measurement = "tonnage";

drawMap(year,measurement)

function drawMap(year,measurement) {

  // Convert the year and measurement to a concatenated string
  var yearString = year.toString();
  var measurementString = measurement.toString();
  var option = measurementString.concat(yearString);

  // The svg
  var svg = d3.select("svg"),width = +svg.attr("width"),height = +svg.attr("height");

  // Map and projection
  var path = d3.geoPath();
  var projection = d3.geoMercator()
    .center([-4.1826,56.8169])
    .scale(1400)
    .translate([width / 2,height / 2])
  //  .scale(20*width / Math.PI)
  //  .translate([width / 2 + 150,height / 2 +2670]);

  // Data and color scale
  var data = {};
  if (measurement === "tonnage") {
    var colorScale = d3.scaleThreshold()
      .domain([0,50,100,1000,2000,3000,20000])
      .range(d3.schemeBlues[7]);
  } else {
    var colorScale = d3.scaleThreshold()
      .domain([0,5000,7000,9000,10000])
      .range(d3.schemeReds[7]);
  }

  // Load external data and boot
  d3.queue()
    .defer(d3.json,"https://raw.githubusercontent.com/squirrel-star/scotland/main/geojsonscotlandladjson.geojson")
    .defer(d3.csv,"https://raw.githubusercontent.com/squirrel-star/scotland/main/fishperLA.csv",function(d) {
      data[d.code] = +d[option];
    })
    .await(ready);

  svg.selectAll("*").remove();

  function ready(error,topo) {


    // Adding the bubbles in

    var markers = [{
        long: 2.0943,lat: 57.1497
      },// Aberdeen
      {
        long: 2.7005,lat: 56.2230
      },// Anstruther
      {
        long: 4.6292,lat: 55.4586
      },// Ayr
    ];

    // Draw the map
    svg.append("g")
      .selectAll("path")
      .data(topo.features)
      .enter()
      .append("path")
      // draw each country
      .attr("d",d3.geoPath()
        .projection(projection)
      )
      // set the color of each country
      .attr("fill",function(d) {
        d.total = data[d.properties.LAD13NM] || 0;
        return colorScale(d.total);
      })
    <!-- // Add circles:   -->
    svg
      .selectAll("myCircles")
      .data(markers)
      .enter()
      .append("circle")
      .attr("cx",function(d) {
        return projection([d.long,d.lat])[0]
      })
      .attr("cy",d.lat])[1]
      })
      .attr("r",8)
      .style("fill","69b3a2")
      .attr("stroke","#69b3a2")
      .attr("stroke-width",3)
      .attr("fill-opacity",.4);

  }

}

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<svg id="myMap" width="400" height="400"></svg>

非常感谢。

解决方法

对于您来说，我有个坏消息，这是错误的实际原因是您在纬度前面缺少减号。艾尔的纬度为-4.6，而不是4.6。只需在要点前面添加-即可为我解决。

var year = 2015;
var measurement = "tonnage";

drawMap(year,measurement)

function drawMap(year,measurement) {

  // Convert the year and measurement to a concatenated string
  var yearString = year.toString();
  var measurementString = measurement.toString();
  var option = measurementString.concat(yearString);

  // The svg
  var svg = d3.select("svg"),width = +svg.attr("width"),height = +svg.attr("height");

  // Map and projection
  var path = d3.geoPath();
  var projection = d3.geoMercator()
    .center([-4.1826,56.8169])
    .scale(1400)
    .translate([width / 2,height / 2])
  //  .scale(20*width / Math.PI)
  //  .translate([width / 2 + 150,height / 2 +2670]);

  // Data and color scale
  var data = {};
  if (measurement === "tonnage") {
    var colorScale = d3.scaleThreshold()
      .domain([0,50,100,1000,2000,3000,20000])
      .range(d3.schemeBlues[7]);
  } else {
    var colorScale = d3.scaleThreshold()
      .domain([0,5000,7000,9000,10000])
      .range(d3.schemeReds[7]);
  }

  // Load external data and boot
  d3.queue()
    .defer(d3.json,"https://raw.githubusercontent.com/squirrel-star/scotland/main/geojsonscotlandladjson.geojson")
    .defer(d3.csv,"https://raw.githubusercontent.com/squirrel-star/scotland/main/fishperLA.csv",function(d) {
      data[d.code] = +d[option];
    })
    .await(ready);

  svg.selectAll("*").remove();

  function ready(error,topo) {
    // Adding the bubbles in

    var markers = [{
        long: -2.0943,lat: 57.1497
      },// Aberdeen
      {
        long: -2.7005,lat: 56.2230
      },// Anstruther
      {
        long: -4.6292,lat: 55.4586
      },// Ayr
    ];

    // Draw the map
    svg.append("g")
      .selectAll("path")
      .data(topo.features)
      .enter()
      .append("path")
      // draw each country
      .attr("d",d3.geoPath()
        .projection(projection)
      )
      // set the color of each country
      .attr("fill",function(d) {
        d.total = data[d.properties.LAD13NM] || 0;
        return colorScale(d.total);
      })
    <!-- // Add circles:   -->
    svg
      .selectAll("myCircles")
      .data(markers)
      .enter()
      .append("circle")
      .attr("cx",function(d) {
        return projection([d.long,d.lat])[0]
      })
      .attr("cy",d.lat])[1]
      })
      .attr("r",8)
      .style("fill","69b3a2")
      .attr("stroke","#69b3a2")
      .attr("stroke-width",3)
      .attr("fill-opacity",.4);

  }

}

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<svg id="myMap" width="400" height="400"></svg>