基于openlayers的测量功能,官网提供了长度测量和角度测量,但是没有角度测量,在此写一下基于openlayers的角度测量功能,主要方法如下:
var formatAngle = function (line) { var coordinates = line.getCoordinates(); var angle=0; var sourceProj = map.getView().getProjection(); for (var i =0, ii = coordinates.length - 1; i < ii; ++i) { var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326'); var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326'); var c3=0 //当绘制两个及以上点的时候,将c1的值传给C3,C2的值传给C1 if(i>=1){ c3=ol.proj.transform(coordinates[i-1], sourceProj, 'EPSG:4326'); var disa=wgs84Sphere.haversineDistance(c3, c1); var disb=wgs84Sphere.haversineDistance(c1, c2); var disc=wgs84Sphere.haversineDistance(c2, c3); //由于绘制结束的时候双击会导致c1=c2,从而disb=0,而分母不能为零,导致angle=NAN值,所以需要取双击的前一次值。 //当有三个以上的点的时候,形成了角度,需要对角度进行测量输出。 if(disb===0&&i>=2){ c1 = ol.proj.transform(coordinates[i-1], sourceProj, 'EPSG:4326'); c2 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326'); c3 = ol.proj.transform(coordinates[i-2], sourceProj, 'EPSG:4326'); disa=wgs84Sphere.haversineDistance(c3, c1); disb=wgs84Sphere.haversineDistance(c1, c2); disc=wgs84Sphere.haversineDistance(c2, c3); } var cos=(disa*disa+disb*disb-disc*disc)/(2*disa*disb); //利用余弦定理公式计算cos值 angle=Math.acos(cos)*180/Math.PI; //求反余弦值,得到弧度制,并将弧度值转角度值 angle=angle.toFixed(2)+"度"; //对计算完成的角度,保留两位小数 //由于绘制结束的时候双击会导致c1=c2,从而disb=0,而分母不能为零,导致angle=NAN值,所以需要取双击的前一次值。 //当只有两个点的时候,只是一条线,并不形成角度,需要提示继续绘制。 if(disb===0&&i<2){ angle="请继续绘制形成角度"; } } //当只是绘制一个点的时候,提示继续绘制。 else{ angle="请继续绘制形成角度"; } } var output; output=angle; return output;//返回 };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍Openlayers实现测量功能,包括了Openlayers实现测量功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Openlayers实现测量的具体代码,供大家参考,具体内容如下 由于公司项目需要使用到openlayers,就开始学习了openlayers,其中有一个需求需要用到测量功能,就参考《WebGisOpenlayers全面解析》写了一个小demo,话不多
本文向大家介绍Openlayers测量距离与面积的实现方法,包括了Openlayers测量距离与面积的实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Openlayers测量距离与面积的具体代码,供大家参考,具体内容如下 1、地图测量功能 一般的地图的测量功能主要表现在两个方面,一是测量距离,一是测量面积;面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大
本文向大家介绍基于Vue实现拖拽功能,包括了基于Vue实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: JS代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
我正在用angular 4开发一个管理面板,并尝试集成一个部分来定制样式,比如change color、bg等。我已经开发了一个部分来保存数据库中的设置,使用API将它们作为json加载到应用程序中。 现在我正在尝试使用json中的值生成一个动态css,我尝试了主组件中的以下代码,但它不起作用 我不确定应该如何在组件中加载css值并在样式标记中使用它们。我没有找到任何其他的解决办法。 另一种方法是
本文向大家介绍Openlayers实现地图的基本操作,包括了Openlayers实现地图的基本操作的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Openlayers实现地图基本操作的具体代码,供大家参考,具体内容如下 1、新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个Div标签和4个Button按钮,用来实现地图的放大、缩小、平移等功能; 2、代码
本文向大家介绍基于JavaScript实现类似于百度学术高级检索功能,包括了基于JavaScript实现类似于百度学术高级检索功能的使用技巧和注意事项,需要的朋友参考一下 百度学术http://xueshu.baidu.com/高级检索是通过前台生成后台内部高级语法来实现高级检索的,可以通过前台js做字符串拼接传给后台实现,难度不大: 下面是高级检索的核心功能代码,我使用的是纯js实现,并未使用j