一、使用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效应;只是单纯的裁剪。
四、性能测试