openlayers4.6.5实现距离量测和面积量测_rhttps://sycsycmsycmq1q1！ - CSDN文库

160 浏览量更新于2023-03-03 评论收藏 476KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

openlayers4.6.5实现距离量测和面积量测实现距离量测和面积量测

主要为大家详细介绍了openlayers4.6.5实现距离量测和面积量测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小

伙伴们可以参考一下

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

版本： openlayers4.6.5

效果图：

小插曲：小插曲：

原本使用ol官方提供的量测例子，就挺不错的。但是由于放在项目中后。量测样式不知道为啥出不来，找了半天原因也没有找到，单独在一个html中完

全没问题。所以推测可能和项目中哪些地方有冲突，但是问题暂时没找出来，项目也比较急，所以只能自己实现文字标注部门的样式，实现效果如上图

gif所示。

实现原理：实现原理：

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

完整的js代码如下（鼠标样式图标我没放上来，有需要的我给你发邮箱）：

var draw;

var click=false;

var output=0;

var vector;

var source;

var lastPolygonLabelFeature;//记录上一个面标注要素

var lastLengthLabelFeature;//记录上一个点标注要素

$(

function(){

$("#measureDistance").click(function(){

if(draw){

map.removeInteraction(draw);

}

addInteraction("length");

setMeasureCur();

})

$("#measureArea").click(function(){

if(draw){

map.removeInteraction(draw);

}

addInteraction("area");

setMeasureCur();

})

$("#measureClear").click(function(){

map.removeInteraction(draw);

vector.setSource(null);

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38705874

粉丝: 6
资源: 924

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