您的第一种方法称为Voronoi diagramm

对于使用D3库的javascipt,这种图表有一个解决方案

为了使这个解决方案完整,我在这里粘贴M.Bostock示例中的代码

var w = 1280,

h = 800;

var projection = d3.geo.azimuthal()

.mode("equidistant")

.origin([-98, 38])

.scale(1400)

.translate([640, 360]);

var path = d3.geo.path()

.projection(projection);

var svg = d3.select("body").insert("svg:svg", "h2")

.attr("width", w)

.attr("height", h);

var states = svg.append("svg:g")

.attr("id", "states");

var cells = svg.append("svg:g")

.attr("id", "cells");

d3.json("us-states.json", function(collection) {

states.selectAll("path")

.data(collection.features)

.enter().append("svg:path")

.attr("d", path);

});

d3.csv("airports.csv", function(airports) {

var positions = [];

airports.forEach(function(airport) {

positions.push(projection([+airport.longitude, +airport.latitude]));

});

// Compute the Voronoi diagram of airports' projected positions.

var polygons = d3.geom.voronoi(positions);

var g = cells.selectAll("g")

.data(airports)

.enter().append("svg:g");

g.append("svg:path")

.attr("class", "cell")

.attr("d", function(d, i) { return "M" + polygons[i].join("L") + "Z"; })

.on("mouseover", function(d, i) {

d3.select("#footer span").text(d.name);

d3.select("#footer .hint").text(d.city + ", " + d.state);

});

g.append("svg:circle")

.attr("cx", function(d, i) { return positions[i][0]; })

.attr("cy", function(d, i) { return positions[i][1]; })

.attr("r", 1.5);

});

使用OpenGL和Gouraud着色可以轻松实现第二个解决方案,但是将它导出到SVG(或者除了位图之外的其他任何东西)并不容易.我会考虑任何替代方案.