如何找出我的预投影 GeoJSON 使用的投影？
How can I find out what projection my pre-projected GeoJSON is using?
我的问题与 非常相似，但我使用的地图是苏格兰地方当局区域的地图，所以我不太明白如何应用这两种解决方案。
我在苏格兰的等值线图上创建了一个气泡图，在我提供的指定位置有圆圈作为 latitude/longitude 坐标。
然而，圆圈的位置完全不对-香港仔的圆圈在海里！
基于 ，我认为 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, 1000, 3000, 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", function(d) {
return projection([d.long, 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, 1000, 3000, 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", function(d) {
return projection([d.long, 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>
我的问题与
我在苏格兰的等值线图上创建了一个气泡图，在我提供的指定位置有圆圈作为 latitude/longitude 坐标。
然而，圆圈的位置完全不对-香港仔的圆圈在海里！
基于
所以我的问题是，是否有一种合理的方法来确定这张地图是什么投影，以便我可以对圆圈使用相同的投影？
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, 1000, 3000, 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", function(d) {
return projection([d.long, 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, 1000, 3000, 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", function(d) {
return projection([d.long, 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>