Openlayer实现聚类

小咪咪 2022-09-04 11:53 261阅读 0赞

# 基本用法 #

效果图：

![20210813170726180.gif][]

实现代码：

<template>
      <div id="map" style="width: 100vw; height: 100vh"></div>
    </template>
    <script>
    import "ol/ol.css";
    import TileLayer from "ol/layer/Tile";
    import VectorLayer from "ol/layer/Vector";
    
    import VectorSource from "ol/source/Vector";
    import OSM from "ol/source/OSM";
    
    import { Map, View } from "ol";
    import { Style, Stroke, Fill, Icon, Text, Circle } from "ol/style";
    import { Cluster } from "ol/source";
    import GeoJSON from "ol/format/GeoJSON";
    
    export default {
      data() {
        return {
          map: {},
          clusterLayer: {},
          geojsonData: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {
                  name: "成都市",
                  value: 85,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.061902, 30.609503],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "广安市",
                  value: 50,
                },
                geometry: {
                  type: "Point",
                  coordinates: [106.619126, 30.474142],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "绵阳市",
                  value: 36,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.673612, 31.492565],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "雅安市",
                  value: 555,
                },
                geometry: {
                  type: "Point",
                  coordinates: [103.031653, 30.018895],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "自贡市",
                  value: 55,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.797794, 29.368322],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "宜宾市",
                  value: 666,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.610964, 28.781347],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "内江市",
                  value: 777,
                },
                geometry: {
                  type: "Point",
                  coordinates: [105.064555, 29.581632],
                },
              },
            ],
          },
        };
      },
      mounted() {
        this.initMap();
        this.pointerMove();
        this.addCluster();
      },
      methods: {
        initMap() {
          this.map = new Map({
            target: "map",
    
            layers: [
              new TileLayer({
                source: new OSM(),
              }),
            ],
            view: new View({
              center: [104.065735, 30.659462],
              projection: "EPSG:4326",
              zoom: 4.5,
            }),
          });
        },
        pointerMove() {
          this.map.on("pointermove", (e) => {
            const isHover = this.map.hasFeatureAtPixel(e.pixel);
            this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
          });
        },
        addCluster() {
          this.clusterLayer = new VectorLayer({
            source: new Cluster({
              distance: parseInt(20, 10),
              source: new VectorSource({
                features: new GeoJSON().readFeatures(this.geojsonData),
              }),
            }),
            style: (feature) => {
              let total = 0;
              feature.get("features").forEach((value) => {
                total += value.getProperties().value;
              });
              let style = new Style({
                image: new Circle({
                  radius: 15,
                  stroke: new Stroke({
                    color: "blue",
                  }),
                  fill: new Fill({
                    color: "rgba(124,144,255,100)",
                  }),
                }),
                text: new Text({
                  text: `${total} 个`,
                  fill: new Fill({
                    color: "white",
                  }),
                  font: "12px Calibri,sans-serif",
                  stroke: new Stroke({
                    color: "black",
                    width: 2,
                  }),
                }),
              });
              return style;
            },
          });
          this.map.addLayer(this.clusterLayer);
        },
      },
    };
    </script>

# 根据不同的数值，聚合标注显示不同的颜色 #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_15_color_FFFFFF_t_70_g_se_x_16][]

<template>
      <div id="map" style="width: 1800px; height: 900px"></div>
    </template>
    <script>
    import "ol/ol.css";
    import TileLayer from "ol/layer/Tile";
    import VectorLayer from "ol/layer/Vector";
    
    import VectorSource from "ol/source/Vector";
    import OSM from "ol/source/OSM";
    
    import { Map, View } from "ol";
    import { Style, Stroke, Fill, Icon, Text, Circle } from "ol/style";
    import { defaults as defaultControls } from "ol/control";
    import { Cluster } from "ol/source";
    import GeoJSON from "ol/format/GeoJSON";
    
    export default {
      data() {
        return {
          map: {},
          geojsonData: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {
                  name: "成都市",
                  value: 85,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.061902, 30.609503],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "广安市",
                  value: 50,
                },
                geometry: {
                  type: "Point",
                  coordinates: [106.619126, 30.474142],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "绵阳市",
                  value: 236,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.673612, 31.492565],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "雅安市",
                  value: 555,
                },
                geometry: {
                  type: "Point",
                  coordinates: [103.031653, 30.018895],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "自贡市",
                  value: 155,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.797794, 29.368322],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "宜宾市",
                  value: 666,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.610964, 28.781347],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "内江市",
                  value: 777,
                },
                geometry: {
                  type: "Point",
                  coordinates: [105.064555, 29.581632],
                },
              },
            ],
          },
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        getColor(value) {
          if (value < 100) return "blue";
          else if (value >= 100 && value < 700) return "yellow";
          else return "red";
        },
        initMap() {
          this.map = new Map({
            target: "map",
    
            layers: [
              new TileLayer({
                source: new OSM(),
              }),
              new VectorLayer({
                source: new Cluster({
                  distance: parseInt(20, 10),
                  source: new VectorSource({
                    features: new GeoJSON().readFeatures(this.geojsonData),
                  }),
                }),
                style: (feature) => {
                  let total = 0;
                  feature.get("features").forEach((value) => {
                    total += value.getProperties().value;
                  });
                  let style = new Style({
                    image: new Circle({
                      radius: 15,
                      stroke: new Stroke({
                        // color: "blue",
                        color: this.getColor(total),
                      }),
                      fill: new Fill({
                        // color: "rgba(124,144,255,100)",
                        color: this.getColor(total),
                      }),
                    }),
                    text: new Text({
                      text: `${total} 个`,
                      fill: new Fill({
                        color: "white",
                      }),
                      font: "12px Calibri,sans-serif",
                      stroke: new Stroke({
                        color: "black",
                        width: 2,
                      }),
                    }),
                  });
                  return style;
                },
              }),
            ],
            view: new View({
              center: [104.065735, 30.659462],
              projection: "EPSG:4326",
              zoom: 4.5,
            }),
            controls: defaultControls({
              zoom: true,
            }).extend([]),
          });
        },
      },
    };
    </script>

