一、绘制 GL_POLYGON 模式多边形

使用 glBegin(GL_POLYGON) 设置绘制多边形 , 不管有几个点 , 都按照指定的顺序连接起来 ;

注意 : 这些点组成的多边形必须是凸多边形 , 不能是凹多边形 ;

代码示例 :

	// 只显示正面 , 不显示背面
	//glEnable(GL_CULL_FACE);

	// 设置顺时针方向 CW : Clock Wind 顺时针方向
	// 默认是 GL_CCW : Counter Clock Wind 逆时针方向 
	//glFrontFace(GL_CW);

    // 主消息循环:
    while (GetMessage(&msg, nullptr, 0, 0))
    {
        if (!TranslateAccelerator(msg.hwnd, hAccelTable, &msg))
        {
            TranslateMessage(&msg);
            DispatchMessage(&msg);
        }

		// 渲染场景

		// 清除缓冲区 , 
		// 使用之前设置的 glClearColor(1.0, 0.0, 0.0, 1.0) 擦除颜色缓冲区
		// 红色背景
		glClear(GL_COLOR_BUFFER_BIT);

        // 设置当前的绘制颜色 , 4 个 unsigned byte 
        // 每个颜色的分量占一个字节
        // 参数数据是 R 红色 G 绿色 B 蓝色 A 透明度
        // 下面设置的含义是白色, 绘制点的时候, 每次都使用白色绘制
        glColor4ub(255, 255, 255, 255);

		// 设置线的宽度 
		glLineWidth(2.0f);

        //glBegin(GL_POINTS);	// 绘制点
        //glBegin(GL_LINES);	// 绘制线
		//glBegin(GL_LINE_STRIP);// 绘制前后连接的点组成的线
        //glBegin(GL_LINE_LOOP); // 绘制前后连接的点组成的线 , 并且收尾相连
        //glBegin(GL_TRIANGLES); // 绘制多个三角形
        //glBegin(GL_TRIANGLE_STRIP); // 绘制 GL_TRIANGLE_STRIP 三角形
		//glBegin(GL_TRIANGLE_FAN);	// 绘制三角形扇

		// 绘制多边形
        glBegin(GL_POLYGON);

		// 1. 设置白色 , glVertex3f (GLfloat x, GLfloat y, GLfloat z)
		glColor4ub(255, 255, 255, 255);
        glVertex3f(0.0f, 0.0f, -10.0f);

		// 2. 设置绿色 
		glColor4ub(0, 255, 0, 255);
		glVertex3f(-5.0f, 0.0f, -10.0f);

		// 3. 设置蓝色
		glColor4ub(0, 0, 255, 255);
		glVertex3f(-5.0f, -2.0f, -10.0f);

		// 4. 设置绿色 
		glColor4ub(0, 255, 0, 255);
		glVertex3f(0.0f, -2.0f, -10.0f);



		// 5. 设置白色 , glVertex3f (GLfloat x, GLfloat y, GLfloat z)
		glColor4ub(255, 255, 255, 255);
		glVertex3f(0.0f, 4.0f, -10.0f);

		// 6. 设置绿色 
		glColor4ub(0, 255, 0, 255);
		glVertex3f(-5.0f, 4.0f, -10.0f);

		
        // 绘制四边形结束
        glEnd();

		// 将后缓冲区绘制到前台
		SwapBuffers(dc);

    }

绘制效果 :

二、多边形绘制顺序分析

