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


Posted in Javascript onSeptember 25, 2020

本文实例为大家分享了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);
 source=new ol.source.Vector();
 vector.setSource(source);
 lastPolygonLabelFeature=null;
 lastLengthLabelFeature=null;
 click=false;
 
 sketch = null;
 output="0";
 
 reSetCur();
 })
 function setMeasureCur(){
 $('#map').css({
 cursor:"url(../../static/images/measureIcon/measure.cur), auto"
 });
 }
 
 function reSetCur(){
 $('#map').css('cursor','default');
 }
 
 source = new ol.source.Vector();
 vector = new ol.layer.Vector({
 source: source,
 style: new ol.style.Style({
 fill: new ol.style.Fill({//面的填充颜色
 color: 'rgba(255, 0, 0, 0.1)'
 }),
 stroke: new ol.style.Stroke({
 color: 'rgb(255,116,3)',
 width: 2
 }),
 image: new ol.style.Circle({
 radius: 3,
 stroke: new ol.style.Stroke({
 color: 'rgba(255, 0, 0,1)',
 width: 2
 }),
 fill: new ol.style.Fill({
 color: 'rgba(255,255,255)'
 })
 
 })
 })
 });
 map.addLayer(vector);
 
 var sketch;
 
 var pointerMoveHandler = function(evt) {
 if (evt.dragging) {
 return;
 }
 var Coord;
 
 if(sketch){
 var geom = sketch.getGeometry();
 if (geom instanceof ol.geom.Polygon) {
 
 if(lastPolygonLabelFeature){
  //鼠标移动 不停的添加和删除
 source.removeFeature(lastPolygonLabelFeature);
 }
 
 Coord = geom.getInteriorPoint().getCoordinates();
 
 //新建一个要素ol.Feature
 var newFeature = new ol.Feature({
  geometry: new ol.geom.Point(Coord), //几何信息
  name: output
 });
 lastPolygonLabelFeature=newFeature; 
 newFeature.setStyle(createLabelStyle(newFeature,0,0)); 
 } else if (geom instanceof ol.geom.LineString) {
 if(lastLengthLabelFeature){
 source.removeFeature(lastLengthLabelFeature);
 }
 
 Coord = geom.getLastCoordinate();
 //新建一个要素ol.Feature
 var newFeature = new ol.Feature({
  geometry: new ol.geom.Point(Coord), //几何信息
  name: output
 });
 lastLengthLabelFeature=newFeature;
 newFeature.setStyle(createLabelStyle(newFeature,35,-10)); 
 }
 //设置要素样式
 source.addFeature(newFeature);
 }
 };
 
 map.on('pointermove', pointerMoveHandler);
 map.on('click', function(evt){
 var coordinate = evt.coordinate; //鼠标单击点的坐标
 console.log(coordinate);
 if(output=="0"){
 lastPolygonLabelFeature=null;
 if(lastLengthLabelFeature){
 source.removeFeature(lastLengthLabelFeature);
 lastLengthLabelFeature=null;
 }
 return;
 }
 
 var Coord;
 if(sketch){
 var geom = sketch.getGeometry();
 if (geom instanceof ol.geom.Polygon) {
 
 if(lastPolygonLabelFeature){
 source.removeFeature(lastPolygonLabelFeature);
 }
 Coord = geom.getInteriorPoint().getCoordinates();
 
 //新建一个要素ol.Feature
 var newFeature = new ol.Feature({
  geometry: new ol.geom.Point(Coord), //几何信息
  name: output
 });
 lastPolygonLabelFeature=newFeature;
 newFeature.setStyle(createLabelStyle(newFeature,0,0)); //设置要素样式
 source.addFeature(newFeature);
 
 
 } else if (geom instanceof ol.geom.LineString) {
 
 Coord = geom.getLastCoordinate();
 //新建一个要素ol.Feature
 var newFeature = new ol.Feature({
  geometry: new ol.geom.Point(Coord), //几何信息
  name: output
 });
 newFeature.setStyle(createLabelStyle(newFeature,35,-10)); //设置要素样式
 source.addFeature(newFeature);
 }
 
 var pointFeature = new ol.Feature({
 geometry: new ol.geom.Point(coordinate), //几何信息
 name: output
 });
 source.addFeature(pointFeature);
 }
 
 });
 
 //矢量标注样式设置函数,设置image为图标ol.style.Icon
 function createLabelStyle(feature,offsetX,offsetY){
 return new ol.style.Style({
// image: new ol.style.Icon({
//  anchor: [0.5, 60], //锚点
//  anchorOrigin:'top-right', //锚点源
//  anchorXUnits: 'fraction', //锚点X值单位
//  anchorYUnits: 'pixels', //锚点Y值单位
//  offsetOrigin: 'top-right', //偏移原点
//  opacity: 0.75,
//  src: 'OL3Demo/images/label/blueIcon.png' //图标的URL
// }),
 text: new ol.style.Text({
  textAlign: 'center', //位置
  textBaseline: 'middle', //基准线
  font: 'normal 10px sans-serif', //文字样式
  text: feature.get('name'), //文本内容
  fill: new ol.style.Fill({ //文本填充样式(即文字颜色)
  color: 'white'
  }),
  stroke: new ol.style.Stroke({
  color: 'black', 
  width: 5
  }),
  offsetX:offsetX,
  offsetY:offsetY
 
 })
 });
 }
 
 
 
 function addInteraction(drawType) {
 var type = (drawType== 'area' ? 'Polygon' : 'LineString');
 draw = new ol.interaction.Draw({
 source: source,
 type: type,
 style: new ol.style.Style({
 fill: new ol.style.Fill({
 color: 'rgba(255, 0, 0, 0.2)'
 }),
 stroke: new ol.style.Stroke({
 color: 'rgb(255,116,3)',
// lineDash: [10, 10],//虚线
 width: 2
 }),
 image: new ol.style.Circle({
 radius: 5,
 stroke: new ol.style.Stroke({
 color: 'rgba(255, 0, 0, 0.1)'
 }),
 fill: new ol.style.Fill({
 color: 'rgba(255,116,3, 0.3)'
 })
 })
 })
 });
 map.addInteraction(draw);
 
 var listener;
 draw.on('drawstart',
 function(evt) {
 // set sketch
 sketch = evt.feature;
 listener = sketch.getGeometry().on('change', function(evt) {
 var geom = evt.target;
 
 if (geom instanceof ol.geom.Polygon) {
  output = formatArea(geom);
 } else if (geom instanceof ol.geom.LineString) {
  output = formatLength(geom);
 }
 
 });
 }, this);
 
 draw.on('drawend',
 function() {
 // unset sketch
 sketch = null;
 ol.Observable.unByKey(listener);
 output="0";
 }, this);
 }
 
 var formatLength = function(line) {
 var length = ol.Sphere.getLength(line);
 var output;
 if (length > 100) {
 output = (Math.round(length / 1000 * 100) / 100) +
 ' ' + '千米';
 } else {
 output = (Math.round(length * 100) / 100) +
 ' ' + '米';
 }
 return output;
 };
 
 var formatArea = function(polygon) {
 var area = ol.Sphere.getArea(polygon);
 var output;
 if (area > 10000) {
 output = (Math.round(area / 1000000 * 100) / 100) +
 ' ' + '平方千米';
 } else {
 output = (Math.round(area * 100) / 100) +
 ' ' + '平方米';
 }
 return output;
 };
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
JavaScript的==运算详解
Jul 20 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 #jQuery
Openlayers测量距离与面积的实现方法
Sep 25 #Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 #Javascript
OpenLayers3实现测量功能
Sep 25 #Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 #Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 #Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 #Javascript
You might like
使用php来实现网络服务
2009/09/15 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
python pycharm的安装及其使用
2019/10/11 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
ORACLE第二个十问
2013/12/14 面试题
Java如何支持I18N?
2016/10/31 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
同学聚会通知短信
2015/04/20 职场文书
缅怀先烈主题班会
2015/08/14 职场文书