openlayers5.3.0实现根据选择的图形来统计图形总面积_openlayer 圈选统计面积

作者：Monodyee | 2024-05-22 08:40:11

踩

openlayer 圈选统计面积


<html lang="en">
  <head>
      <meta charset="utf8">
    <link rel="stylesheet" href="./css/ol.css" type="text/css">
    <style>
      .map {
        height: 100%;
        width: 100%;
        position: relative;
      }
      #area{
        top:10px;
        right: 60px;
		    height:30px;
		    width:120px;
		    text-align:center;
		    font-weight: bold;
		    display:none;
        position: fixed; 
        z-index: 999;
        border-style:none;
        background-color:transparent;
        font-family: STZhongsong;
      }
	    #btn{
	      width:150px;
	      top:10px;
        right: 300px;
	      height:30px;
	      background-color: #FFFFF0; 
        position: fixed; 
        z-index: 999;
        font-family: STZhongsong;
	  }
    </style>
    <script src="./build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map"> 
        <div>
            <input id="area" type="text" value="0万平方公里" /> 
           <button id="btn" type="button" onclick=show()>选择要素统计面积</button>
        </div>
    </div>
   
   
  <script type="text/javascript">
    var vector=new ol.layer.Vector({
       source:new ol.source.Vector({
         url:'./data/geojson/countries.geojson',
           format:new ol.format.GeoJSON()
         })
    });
    var tilelayer= new ol.layer.Tile({
            source: new ol.source.OSM()
          });
         
    var map = new ol.Map({
        target: 'map',
        layers: [
        tilelayer,vector
        ],
        view: new ol.View({
        projection: 'EPSG:4326',
         center:[117,42],
          zoom: 4   
        })
      });
    var select=new ol.interaction.Select({
        condition:ol.events.condition.click,
		    toggleCondition:ol.events.condition.click
    });
 
	  var oBtn=document.getElementById("btn");
	  var flag=false;
  	var arr=[];
	  var sum=0;
	  function show(){
	    flag=!flag;
	    if(flag){
		    oBtn.style.backgroundColor='#F0F8FF'
	    	document.getElementById("area").style.display="block";
		    map.addInteraction(select);
        sum=0;
        document.getElementById("area").value=parseInt(sum,10)+'万平方公里';	  
	    }
	    else{
	      oBtn.style.backgroundColor='#FFFFF0'
	      document.getElementById("area").style.display="none";
	      map.removeInteraction(select);
		    select.getFeatures().clear();
        arr=[];
        sum=0;
	    }
	  }
	 
   
    select.on('select',function(eve){
      if(eve.deselected.length>0){
        var deselectFeature=eve.deselected;
        for(var i=0;i<deselectFeature.length;i++){
            var deselectArea= deselectFeature[i].getGeometry().getArea();
			      for(var i=0;i<arr.length;i++){
			        if(arr[i]==deselectArea){
				      arr.splice(i,1);
              console.log(arr)
              sum=0;
			        }
			      }
          } 
      }
      else{  
        var selectFeature =eve.selected;
        for(var i=0;i<selectFeature.length;i++){
            var selectArea=selectFeature[i].getGeometry().getArea();
            arr.push(selectArea);
            sum=0;
        }	
      } 
      for(var i=0;i<arr.length;i++){
	      sum=sum+arr[i];
	    }	
      console.log(sum)
	document.getElementById("area").value=parseInt(sum,10)+'万平方公里';	  
     });
    </script>
  </body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/607430