本文例項為大家分享了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.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,1)',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)); 
 } 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)); //設定要素樣式
 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,-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.2)'
 }),// lineDash: [10,10],//虛線
 width: 2
 }),image: new ol.style.Circle({
 radius: 5,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;
 };
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。