如何在d3.js中缩放路径



为了修复此问题,更改了geoJsonURL以接收更复杂的形状。有了这种新形状,缩放方法就可以工作了,但形状完全是混乱的。根据坐标系:WGS 84(EPSG:4326(和这个堆栈主题,应该或多或少像我现在一样计算正确的投影。但是,仍然给出了一个奇怪的路径输出。如有帮助将不胜感激,提前谢谢。

下面是原始主题,上面是新部分

我试图放大路径,但缩放方法不是无所事事。在一些主题中看到了pointRadius的使用方法,但不起作用。如果你注意到,路径几乎在中间(我手动翻译(,但很小。我做错了什么我的方法?

我可以得到坐标系和方框坐标(这不是在这个例子中(。我一直在读一些例如,但似乎什么都不起作用。知道我在做什么吗错误的坐标系:WGS 84(EPSG:4326(

提前感谢

/* geometryType=esriGeometryPolyline OR esriGeometryMultipoint OR esriGeometryPolygon OR esriGeometryEnvelope*/
const geoJsonURL = "https://sig.cm-figfoz.pt/arcgis/rest/services/Internet/MunisigWeb_DadosContexto/MapServer/2/query?f=geojson&where=(LOWER(NOME)%20LIKE%20LOWER(%27%25Alhadas%25%27))&returnGeometry=true&geometryType=esriGeometryPolyline&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=3763"
const canvas = d3.select("#map").append("svg")
.attr("width", 500)
.attr("height", 500)
.style("border", "2px solid red");
const projection = d3.geoTransverseMercator()
.rotate([8.1331, 0])
.center([0, 39.6682])
.scale(200)
.translate([300, 350]);
const path = d3.geoPath().projection(projection);
const group = canvas.append("g")
d3.json(geoJsonURL).then(function (data) {
group.selectAll("g")
.data(data.features)
.enter()
.append("path")
.attr("stroke", "blue")
.attr("stroke-width", 1)
.attr("fill", "none")
.attr("d", path);
//.attr("d", path.pointRadius(20));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
<div id="map"></div>
</body>

所以。。。经过长时间的搜索和阅读,我发现我的地理坐标已经在2D坐标系统中了。缩放d3 v4地图以适应SVG(或者根本不适合(。d3.geoMercator方法是一个将三维多边形几何体转换为二维几何体(平面几何体(的函数,因此它将平面化三维多边形几何。由于我的协调系统已经扁平化了,在上面使用这种方法只会创建新的2D路径(希望这确实是正确的解释…(

代码现在看起来像这个

const queryRegionText = "where=NOME LIKE '%25Alhadas%25'"
const geoJsonURL2 = "https://sig.cm-figfoz.pt/arcgis/rest/services/Internet/MunisigWeb_DadosContexto/MapServer/2/query?f=geojson&" + queryRegionText + "&returnGeometry=true&geometryType=esriGeometryPolyline&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=3763"
const width = 500;
const height = 500;
const canvas = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "2px solid red");
d3.json(geoJsonURL2).then(function (data) {
var projection = d3.geoIdentity()
.fitSize([width, height], data);
const path = d3.geoPath().projection(projection);
const group = canvas.append("g")
group.selectAll("g")
.data(data.features)
.enter()
.append("path")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("fill", "gray")
.attr("d", path);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
<div id="map"></div>
</body>

最新更新