已被阅读 3225 次 | 文章分类:OpenLayers | 2021-06-30 20:21
turf.js是一个空间分析的gis库,封装了很多常用的空间分析算法,比如相交,缓冲,点在面内等等;在做gis开发的时候,gis渲染引擎结合该库非常方便,不需要自己动手做空间分析的相关计算;本文用openlayers结合turf.js做个简单的相交分析
1 具体思路
使用openlayers创建两个多边形,然后利用turf.js的turf.intersect方法做空间相交分析,得到两个多边形相交的几何部分,然后用openlayers绘制高亮凸显出来。
2 效果和代码如下
import * as ol from 'ol';
import * as layer from 'ol/layer';
import * as source from 'ol/source';
import * as style from 'ol/style';
import * as geom from 'ol/geom';
import 'ol/ol.css';
import turf from "turf";
var map = new ol.Map({
layers:[
new layer.Tile({
source:new source.OSM()
})
],
target: "map",
view: new ol.View({
center: [122.520217, 45.535693],
zoom: 9,
projection: "EPSG:4326"
})
});
// 创建source对象
var VectorSource = new source.Vector({
features: [] // 值是一个feature数组 source:features 1:N
});
// 创建layer对象
var VectorLayer = new layer.Vector({
source: VectorSource // layer-source 1:1
});
//将layer添加到map
map.addLayer(VectorLayer);
var pt1 = [
[
[122.801742, 45.48565],
[122.801742, 45.60491],
[122.584762, 45.60491],
[122.584762, 45.48565],
[122.801742, 45.48565]
]
];
var pt2 = [
[
[122.520217, 45.535693],
[122.64038, 45.553967],
[122.720031, 45.526554],
[122.669906, 45.507309],
[122.723464, 45.446643],
[122.532577, 45.408574],
[122.487258, 45.477466],
[122.520217, 45.535693]
]
];
var poly1 = turf.polygon(
[
pt1[0]
],
{
name: "大头1",
age: "280"
}
);
var poly2 = turf.polygon(
[
pt2[0]
],
{
name: "大头",
age: "28"
}
);
/**
* 创建两个多边形到地图
*/
function createPolygon(ptArr) {
var feature = new ol.Feature({
geometry: new geom.Polygon(ptArr)
});
VectorSource.addFeature(feature);
}
createPolygon(pt1);
createPolygon(pt2);
// 获取相交几何坐标
var intersection = turf.intersect(poly1, poly2);
var geometry1 = intersection.geometry.coordinates;
// 创建相交图层
var IntersectLayer = new layer.Vector({
source: new source.Vector({
features: [
new ol.Feature({
geometry: new geom.Polygon(geometry1)
})
]
})
});
// 定义相交样式
var IntersectStyle= new style.Style({
stroke: new style.Stroke({
color: "blue",
width: 3
}),
fill: new style.Fill({
color: "rgba(202, 12, 22, 0.5)"
})
});
IntersectLayer.setStyle(IntersectStyle);
// 添加相交图层到地图
map.addLayer(IntersectLayer);
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号