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;
 };
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。