三十四、openlayers官网示例Dynamic clusters解析——动态的聚合图层

官网demo地址：

https://openlayers.org/en/latest/examples/clusters-dynamic.html

这篇绘制了多个聚合图层。

先初始化地图 ，设置了地图视角的边界extent，限制了地图缩放的范围

 initMap() {
      const raster = new TileLayer({
        source: new XYZ({
          attributions:
            'Base map: <a target="_blank" href="https://basemap.at/">basemap.at</a>',
          url: "https://maps{1-4}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png",
        }),
      });

      this.map = new Map({
        layers: [raster],
        target: "map",
        view: new View({
          center: [0, 0],
          zoom: 2,
          maxZoom: 19,
          extent: [
            ...fromLonLat([16.1793, 48.1124]),
            ...fromLonLat([16.5559, 48.313]),
          ],
          showFullExtent: true,
        }),
      });
      this.map.on("pointermove", this.moveEvent);
      this.map.on("click", this.clickEvent);
    },

创建一个聚合数据源，数据是geoJson格式的。

    const vectorSource = new VectorSource({
        format: new GeoJSON(),
        url: "https://openlayers.org/en/latest/examples/data/geojson/photovoltaic.json",
      });

      const clusterSource = new Cluster({
        attributions:
          'Data: <a href="https://www.data.gv.at/auftritte/?organisation=stadt-wien">Stadt Wien</a>',
        distance: 35,
        source: vectorSource,
      });

 然后创建一个聚合图层

      //聚合图层
      this.clustersLayer = new VectorLayer({
        source: clusterSource,
        style: this.clusterStyle,
      });
      this.map.addLayer(this.clustersLayer);

因为每个feature的样式不一样，所以样式这里都绑定了函数。

这里的outerCircle定义为全局变量而并非局部变量，主要是因为clusterStyle函数是个高频触发函数，将outerCircle写成全局的可以不用new那么多次。使用样式组的方法绘制出来了外发光效果，其实就是画了两次圆形。

//黄色圆圈 内外两层 发光效果
    clusterStyle(feature) {
      const size = feature.get("features").length;
      //还有下级
      if (size > 1) {
        return [
          new Style({
            image: this.outerCircle,
          }),
          new Style({
            image: this.innerCircle,
            text: new Text({
              text: size.toString(),
              fill: this.textFill,
              stroke: this.textStroke,
            }),
          }),
        ];
      }
      //没有下级
      const originalFeature = feature.get("features")[0];
      return this.clusterMemberStyle(originalFeature);
    },

 this.textFill = new Fill({
        color: "#fff",
      });
      this.textStroke = new Stroke({
        color: "rgba(0, 0, 0, 0.6)",
        width: 3,
      });
      this.innerCircle = new CircleStyle({
        radius: 14,
        fill: new Fill({
          color: "rgba(255, 165, 0, 0.7)",
        }),
      });
      this.outerCircle = new CircleStyle({
        radius: 20,
        fill: new Fill({
          color: "rgba(255, 153, 102, 0.3)",
        }),
      });

有下级的时候图形是橙色发光的样式，没有下级的时候。根据feature的LEISTUNG字段显示为不同的icon图形。

clusterMemberStyle(clusterMember) {
      return new Style({
        geometry: clusterMember.getGeometry(),
        image:
          clusterMember.get("LEISTUNG") > 5 ? this.darkIcon : this.lightIcon,
      });
    },

 this.darkIcon = new Icon({
     src: "data/icons/emoticon-cool.svg",
 });
 this.lightIcon = new Icon({
     src: "data/icon