# 动态添加移除聚合图层 #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_15_color_FFFFFF_t_70_g_se_x_16 1][]

<template>
      <div>
        <div id="map" style="width: 100vw; height: 100vh"></div>
        <div style="position: fixed; top: 200px; left: 100px">
          <el-button @click="addClusterLayer()">添加聚类图层</el-button>
          <el-button @click="removeClusterLayer()">移除聚类图层</el-button>
        </div>
      </div>
    </template>
    <script>
    import "ol/ol.css";
    import TileLayer from "ol/layer/Tile";
    import VectorLayer from "ol/layer/Vector";
    
    import VectorSource from "ol/source/Vector";
    import OSM from "ol/source/OSM";
    
    import { Map, View } from "ol";
    import { Style, Stroke, Fill, Icon, Text, Circle } from "ol/style";
    import { Cluster } from "ol/source";
    import GeoJSON from "ol/format/GeoJSON";
    
    export default {
      data() {
        return {
          map: {},
          clusterLayer: {},
          geojsonData: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {
                  name: "成都市",
                  value: 85,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.061902, 30.609503],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "广安市",
                  value: 50,
                },
                geometry: {
                  type: "Point",
                  coordinates: [106.619126, 30.474142],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "绵阳市",
                  value: 36,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.673612, 31.492565],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "雅安市",
                  value: 555,
                },
                geometry: {
                  type: "Point",
                  coordinates: [103.031653, 30.018895],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "自贡市",
                  value: 55,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.797794, 29.368322],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "宜宾市",
                  value: 666,
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.610964, 28.781347],
                },
              },
              {
                type: "Feature",
                properties: {
                  name: "内江市",
                  value: 777,
                },
                geometry: {
                  type: "Point",
                  coordinates: [105.064555, 29.581632],
                },
              },
            ],
          },
        };
      },
      mounted() {
        this.initMap();
        this.pointerMove();
      },
      methods: {
        initMap() {
          this.map = new Map({
            target: "map",
    
            layers: [
              new TileLayer({
                source: new OSM(),
              }),
            ],
            view: new View({
              center: [104.065735, 30.659462],
              projection: "EPSG:4326",
              zoom: 4.5,
            }),
          });
        },
        pointerMove() {
          this.map.on("pointermove", (e) => {
            const isHover = this.map.hasFeatureAtPixel(e.pixel);
            this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
          });
        },
        addClusterLayer() {
          //防止重复添加聚类图层
          if (Object.keys(this.clusterLayer).length !== 0) return;
    
          // 添加聚类图层
          this.clusterLayer = new VectorLayer({
            source: new Cluster({
              distance: parseInt(20, 10),
              source: new VectorSource({
                features: new GeoJSON().readFeatures(this.geojsonData),
              }),
            }),
            style: (feature) => {
              let total = 0;
              feature.get("features").forEach((value) => {
                total += value.getProperties().value;
              });
              let style = new Style({
                image: new Circle({
                  radius: 15,
                  stroke: new Stroke({
                    color: "blue",
                  }),
                  fill: new Fill({
                    color: "rgba(124,144,255,100)",
                  }),
                }),
                text: new Text({
                  text: `${total} 个`,
                  fill: new Fill({
                    color: "white",
                  }),
                  font: "12px Calibri,sans-serif",
                  stroke: new Stroke({
                    color: "black",
                    width: 2,
                  }),
                }),
              });
              return style;
            },
          });
          this.map.addLayer(this.clusterLayer);
        },
        removeClusterLayer() {
          // 防止移除空图层报错
          if (Object.keys(this.clusterLayer).length == 0) return;
    
          this.clusterLayer.getSource().clear();
          this.map.removeLayer(this.clusterLayer);
    
          this.clusterLayer = {}; //一定要设为{}空对象
        },
      },
    };
    </script>

[20210813170726180.gif]: /images/20220829/57067e55b4d2465aba2eee3804e3f829.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a4c89dcfd4694b1c90a0f6bc70774fab.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_15_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/814cbf869d204ff99f423fa5eb56d585.png