openlayers 4.6.5 거리 측정 과 면적 측정 실현

본 논문 의 사례 는 openlayers 4.6.5 거리 측정 과 면적 측정 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
판본:openlayers 4.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;
 };
})

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.