在 glBegin 和 glEnd 之间设置了 $6$ 个点 , 分别在图中标号 , 绘制顺序按照 $1\to 2\to 3\to 4\to 5\to 6\to 1$ 顺序连接起来 , 最终画出了如下多边形 ;

		// 绘制多边形
        glBegin(GL_POLYGON);

		// 1. 设置白色 , glVertex3f (GLfloat x, GLfloat y, GLfloat z)
		glColor4ub(255, 255, 255, 255);
        glVertex3f(0.0f, 0.0f, -10.0f);

		// 2. 设置绿色 
		glColor4ub(0, 255, 0, 255);
		glVertex3f(-5.0f, 0.0f, -10.0f);

		// 3. 设置蓝色
		glColor4ub(0, 0, 255, 255);
		glVertex3f(-5.0f, -2.0f, -10.0f);

		// 4. 设置绿色 
		glColor4ub(0, 255, 0, 255);
		glVertex3f(0.0f, -2.0f, -10.0f);



		// 5. 设置白色 , glVertex3f (GLfloat x, GLfloat y, GLfloat z)
		glColor4ub(255, 255, 255, 255);
		glVertex3f(0.0f, 4.0f, -10.0f);

		// 6. 设置绿色 
		glColor4ub(0, 255, 0, 255);
		glVertex3f(-5.0f, 4.0f, -10.0f);

		
        // 绘制四边形结束
        glEnd();

三、相关资源

GitHub 地址 : https://github.com/han1202012/OpenGL
( GitHub 源码始终都会随着后续博客的进度更新覆盖 , 可能没有本博客的相关源码 , 推荐下载博客源码快照 ) ;

博客源码快照 : https://download.csdn.net/download/han1202012/14880720
( 该源码是 Windows 桌面程序 , 使用 Visual Studio 2019 打开 )

背景介绍：

如下图所示，黑色是原多边形，红色是扩展的多边形，蓝色是收缩的多边形。这是最终的效果。

PS：楼主使用的是ES6的语法，地图是高德地图API

知识积累：

使用的是高中所学的向量的知识和三角公式知识。
对于向量：

• 设二维向量：a = (a1, a2); b = (b1, b2);
• 设三维向量：OA = (x1, y1, z1); OB = (x2, y2, z2);

1. 向量点乘积：a · b = a1 * b1 + a2 * b2 = |a| |b| cos<a, b>
2. 向量单位化：a 单位化后的 na = (a1 / Math.sqrt(a1 * a1 + a2 * a2), a1 / Math.sqrt(a1 * a1 + a2 * a2))
3. 向量叉乘积：
   二维： a X b = (a1 * b2) - (a2 * b1)
   三维：OA X OB = (y1 * z2 - y2 * z1, x2 * z1 - x1 * z2, x1 * y2 - x2 * y1)
4. 半角公式：
   

思路点拨：

1. 用一个数组paths表示要操作的多边形。其中paths的格式为：[[117.14589,36.659714],[117.145278,36.658952],[117.14626,36.658505],[117.147017,36.659628]]
2. 需要将paths的经纬度换成像素坐标。原因：如果使用经纬度和要扩展(收缩)大小做对比会有单位不统一的问题。解决方案：使用map.lnglatToPixel将经纬度换成像素坐标；使用map.pixelToLngLat将像素坐标转换成经纬度坐标。
3. 如上图所示，PP1 = (x1 - x, y1 - y); PP2 = (x2 - x, y2 - y); 令vx1 = x1 - x；vy1 = y1 - y；vx2 = x2 - x；vy2 = y2 - y；则 PP1 = (vx1, vy1); PP2 = (vx2, vy2);
4. 把PP1 和 PP2 单位化后，就得到了v1 = (vx1 / n1, vy1 / n1) 和 v2 = (vx2 / n2, vy2 / n2)。其中n1 = norm(vx1, vy1)；n2 = norm(vx2, vy2)
5. PQ = v1 + v2 = (vx1 / n1 + vx2 / n2, vy1 / n1 + vy2 / n2)。设 vx = vx1 / n1 + vx2 / n2；vy = vy1 / n1 + vy2 / n2，则PQ = (vx, vy)。还需要对PQ做单位化，则PQ = (vx / n, vy / n)，其中n = norm(vx, vy)。
6. 根据向量点乘积的含义，可以得到cos<v1, v2> = (vx1 * vx2 + vy1 * vy2) / (n1 * n2)；
7. |PQ| = L / sin(<v1, v2> / 2) 经化简可得 L / Math.sqrt(1 - (v1x * v2x + v1y * v2y) / 2)
8. 根据上述所说，就可以得到完整的PQ，现在加上P点坐标，就可以得到Q点坐标。
9. 处理完成后，记得将像素坐标转成经纬度坐标。
10. 在处理凹多边形时，需要使用叉乘积。用来判断是两向量的夹角是凹角还是凸角。
    若叉乘积 < 0，向量夹角为 凹角；若叉乘为OP1 X OP2，则 P1 - O - P2 为顺时针。
    若叉乘积 > 0，向量夹角为 凸角；若叉乘为OP1 X OP2，则 P1 - O - P2 为逆时针。
    若叉乘积 = 0，向量夹角为 平角；若叉乘为OP1 X OP2，则 P1 - O - P2 在一条直线上。
    因此在计算PQ 方向的时候，若为凸角， PQ = PP1 + PP2；若为凸角，PQ = P1P + P2P。无论是凸角还是凹角，|PQ| 是 恒定不变的，都为：|PQ| = L / Math.sqrt(1 - (v1x * v2x + v1y * v2y) / 2)

