如何将lat,lon数据动态放置到topoJSON映射上

时间:2013-11-27 14:09:05

标签: d3.js

我有一个WV县的topoJSON地图。它正确显示了人口密度。此地图是从geoJSON数据创建的,然后使用topojson进行转换。这是开发人员创建数据静态显示的所有常规步骤。我现在的问题是,这个地图的用户想要在其上放置数据,他们只有lat,lon值。如何在先前创建的topoJSON地图上显示lat,lon数据?

以下是一些示例数据:

var sampleData = [
    {"name": "Weirton", "coordinates": [-80.589517, 40.418957]},
    {"name": "Morgantown", "coordinates": [-79.955897, 39.629526]},
    {"name": "Shepherdstown", "coordinates": [-77.804161, 39.430100]}              
];

我试图在我的(已经显示的)地图上显示,如下所示:

var group = svg.append('g');

group.selectAll("cities")
   .data(sampleData)
   .enter()
      .append("cities")
          .attr("class", "cities")
          .attr("transform", function(d) {return "translate(" + projection(d.coordinates) + ")";});

是否有可能将一些lat,lon数据放到静态地图上或让我发疯一些编程错误?

更新:我玩过数据并发现使用此代码:

svg.append("path")
.datum(topojson.feature(wv, dynamicData))
.attr("d", path)
.attr("class", "place")

使用此数据

var dynamicData = 
{
    "type":"GeometryCollection",    
    "geometries":[
        {"type":"Point","properties":{"NAME":"Weirton"},"id":"Weirton","coordinates":[4172,9359]},
        {"type":"Point","properties":{"NAME":"Morgantown"},"id":"Morgantown","coordinates":[5458,7063]},
        {"type":"Point","properties":{"NAME":"Shepherdstown"},"id":"Shepherdstown","coordinates":[9826,6483]}]
};

但不适用于此数据

var dynamicData = 
{
    "type":"GeometryCollection",    
    "geometries":[
        {"type":"Point","properties":{"NAME":"Weirton"},"id":"Weirton","coordinates":[-80.589517, 40.418957]},
        {"type":"Point","properties":{"NAME":"Morgantown"},"id":"Morgantown","coordinates":[-79.955897, 39.629526]},
        {"type":"Point","properties":{"NAME":"Shepherdstown"},"id":"Shepherdstown","coordinates":[-77.804161, 39.430100]}]
};

有人可以告诉我如何计算新坐标吗?

1 个答案:

答案 0 :(得分:0)

好的,事实证明这段代码会正确显示我的lat / lon数据

svg.selectAll(".geojson").data([sampleData4])
.enter()
.append("path")
.attr("class","geojson")
.attr("d", path)
;

(在我的编辑中,sampleData4是我的纬度/经度数据(即dynamicData)。在经过多次谷歌搜索后我偶然发现了这个。我在

找到了这个片段
http://hashbang.co.nz/blog/2013/2/25/d3_js_geo_fun

我很感激任何人解释为什么它有效以及为什么我以前的所有工作都没有。我仍然非常有兴趣了解(通过详细的具体示例)coord转换实际上是如何工作的。