I have drawn a polygon feature on the WMS base layer, then when I try to intersect the drawn feature and base layer I am unable to find the intersection, but when I have used a GeoJSON layer instead of the WMS layer it intersects the polygon feature.
Reference code
<!DOCTYPE html>
<html>
<head>
<title>Select features example</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol-debug.js"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/javascript.util.min.js"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/jsts.min.js"></script>
<style>
html, body {
padding: 0;
margin: 0;
}
html, body, .map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
</div>
</div>
<script>
var swissProjection = new ol.proj.Projection({
code: 'EPSG:21781',
extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
units: 'm'
});
ol.proj.addProjection(swissProjection);
var geojsonFormat = new ol.format.GeoJSON();
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.3)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 120, 0, 0.6)',
width: 1
})
});
var styles = [style];
var highlightStyle = [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 120, 0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 120, 0, 0.6)',
width: 1
})
})
];
var vector2 = new ol.layer.Vector({
maxResolution: 0.8,
source: new ol.source.Vector({
url: 'map.geojson',
format: new ol.format.GeoJSON({
defaultDataProjection:'EPSG:4326'
})
}),
style: styles
});
var layer1 = new ol.layer.Tile({
title: 'India',
source: new ol.source.TileWMS({
url: 'http://ndem.nrsc.gov.in/geoserver/ndem50k/wms',
params: {LAYERS: 'ndem50k:stateadmin50census2011'}
}),
transparent: false
});
var dist = new ol.layer.Tile({
title: 'flood',
source: new ol.source.TileWMS({
url: 'http://ndem.nrsc.gov.in/geoserver/ndem50d/wms',
//http://172.31.4.37/geoserver/ndem50k/wms
params: {LAYERS: 'ndem50d:apflood50dsc04122015'}
//ndem50k:apdistrictadmin50census2011
})
});
var distaluk = new ol.layer.Tile({
title: 'taluk',
source: new ol.source.TileWMS({
url: 'http://ndem.nrsc.gov.in/geoserver/ndem50k/wms',
//http://172.31.4.37/geoserver/ndem50k/wms
params: {LAYERS: 'ndem50k:aptaluk50soi2001'}
//ndem50k:apdistrictadmin50census2011
})
});
var intersectionLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var map = new ol.Map({
layers: [dist,layer1,vector2,intersectionLayer,distaluk],
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [79.419,15.428],
zoom: 8
})
});
var draw = new ol.interaction.Draw({
type: 'Polygon'
});
map.addInteraction(draw);
draw.on('drawstart', function(evt) {
alert();
intersectionLayer.getSource().clear();
});
var olParser = new jsts.io.olParser();
var geojsonParser = new jsts.io.GeoJSONParser();
draw.on('drawend', function(evt) {
var poly1 = olParser.read(evt.feature.getGeometry());
alert(poly1);
var extent1 = evt.feature.getGeometry().getExtent();
//alert(extent1);
var source = vector2.getSource();
//var source = distaluk.getSource();
var features = source.getFeatures();
var start = Date.now();
//alert(start);
features.forEach(function(feature) {
alert("1");
if (!ol.extent.intersects(extent1, feature.getGeometry().getExtent())) {
alert();
return;
}
var poly2 = olParser.read(feature.getGeometry());
alert(poly2);
var intersection = poly1.intersection(poly2);
intersection = geojsonParser.write(intersection);
alert(intersection);
alert(intersection);
if(intersection.type === 'GeometryCollection' && intersection.geometries.length === 0) {
return;
} else {
intersectionLayer.getSource().addFeature(geojsonFormat.readFeature({
type: 'Feature',
properties: {},
geometry: intersection
}));
}
});
var end = Date.now();
//alert(end);
console.log (end - start);
});
</script>
</body>
</html>
Main intention is to perform intersection of layer without using database support.
