Voronoi图和Delaunay三角网

一、使用Delaunator生成点的Delaunay图。

图1. 偏移，坐标设置不正确

二、利用D3.js生成Voronoi图与Delaunay三角网

D3.js v4生成的Voronoi图

2.1 定义projection

    使用d3.geoMercator()定义数据所对应的投影。

let projection = d3.geoMercator();

2.2 定义绘制path

    利用d3.geoPath定义绘制地理数据所需的path。

let path = d3.geoPath().projection(projection)

2.3 GeoJSON点集数据

    使用d3.json读取点集数据，并根据数据的格式进行解析，取得GeoJSON中的features。并根据feature数据中的geometry，获得其中的坐标信息（coordinates)，得到生成voronoi图所需的点集数据（points）。

图2. 底图，模拟的点集

2.4 生成voronoi图

    使用前面所获得的坐标点集信息，利用d3.voronoi生成voronoi图的各多边形（polygons）。

voronoi(points).polygons

 

 

图3. 利用点集生成的Voronoi图

 

 

2.5 生成Delaunay三角网

voronoi.links(points)

图4. 点集对应的Delaunay三角网

2.6 Voronoi图与Delaunay三角网的叠加

图5. Voronoi图和Delaunay三角网的叠加

图6. 结合OpenLayers，集成Voronoi图

图7. 集成Voronoi和Delaunay图，使用ImageCanvas绘制

三、裁剪，把约束范围外的图形裁剪掉

3.1 裁剪的方法

    使用空间裁剪算法：Greiner-Hormann；Cohen-Sutherland；Martinez-Rueda；Weiler-Atherton；Vatti

    使用绘制底层裁剪方法：Canvas clip；SVG clip

3.2 利用Canvas Clip进行裁剪的结果

    1）读取裁剪区域的Geometry多边形；

    2）循环读取坐标对；

    3）利用projection，把坐标对从地理空间（Earth）投影到像素空间（Screen）;

    4) 利用转换的坐标对构建Canvas clip对象；

图8. 裁剪的结果

图9. 裁剪的结果

3.3 使用Canvas clip进行裁剪中存在的问题

    1）多个多边形，如何裁剪？台湾及海南岛的问题。

    2）没有考虑边界的Voronoi效应；只是单纯的裁剪。

四、性能测试