代码区域：

废话不多说，下面是完整代码（ES6），地图使用的是高德地图

/**
 * 计算多边形的外延
 * 算法详情可移步：https://blog.csdn.net/sun_and_breeze/article/details/107517088 去看
 * @param {*} map 高德地图map对象
 * @param {*} zoom 地图缩放比例
 * @param {*} scale 地图比例尺. 高德地图可以通过map.getScale()来获取。含义：表示当前屏幕距离一米代表实际距离多少米
 * @param {*} paths 多边形顶点数组。PS：下面代码中是按照多边形顶点逆时针排列的顺序进行处理的，如果你的顶点数组是顺时针，那么是用reverse方法倒过来即可。
 * @param {*} extra 外延大小。为正: 向外扩; 为负: 向内缩
 * @return 扩展或缩小后的多边形顶点数组
 */
export const calcPolygonExtra = (map, zoom, scale, paths, extra) => {
  if (!zoom) return
  const norm = (x, y) => Math.sqrt((x * x) + (y * y))

  const len = paths.length
  // 获取实际1m对应像素是多少
  const extraPixel = (extra / scale) * getDPI() * 1000
  let polygon = []
  for (let i = 0; i < len; i++) {
    const point = map.lnglatToPixel(paths[i], zoom) // P 点
    const point1 = map.lnglatToPixel(paths[i === 0 ? len - 1 : i - 1], zoom) // P1 点
    const point2 = map.lnglatToPixel(paths[i === len - 1 ? 0 : i + 1], zoom) // P2 点

    // 向量PP1
    const vectorX1 = point1.x - point.x // 向量PP1 横坐标
    const vectorY1 = point1.y - point.y // 向量PP1 纵坐标
    const n1 = norm(vectorX1, vectorY1) // 向量的平方根 为了对向量PP1做单位化
    let vectorUnitX1 = vectorX1 / n1 // 向量单位化 横坐标
    let vectorUnitY1 = vectorY1 / n1 // 向量单位化 纵坐标

    // 向量PP2
    const vectorX2 = point2.x - point.x // 向量PP2 横坐标
    const vectorY2 = point2.y - point.y // 向量PP2 纵坐标
    const n2 = norm(vectorX2, vectorY2) // 向量的平方根 为了对向量PP1做单位化
    let vectorUnitX2 = vectorX2 / n2 // 向量单位化 横坐标
    let vectorUnitY2 = vectorY2 / n2 // 向量单位化 纵坐标

    // PQ距离
    const vectorLen = -extraPixel / Math.sqrt((1 - ((vectorUnitX1 * vectorUnitX2) + (vectorUnitY1 * vectorUnitY2))) / 2)

    // 根据向量的叉乘积来判断角是凹角还是凸角
    if (((vectorX1 * vectorY2) + (-1 * vectorY1 * vectorX2)) < 0) {
      vectorUnitX2 *= -1
      vectorUnitY2 *= -1
      vectorUnitX1 *= -1
      vectorUnitY1 *= -1
    }
    
    // PQ的方向
    const vectorX = vectorUnitX1 + vectorUnitX2
    const vectorY = vectorUnitY1 + vectorUnitY2
    const n = vectorLen / norm(vectorX, vectorY)
    const vectorUnitX = vectorX * n
    const vectorUnitY = vectorY * n

    const polygonX = vectorUnitX + point.x
    const polygonY = vectorUnitY + point.y
    const polygonLngLat = map.pixelToLngLat(new window.AMap.Pixel(polygonX, polygonY), zoom)

    polygon[i] = [polygonLngLat.getLng(), polygonLngLat.getLat()]
  }

  return polygon
}

