openlayers5.3.0实现根据选择的图形来统计图形总面积
<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>
转载自：https://blog.csdn.net/xlp789/article/details/84260048
