时间戳

首页 > 解决方案 > 以 WMS 为源的 OpenLayer 6.3.1 中的 MarkerClusters

javascript - 以 WMS 为源的 OpenLayer 6.3.1 中的 MarkerClusters

问题描述

我正在使用 OpenLayer 版本 6.3.1，并且想知道如何使用 WMS 数据源进行 MarkerClusters。

我的问题是我不知道如何将集群与 WMS 链接。WMS 源是一个 point.shp（几何）

我试图用 WMS 替换集群源，但它不起作用。

这是我的代码

var ImageWMS = new ImageWMS({  
  url: 'http://localhost:8080/geoserver/ACCESSOINSMADA/wms',  
     params: {'LAYERS': 'ACCESSOINSMADA:csb2-pub', 'TILED': true},
     serverType: 'geoserver',
     transition: 0,
   
});
var ImageLayers = new ImageLayer({
    source: ImageWMS,
})

var distance = document.getElementById('distance');

var count = 20000;
var features = new Array(count);
var e = 3500000;
for (var i = 0; i < count; ++i) {
  var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
  features[i] = new Feature(new Point(coordinates));
}

var source = new VectorSource({
  features: features,
});

var clusterSource = new Cluster({
  distance: parseInt(distance.value, 10),
  source: source,
});

var styleCache = {};
var clusters = new VectorLayer({
  source: clusterSource,
  style: function (feature) {
    var size = feature.get('features').length;
    var style = styleCache[size];
    if (!style) {
      style = new Style({
        image: new CircleStyle({
          radius: 10,
          stroke: new Stroke({
            color: '#fff',
          }),
          fill: new Fill({
            color: '#3399CC',
          }),
        }),
        text: new Text({
          text: size.toString(),
          fill: new Fill({
            color: '#fff',
          }),
        }),
      });
      styleCache[size] = style;
    }
    return style;
  },
});

标签： javascriptmarkerclustererwmsopenlayers-6

解决方案

WMS 输出（通常）是图像，因此您将无法更改数据并将其聚集在 OpenLayers 等客户端中；为此，您需要通过 WFS 获取数据。

作为客户端中群集点的替代方法，您可以配置 WMS 以提供群集点。

有关示例，请参见：

WMS 提供聚集点，在 OpenLayers 中显示

推荐阅读