/**
 * 获取屏幕DPI的算法。屏幕每一毫米对应多少像素。
 */
const getDPI = () => {
  let dpi
  if (window.screen.deviceXDPI !== undefined) {
    dpi = window.screen.deviceXDPI
    // arrDPI[1] = window.screen.deviceYDPI
  } else {
    let tmpNode = document.createElement('DIV')
    tmpNode.style.cssText = 'width:1mm;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden'
    document.body.appendChild(tmpNode)
    dpi = parseInt(tmpNode.offsetWidth, 0)
    // arrDPI[1] = parseInt(tmpNode.offsetHeight, 0)
    tmpNode.parentNode.removeChild(tmpNode)
  }
  return dpi
}

项目需求

在在线地图中判断一个图形是否在另一个图形内，好像很复杂的样子,其实的确有点复杂，我们可以这样想。这个问题其实可以拆分成两步，第一步实现判断点是否在多边形内，第二步判断第一个多边形所有的点是否在第二个多边形内。

实现方案

先直接上代码，这个方法就是关键的操作（用于js中），用来判断点是否在多边形内，先解释一下里面的变量及其含义

judge(length, lianx, liany, testx, testy) {
      var i, j, c = false;
      length = parseInt(length);
      testx = parseFloat(testx);
      testy = parseFloat(testy);
      for (i = 0, j = length - 1; i < length; j = i++) {
        liany[i] = parseFloat(liany[i]);
        liany[j] = parseFloat(liany[j]);
        lianx[i] = parseFloat(lianx[i]);
        lianx[j] = parseFloat(lianx[j]);
        if (
          (liany[i] > testy) != (liany[j] > testy) &&
          (testx < (lianx[j] - lianx[i]) * (testy - liany[i]) /(liany[j] - liany[i]) + lianx[i])
        )
          c = !c;
      }
      return c;
    },

如果想知道原理的小伙伴可以接着往下看

这个方法其实每次都是在计算多边形中相邻的两个点和测试点之间是否满足以下两个关系
1.测试点纬度是否在两点纬度之间 (liany[i] > testy) != (liany[j] > testy)
2.如果在两点之间了，接下就得判断待测点test是否在i,j两点之间的连线之下** (testx < (lianx[j] - lianx[i]) * (testy - liany[i]) /(liany[j] - liany[i]) + lianx[i])**
然后每次这两个条件同时满足的时候我们把返回的布尔量取反。

可这到底是啥意思啊？
这个表达式的意思是说，随便画个多边形，随便定一个点，然后通过这个点水平划一条射线，先数数看这条
射线和多边形的边相交几次，（或者说先排除那些不相交的边，第一个判断条件），然后再数这条射线穿越多边形的次数是否为奇数，如果是奇数，那么该点在多边形内，如果是偶数，则在多边形外。该部分转载百度百科。

将这步完成后，就实现了判断点是否在多边形，而想要实现多边形在多边形内，就按上述所说即可。

如果存在问题请大家批评指正！！！