服务/制作美国各州剪影的最佳方式？

Question

我负责提供页面来显示美国各州选举的初步结果。每个页面都需要一个带有州图像的横幅，大约 250 像素 x 250 像素。现在我需要做的就是弄清楚如何提供/生成这些图像...

1. 我已经深入研究了 Protovis 并认为我 可能会解除州坐标轮廓 - 我必须 手动转换坐标数据以对齐和调整大小 正确地（ick）

2. 在聪明/野蛮光谱的另一端是一个巨大的精灵 或一系列精灵。即使使用 png 8 压缩，文件大小为 由 50 个不重叠的 250x250px 精灵组成的网格是一个问题，并且 遗憾的是这样的文件似乎不存在，所以我必须创建它 从手上。也令人不愉快。

谁有更好的主意？

回答：正确的解决方案是切换到 d3。

我们现在入侵的内容：

 drawStateInBox = function(box, state, color) {
   var w = $("#" + box).width(),
           h = $("#" + box).height(),
           off_x = 0,
           off_y = 0;
           borders = us_lowres[state].borders;

   //Preserve aspect ratio
   delta_lat = pv.max(borders[0], function(b) b.lat) - pv.min(borders[0], function(b) b.lat);
   delta_lng = pv.max(borders[0], function(b) b.lng) - pv.min(borders[0], function(b) b.lng);

   if (delta_lat / h > delta_lng / w) {
     scaled_h = h;
     scaled_w = w * delta_lat / delta_lng;
     off_x = (w - scaled_w) / 2;
   } else {
     scaled_h = h * delta_lat / delta_lng;
     scaled_w = w;
     off_y = (h - scaled_h) / 2;
   }

   var scale = pv.Geo.scale()
           .domain(us_lowres[state].borders[0])
           .range({x: off_x, y: off_y},
           {x: scaled_w + off_x, y: scaled_h + off_y});


   var vis = new pv.Panel(state)
           .canvas(box)
           .width(w)
           .height(h)
           .data(borders)
           .add(pv.Line)
           .data(function(l) l)
           .left(scale.x)
           .top(scale.y)
           .fillStyle(function(d, l, c) {
             return(color);
           })
           .lineWidth(0)
           .strokeStyle(color)
           .antialias(false);

   vis.render();
 };

Answer 1

d3 似乎有能力制作类似于您想要的地图。该示例显示了县和州，因此您只需省略县，然后以正确的格式提供选举结果。

Answer 2

50states.com 上有一组地图，例如 http://www.50states.com/maps /alabama.htm，大约5KB。那么，整个集合大约有 250KB。既然您提到单独使用它们，这就是您的答案。

或者你除了展示轮廓之外还做了更多的事情吗？