如何用openlayers4.6.5实现精准的距离和面积量测功能？

本文共计1273个文字，预计阅读时间需要6分钟。

原文示例：本文以大家庭分享了OpenLayers 4.6.5实现距离量测和面积量测的整体代码，供大家参考，具体内容如下：

版本：OpenLayers 4.6.5效果图：小插曲：原使用ol官方提供的量测示例，具体内容如下：

改写后：本文分享了OpenLayers 4.6.5实现距离和面积测量的完整代码，供大家参考。具体内容包含版本信息、效果图、小插曲及官方提供的量测示例。

本文实例为大家分享了openlayers4.6.5实现距离量测和面积量测的具体代码，供大家参考，具体内容如下

版本： openlayers4.6.5

效果图：

小插曲：

原本使用ol官方提供的 量测例子，就挺不错的。但是由于放在项目中后。量测样式不知道为啥出不来，找了半天原因 也没有找到，单独在一个html中完全没问题。所以推测可能和项目中哪些地方有冲突，但是问题暂时没找出来，项目也比较急，所以只能自己实现文字标注部门的样式，实现效果如上图gif所示。

实现原理：

量测功能还是使用了ol例子提供的源码，修改部分主要是在标注这一块，另外就是时刻去添加这个标注 然后时刻删除这个标注 就可以了。