我已经创建了一个从一个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);
原文地址:https://www.jb51.cc/js/150988.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。