openlayers3之jsts空间分析完整例子
2019-09-30 本文已影响0人
我是兰小莫
接着上一篇，把上一篇相关的完整代码写出来。
<!DOCTYPE html>
<html>
<head>
<title>jsts sample</title>
<meta charset="utf-8">
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<script src="ol3/ol.js" type="text/javascript"></script>
<script src="ol3/proj4.js" type="text/javascript"></script>
<script src="ol3/jsts.js" type="text/javascript"></script>
</head>
<style>
.map{
height:600px;
}
</style>
<body>
<div id="map" class="map"></div>
<script>
var proj = new ol.proj.Projection({
code: 'EPSG:4326',
extent:[113.36672963700005,23.125302196000064, 113.36790226200003, 23.12607775300006],
units: 'degrees',
axisOrientation: 'neu'
});
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults({
attribution: false,
rotate: false,
zoom: false
}),
view: new ol.View({
projection:proj,
//projection:'EPSG:4326',
center: [113.36733018908569, 23.125607531477872],
zoom: 4
})
});
let parser = new jsts.io.OL3Parser();
parser.inject(ol.geom.Point, ol.geom.LineString, ol.geom.LinearRing, ol.geom.Polygon, ol.geom.MultiPoint, ol.geom.MultiLineString, ol.geom.MultiPolygon);
var wkt1="POINT (113.36733018908569 23.125607531477872)";
var wkt2="POINT (113.36734010607498 23.125616410488103)";
var format= new ol.format.WKT();
//设置符号样式
var style = {
point:new ol.style.Style({
image: new ol.style.Circle({
radius: 2 * 2,
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.8)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.8)',
width: 1 / 2
})
}),
zIndex: Infinity
}),
polygon:new ol.style.Style({
fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
color: 'rgba(200, 100, 250, 0.8)'
}),
stroke: new ol.style.Stroke({ //边界样式
color: '#234120',
width: 1
}),
}),
intersect:new ol.style.Style({
fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
color: 'rgba(255, 255, 0, 0.8)'
}),
stroke: new ol.style.Stroke({ //边界样式
color: '#234120',
width: 1
}),
}),
}
var feature1=format.readFeature(wkt1,{
dataProjection:'EPSG:4326',
featrueProjection:'EPSG:4326'
});
var feature2=format.readFeature(wkt2,{
dataProjection:'EPSG:4326',
featrueProjection:'EPSG:4326'
});
feature1.setStyle(style.point);
feature2.setStyle(style.point);
var geo1=feature1.getGeometry();
var geo2=feature2.getGeometry();
var jstsgeo1=parser.read(geo1);
var jstsgeo2=parser.read(geo2);
//缓冲区
var buffer1=jstsgeo1.buffer(0.00001);
var buffer2=jstsgeo2.buffer(0.00001);
//相交
//var intersects=buffer1.intersects(buffer2);
var intersects=buffer1.intersection(buffer2);
//console.log(intersects);
var fea=new ol.Feature();
//fea.setGeometry(parser.write(intersects.buffer(0.00001)))
fea.setGeometry(parser.write(intersects))
fea.setStyle(style.intersect);
console.log(fea);
//console.log(intersects.getCoordinates());
var fea1=new ol.Feature();
var fea2=new ol.Feature();
fea1.setGeometry(parser.write(buffer1));
fea2.setGeometry(parser.write(buffer2))
fea1.setStyle(style.polygon);
fea2.setStyle(style.polygon);
//console.log(feature);
var pt_vector=new ol.layer.Vector({
source:new ol.source.Vector({
features:[feature1,feature2]
})
});
var pg_vector=new ol.layer.Vector({
source:new ol.source.Vector({
features:[fea1,fea2]
})
});
var intersect_vector=new ol.layer.Vector({
source:new ol.source.Vector({
features:[fea]
})
});
map.addLayer(pg_vector);
map.addLayer(intersect_vector);
map.addLayer(pt_vector);
</script>
</body>
</html>
项目的源码，可以去GitHub上找到我的源代码。附上链接：https://github.com/mzlan/jsts/tree/master ，成果展示链接 https://mzlan.github.io/jsts/jsts.html。
