OpenLayers 6 连点成线——限制只能在已有的点要素之间画线

我们有时候会遇到这样一种需求：地图上已经产生了一些点，需要手动在这些点之间画线连接。

 

分析：

我们知道OpenLayers原生的ol.interaction.Draw类型是无法支持这种限制的。于是仍然考虑在事件处理上找找机会：ol.interaction.Draw有一个属性condition，它的定义是一个函数，接受event作为参数（实际上只限于click类型的event），然后由函数的逻辑决定返回值ture还是false，以此通知控件是否处理本次点击绘制。

实现：

先在这里试试，在ol.interaction.Draw初始化的时候给condition赋值：

			condition: function(event) {
			let flag = 0;
			let features = map.getFeaturesAtPixel(event.pixel)
			features.some(element => {
				if (vSource.hasFeature(element)) {
					flag = 1;
					return true
				}
			});
			if (flag == 1) return true;

		}

先声明一个标志变量，然后用some对点击到的所有要素进行部分遍历（存在没有点击到的情况，所以用了一个标志变量），使用了hasFeature来判断迭代到的要素是不是我们目标图层里的点要素，如果是，就返回ture中断迭代过程。

在外面判断flag的值来确定上面的迭代过程有没有命中目标图层中的点要素，如果命中了，返回ture，通知draw组件“处理”本次点击，连线。

为了能准确点到目标图层的点要素，还需要向地图上添加一个snap交互组件，使得鼠标指针能够自动吸附到附近的点要素：

var snap = new ol.interaction.Snap({
			source: vSource
		})
		map.addInteraction(draw);
		map.addInteraction(snap);

最后的效果就是：

全部代码：

ol库请自备……

---

我在企鹅家的课堂和CSDN学院都开通了《OpenLayers实例详解》课程，欢迎报名学习。搜索关键字OpenLayers就能看到。