OpenLayers 4.6.5：实现距离与面积测量，解决样式冲突问题

在OpenLayers 4.6.5版本中，本文提供了一个实例来展示如何实现在地图上进行距离量测和面积量测的功能。作者首先利用了OpenLayers官方提供的量测功能作为基础，但由于在实际项目集成时遇到样式显示问题，导致无法正常使用官方示例。为了解决这个问题，作者决定自定义标注样式并实现了文本标注功能。 实现过程中，关键步骤包括： 1. **量测功能核心**：虽然采用了官方示例的源码，但主要改动在于处理标注（labeling）部分。作者创建了一个变量`lastPolygonLabelFeature`和`lastLengthLabelFeature`分别用来存储上一次测量的面和点标注要素，这样可以动态地更新和删除标注。 2. **事件交互管理**：通过jQuery，用户可以通过点击不同的按钮（`measureDistance`、`measureArea`和`measureClear`）来切换不同类型的测量（距离、面积）。当用户绘制时，`draw`交互会被移除，然后切换到`length`或`area`交互，并调用`setMeasureCur()`函数来初始化测量。 3. **清除功能**：`measureClear`按钮负责清空地图上的测量元素，包括删除矢量层中的数据源，重置标注，以及清除绘图状态。 4. **自定义鼠标样式**：虽然代码没有列出具体的鼠标样式，但作者提到可以通过邮件提供，这可能涉及到地图互动时鼠标指针的改变或特定形状提示。 5. **结果输出**：测量结果显示在输出框中，通过`output`变量记录当前测量值，并在需要时更新显示。 作者的解决方案展示了如何在OpenLayers 4.6.5中处理量测功能的自定义需求，尤其是在遇到外部环境（如项目集成）干扰时的灵活应对。尽管代码中存在未解决的样式冲突问题，但对于理解和实现类似功能具有很高的参考价值。