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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
理解 JavaScript Scoping & Hoisting(二)
Nov 18 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
深入探究node之Transform
Jul 20 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 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依赖注入的理解实例分析
2016/10/09 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
js实现3D旋转效果
2020/08/18 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
python读写配置文件操作示例
2019/07/03 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
班组安全员工作职责
2014/02/01 职场文书
幼儿园老师寄语
2014/04/03 职场文书
入党介绍人评语
2014/05/06 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
美容院合作经营协议书
2014/10/10 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书