Javascript 以编程方式绘制一组正方形边界的最佳方法是什么？
我正在构建一个工具，该工具最终将利用Google Maps API v3在地图上构建一个区域，该区域由固定“网格”系统上的固定边长（例如10米）的正方形构成（例如，从地球的0,0点开始，每隔0.0001拉特单位间隔的坐标） 我已经编写了一些代码，用户可以点击地图上的某个区域，代码会绘制出一个轮廓并填充找到它的正方形。用户可以单击该正方形的其他相邻位置来构建一个越来越大的“块状”多边形，也可以单击单个正方形来删除它们。我已经在HTML5Canvas/JavaScript以及谷歌地图API中测试了所有这些 现在我想编写一段代码，删除任何内部边/顶点，这样它就只绘制这个多边形的最外层边界，这样它实际上被绘制为一个大多边形，而不是一组正方形。这样想吧：尽管我们知道澳大利亚、美国等国家是由许多州组成的，但当我们在国家周围划定边界时，我们通常对所有州的边界都不感兴趣，可以删除中间的界线，只划定外部边界。这和我想完成的一样，只是使用正方形网格，而不是复杂的多边形 我目前的代码如下： HTML:Javascript 以编程方式绘制一组正方形边界的最佳方法是什么？,javascript,html,algorithm,google-maps,html5-canvas,Javascript,Html,Algorithm,Google Maps,Html5 Canvas,我正在构建一个工具，该工具最终将利用Google Maps API v3在地图上构建一个区域，该区域由固定“网格”系统上的固定边长（例如10米）的正方形构成（例如，从地球的0,0点开始，每隔0.0001拉特单位间隔的坐标） 我已经编写了一些代码，用户可以点击地图上的某个区域，代码会绘制出一个轮廓并填充找到它的正方形。用户可以单击该正方形的其他相邻位置来构建一个越来越大的“块状”多边形，也可以单击单个正方形来删除它们。我已经在HTML5Canvas/JavaScript以及谷歌地图API中测试了所
// don't forget to set load type in jsfiddle to no wrap in <body>
// define the global variable and some helper variables to make the code shorter
var gv = {};
gv.o = function(id) {
return document.getElementById(id)
};
gv.i = 'innerHTML';
// etc.
//别忘了将JSFIDLE中的load type设置为no wrap in
//定义全局变量和一些辅助变量以缩短代码
var gv={}；
gv.o=功能（id）{
返回文档.getElementById（id）
};
gv.i='innerHTML'；
//等等。
- 添加到具有1个重复顶点的多边形的正方形（工作）
- 添加到多边形的正方形，在所有情况下都有2个和3个重复顶点：相邻边、非相邻边、非连续顶点（当前仅适用于第一种情况）
- 在所有情况下，正方形添加到具有4个重复顶点的多边形：插入孔、插入孔的一部分、连接多个多边形（当前仅适用于第一种情况）
- 在上述情况下，从具有1个重复顶点的多边形中移除正方形（尚未开发，但应有效地与添加代码“相反”）
- 在上述情况下，从具有2个和3个重复顶点的多边形中移除正方形（尚未开发，但实际上应与添加代码“相反”）
- 在上述情况下，从具有4个重复顶点的多边形中删除正方形（尚未开发，但实际上应与添加代码“相反”）
- 在具有多个内边界的多边形外部添加/删除正方形，即孔（尚未开发，可能比较棘手）
- 在具有多个内边界的多边形内部添加/删除正方形，即孔（尚未开发，可能比较棘手）
- 旅行推销员问题。然而，这不是优化路径，而是确保路径“可绘制”，从而朝一个方向前进。只要生成的形状与用户期望的形状相似，重叠顶点就完全可以
- 凸面外壳算法。不适用，因为外壳可能是凸面、凹面甚至不连续的！此外，我认为通过简化为网格系统，我已经消除了许多分散的顶点的问题，在这些点上，你需要确定它们离中心点有多远，使用三角学等
- 凹面外壳解决方案。这离解决我的问题越来越近了，但我所看到的是，有许多商业工具（如ArcGIS）插件可以实现这一点，但没有涵盖我所有用例的通用代码（无论编程语言如何）
- 基于磁贴的游戏。您可能会认为，任何基于磁贴的游戏都需要在磁贴周围绘制边界（例如，实时战略游戏中玩家的领土）可以解决此问题，但我看不到这一点
context.rectcontext.clipcontext.globalCompositeOperation='destination out'// don't forget to set load type in jsfiddle to no wrap in <body>
// define the global variable and some helper variables to make the code shorter
var gv = {};
gv.o = function(id) {
return document.getElementById(id)
};
gv.i = 'innerHTML';
// etc.
var aInside=[ {x:60,y:60},{x:80,y:60},{x:40,y:60},{x:60,y:40},{x:60,y:80} ];