我已经创建了一个从一个mbtile转换为geojson的地图,投影是wgs84.我加载它：
var map = svg.append("g").attr("class","map");
var path = d3.geo.path().projection(d3.geo.albers().origin([3.4,46.8]).scale(12000).translate([590,570]));
d3.json('myjsonfile.json',function(json) {
map.selectAll('path').data(json.features).enter().append('path').attr('d',path)
});
现在我想在我的svg中添加一个svg元素(一个点,一个圆圈,一个点(我不知道))及其(lat,lng)坐标.
我不知道该怎么做
解决方法
您需要分离投影,以便您可以再次使用它来投影您的观点：
var map = svg.append("g").attr("class","map");
var projection = d3.geo.albers()
.origin([3.4,46.8])
.scale(12000)
.translate([590,570]);
var path = d3.geo.path().projection(projection);
d3.json('myjsonfile.json',function(json) {
map.selectAll('path')
.data(json.features)
.enter().append('path').attr('d',path);
// Now use the projection to project your coords
var coordinates = projection([mylon,mylat]);
map.append('svg:circle')
.attr('cx',coordinates[0])
.attr('cy',coordinates[1])
.attr('r',5);
});
另外一种方法就是用点调整投影坐标：
map.append('svg:circle')
.attr("transform",function(d) {
return "translate(" + projection(d.coordinates) + ")";
})
.attr('r',5);