OpenLayers 4.x风格的多边形取决于它上面的功能数量

Question

我是OpenLayers的新手，我需要制作一个地图，显示某个区域是否有很多客户端。。

我有带多边形的矢量层(regions.geojson(和带特征点的矢量层。我想改变多边形的样式，如果这个多边形上有少于50个点(客户端(->黄色，如果在50-100个橙色之间。。。等等。。。

这可能吗？为什么不做？

Answer 1

这是可能的，您可以通过两个步骤来完成。

步骤1(计算每个多边形中的点数

一个选项只使用OpenLayers，

// get the features
const polys = polysSource.getFeatures();
const points = pointsSource.getFeatures();
// for each polygon
for (let i = 0; i < polys.length; i++) {
let count = 0;
// for each point
for (let j = 0; j < points.length; j++) {
// check if the point intersects the polygon
// be careful 'intersectsCoordinate' return false if it is on the boundary
if (polys[i].getGeometry().intersectsCoordinate(points[j].getGeometry().getCoordinates())) {
count++;
}
}
// get the color
let color = null;
if (count < 50) {
color = 'yellow';
} else if (count < 100) {
color = 'orange';
} else {
color = 'green';
}
// set the color
polys[i].set('color', color);
}

评论：如果你的数据是静态的(我的意思是它不会改变，或者你不使用任何用户输入(，我认为最好在QGIS这样的桌面GIS上准备层。或者，如果你的数据在PostGIS这样的数据库上，我认为最好构建一个查询。只使用OpenLayers可能会有一些限制，比如我提到的intersectsCordinate函数(http://openlayers.org/en/latest/apidoc/module-ol_geom_Geometry-Geometry.html#intersectsCoordinate)。如果你需要做更复杂的空间分析，你可能需要一个额外的库的帮助，例如turf.js(http://turfjs.org)。

步骤2(设置图层的样式

// the polygon style
const getStyle = function (f, r) {
const c = f.get('color') || 'rgba(0,0,0,0)';
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0,0,0,1)',
width: 1
}),
fill: new ol.style.Fill({
color: c
})
});
};
// the layer style
const layer = new ol.layer.Vector({
visible: false,
opacity: 0.5,
source: polysSource,
style: getStyle
});

希望能有所帮助。