欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

使用openlayers4.6.5實(shí)現(xiàn)距離量測(cè)和面積量測(cè)-創(chuàng)新互聯(lián)

使用openlayers4.6.5實(shí)現(xiàn)距離量測(cè)和面積量測(cè)？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

專業(yè)成都網(wǎng)站建設(shè)公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來(lái)客戶和效益!創(chuàng)新互聯(lián)建站為您提供成都網(wǎng)站建設(shè)，五站合一網(wǎng)站設(shè)計(jì)制作，服務(wù)好的網(wǎng)站設(shè)計(jì)公司，網(wǎng)站制作、成都網(wǎng)站制作負(fù)責(zé)任的成都網(wǎng)站制作公司!

完整的js代碼如下（鼠標(biāo)樣式圖標(biāo) 我沒(méi)放上來(lái)，有需要的我給你發(fā)郵箱）：

var draw;
var click=false;
var output=0;
var vector;
var source;
var lastPolygonLabelFeature;//記錄上一個(gè)面標(biāo)注要素 
var lastLengthLabelFeature;//記錄上一個(gè)點(diǎn)標(biāo)注要素
$(
 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){
          //鼠標(biāo)移動(dòng) 不停的添加和刪除
      source.removeFeature(lastPolygonLabelFeature);
      }
      
      Coord = geom.getInteriorPoint().getCoordinates();
      
      //新建一個(gè)要素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();
       //新建一個(gè)要素ol.Feature
       var newFeature = new ol.Feature({
         geometry: new ol.geom.Point(Coord), //幾何信息
         name: output
       });
       lastLengthLabelFeature=newFeature;
       newFeature.setStyle(createLabelStyle(newFeature,35,-10)); 
     }
     //設(shè)置要素樣式
     source.addFeature(newFeature);
   }
 };
   
   map.on('pointermove', pointerMoveHandler);
   map.on('click', function(evt){
    var coordinate = evt.coordinate; //鼠標(biāo)單擊點(diǎn)的坐標(biāo)
    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();
       
       //新建一個(gè)要素ol.Feature
        var newFeature = new ol.Feature({
          geometry: new ol.geom.Point(Coord), //幾何信息
          name: output
        });
        lastPolygonLabelFeature=newFeature;
        newFeature.setStyle(createLabelStyle(newFeature,0,0));   //設(shè)置要素樣式
        source.addFeature(newFeature);
        
       
      } else if (geom instanceof ol.geom.LineString) {
       
       Coord = geom.getLastCoordinate();
        //新建一個(gè)要素ol.Feature
        var newFeature = new ol.Feature({
          geometry: new ol.geom.Point(Coord), //幾何信息
          name: output
        });
        newFeature.setStyle(createLabelStyle(newFeature,35,-10));   //設(shè)置要素樣式
        source.addFeature(newFeature);
      }
      
      var pointFeature = new ol.Feature({
        geometry: new ol.geom.Point(coordinate), //幾何信息
        name: output
      });
      source.addFeature(pointFeature);
    }
     
   });
   
   //矢量標(biāo)注樣式設(shè)置函數(shù)，設(shè)置image為圖標(biāo)ol.style.Icon
   function createLabelStyle(feature,offsetX,offsetY){
     return new ol.style.Style({
//       image: new ol.style.Icon({
//         anchor: [0.5, 60],       //錨點(diǎn)
//         anchorOrigin:'top-right',    //錨點(diǎn)源
//         anchorXUnits: 'fraction',    //錨點(diǎn)X值單位
//         anchorYUnits: 'pixels',     //錨點(diǎn)Y值單位
//         offsetOrigin: 'top-right',   //偏移原點(diǎn)
//         opacity: 0.75,
//         src: 'OL3Demo/images/label/blueIcon.png' //圖標(biāo)的URL
//       }),
       text: new ol.style.Text({
         textAlign: 'center',      //位置
         textBaseline: 'middle',     //基準(zhǔn)線
         font: 'normal 10px sans-serif',  //文字樣式
         text: feature.get('name'),   //文本內(nèi)容
         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;
    };
})

分享題目：使用openlayers4.6.5實(shí)現(xiàn)距離量測(cè)和面積量測(cè)-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://www.chinadenli.net/article24/djcdje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、關(guān)鍵詞優(yōu)化、外貿(mào)建站、手機(jī)網(wǎng)站建設(shè)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司