OpenLayers 4.x 样式的多边形取决于其上的要素数量..？

Question

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

我有带多边形的矢量图层 (regions.geojson) 和带特征点的矢量图层 (clients.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 可能会有一些限制，例如我提到的关于 intersectsCoordinate 函数的限制 (http://openlayers.org/en/latest/apidoc/module-ol_geom_Geometry-Geometry.html#intersectsCoordinate). If you need to do more complex spatial analysis you may need some help of an extra library for example 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
});

希望对您有所帮助。

OpenLayers 4.x 样式的多边形取决于其上的要素数量..？

OpenLayers 4.x style polygon depend on amount of features on it..?

styling

openlayers