openlayers操作分享：如何从容的在vue中食用openlayers6

这篇文章，分享下我对openlayers的一些经验和理解，会夹杂大量搜索出来得文档，是我正式使用时可以实现的，废话不多说，我们从下载开始一，openlayers安装且初始化地图创建vue项目就省略了，OpenLayers通过NPM 安装npm install ol -SVue页面　　OpenLayers 加载地图可以加载离线地图，也可以下载离线瓦片地图加载，地图相关配置，我放在...

1. ol.source.Cluster 参数

使用聚合效果就其实就是使用了这个方法，下面是他的两个主要的参数说明

 let clusterSource = ol.source.Cluster({
    distance: parseInt(20, 10), // 标注元素之间的间距，单位是像素。
    source: source,//数据源
});

2. Cluster类实现聚合分散详解

2.1 我们先看下mounted方法：初始化一些数据
准备聚合的城市经纬度数据clusterData，和城市聚合值的数据points ，然后调用下实现聚合的方法
this.addCluster()

mounted() {
    let clusterData = {
        成都市: { center: { lng: 104.061902, lat: 30.609503 } },
        广安市: { center: { lng: 106.619126, lat: 30.474142 } },
        绵阳市: { center: { lng: 104.673612, lat: 31.492565 } },
        雅安市: { center: { lng: 103.031653, lat: 30.018895 } },
        自贡市: { center: { lng: 104.797794, lat: 29.368322 } },
        宜宾市: { center: { lng: 104.610964, lat: 28.781347 } },
        内江市: { center: { lng: 105.064555, lat: 29.581632 } }
    };
    let points = [
        { name: "成都市", value: 85 },
        { name: "绵阳市", value: 36 },
        { name: "广安市", value: 50 },
        { name: "雅安市", value: 555 },
        { name: "自贡市", value: 55 },
        { name: "宜宾市", value: 666 },
        { name: "内江市", value: 777 }
    ];
    // 实现聚合分散方法
    this.addCluster(clusterData, points, true);
}

2.2 addCluster() 方法详解

聚合标注的矢量图层的数据源 source 不在单单是 new VectorSource() 而是需要在包裹一层，那就是在 new Cluster 聚合方法中的 source 添加矢量图层的数据 new VectorSource()

继续我们创建一个矢量图层 VectorLayer 里面有两个参数需要设置，一个是 source数据源，一个是 style 样式，先看设置source 是clusterSource。也就是，需要配置两个参数第一个标注元素之间的间距；第二个是数据源，这里是数据源就说我们实例的矢量图层的数据源new VectorSource()，这里暂时设置为空，后面动态添加即可。

let source = new VectorSource();
let clusterSource = new Cluster({
    distance: parseInt(20, 10),
    source: source
});
let layer = new VectorLayer({
    source: clusterSource,
    style: this.clusterStyle.call(this)
});

把标注的图层添加到地图中去
我们根据初始化的数据去遍历匹配。clusterData 中的城市名和points城市名一致的时候。创建点要素new Feature 信息，可以通过 feature.set(key，value) 的形式动态设置值在要素信息中。
把要素信息添加到矢量图层 source 中。

2.3 addCluster() 方法完整代码

// 设置聚合分散效果
addCluster(clusterData, points, clearup) {
    let source = new VectorSource();
    let clusterSource = new Cluster({
        distance: parseInt(20, 10),
        source: source
    });
    let layer = new VectorLayer({
        source: clusterSource,
        style: this.clusterStyle.call(this)
    });
    this.map.addLayer(layer);
    for (const key in clusterData) {
        points.forEach(e => {
            if (e.name == key) {
                let point = fromLonLat([
                    clusterData[key].center.lng,
                    clusterData[key].center.lat
                ]);
                var f = new Feature({
                    geometry: new Point(point)
                });
                f.set("name", e.name);
                f.set("value", e.value);
                source.addFeature(f);
            }
        });
    }
},

2.4 clusterStyle () 矢量图层样式方法详解

total ：通过不断监听获取前面 set 的值，进行累加计算。设置到Text中。
回到这个案例中，下面我们可以看下，滚动下地图，可以看到，会监听要素的feature的变化。相当于vue的watch一样效果，这也是动态样式的应用场景之一。通过不断监听去触发new Cluster() 方法里面的distances 的属性，进行不断监听，判断 distances 的分辨率(像素)如果匹配设置的值，达到放到缩小实现聚合分散的效果的同时，不断重新计算total值，并设置到text中。

clusterStyle() {
	return (feature, solution) => {
	    console.log(feature);
	    // .... 省略
	})
}

在这里插入图片描述

2.5 clusterStyle () 方法完整代码

// 设置聚合分散的图标样式
clusterStyle() {
    return (feature, solution) => {
        var total = 0;
        feature.get("features").forEach((value, index) => {
        	// 通过value.get("属性名") 获取设置的值
            total += value.get("value"); // 获取累加的数值
        });
        var style = new Style({
            image: new CircleStyle({
                radius: 15, //设置圆角大小
                stroke: new Stroke({
                    color: "blue" //设置园stroke颜色
                }),
                fill: new Fill({
                    color: "rgba(24,144,255,100)" //设置填充颜色
                })
            }),
            text: new Text({
                text: total.toString(), // 文字显示的数值
                fill: new Fill({
                    color: "#FFF" // 文字显示的颜色
                })
            })
        });
        return style;
    };
},

3. 完整代码

<template>
    <div id="app">
        <div id="Map" ref="map"></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 XYZ from "ol/source/XYZ";
import { Map, View, Feature, ol } from "ol";
import {
    Style,
    Stroke,
    Fill,
    Icon,
    Text,
    Circle as CircleStyle
} from "ol/style";
import { Polygon, Point } from "ol/geom";
import { defaults as defaultControls } from "ol/control";
import { Cluster } from "ol/source";
import { fromLonLat } from "ol/proj";

import areaGeo from "@/geoJson/sichuan.json";
export default {
    data() {
        return {
            map: null,
            areaLayer: null
        };
    },
    methods: {
        /**
         * 初始化地图
         */
        initMap() {
            this.map = new Map({
                target: "Map",
                controls: defaultControls({
                    zoom: true
                }).extend([]),
                layers: [
                    new TileLayer({
                        source: new XYZ({
                            url:
                                "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
                        })
                    })
                ],
                view: new View({
                    center: fromLonLat([104.065735, 30.659462]),
                    zoom: 6.5,
                    maxZoom: 19,
                    minZoom: 3
                })
            });
        },
        /**
         * 设置区域
         */
        addArea(geo = []) {
            if (geo.length == 0) return false;
            let areaFeature = null;
            // 设置图层
            this.areaLayer = new VectorLayer({
                source: new VectorSource({
                    features: []
                })
            });
            // 添加图层
            this.map.addLayer(this.areaLayer);
            geo.forEach(g => {
                let lineData = g.features[0];
                if (lineData.geometry.type == "MultiPolygon") {
                    areaFeature = new Feature({
                        geometry: new MultiPolygon(
                            lineData.geometry.coordinates
                        ).transform("EPSG:4326", "EPSG:3857")
                    });
                } else if (lineData.geometry.type == "Polygon") {
                    areaFeature = new Feature({
                        geometry: new Polygon(
                            lineData.geometry.coordinates
                        ).transform("EPSG:4326", "EPSG:3857")
                    });
                }
            });
            areaFeature.setStyle(
                new Style({
                    fill: new Fill({ color: "#4e98f444" }),
                    stroke: new Stroke({
                        width: 3,
                        color: [71, 137, 227, 1]
                    })
                })
            );
            this.areaLayer.getSource().addFeatures([areaFeature]);
        },
        addCluster(clusterData, points, clearup) {
            let source = new VectorSource();
            let clusterSource = new Cluster({
                distance: parseInt(20, 10),
                source: source
            });
            let layer = new VectorLayer({
                source: clusterSource,
                style: this.clusterStyle.call(this)
            });
            this.map.addLayer(layer);
            for (const key in clusterData) {
                points.forEach(e => {
                    if (e.name == key) {
                        let point = fromLonLat([
                            clusterData[key].center.lng,
                            clusterData[key].center.lat
                        ]);
                        var f = new Feature({
                            geometry: new Point(point)
                        });
                        f.set("name", e.name);
                        f.set("value", e.value);
                        source.addFeature(f);
                    }
                });
            }
        },
        clusterStyle() {
            return (feature, solution) => {
                var total = 0;
                feature.get("features").forEach((value, index) => {
                    total += value.get("value");
                });
                var style = new Style({
                    image: new CircleStyle({
                        radius: 15,
                        stroke: new Stroke({
                            color: "blue"
                        }),
                        fill: new Fill({
                            color: "rgba(24,144,255,100)"
                        })
                    }),
                    text: new Text({
                        text: total.toString(),
                        fill: new Fill({
                            color: "#FFF"
                        }),
                        font: "12px Calibri,sans-serif",
                        stroke: new Stroke({
                            color: "red",
                            width: 5
                        })
                    })
                });
                return style;
            };
        }
    },
    mounted() {
        this.initMap();
        let clusterData = {
            成都市: { center: { lng: 104.061902, lat: 30.609503 } },
            广安市: { center: { lng: 106.619126, lat: 30.474142 } },
            绵阳市: { center: { lng: 104.673612, lat: 31.492565 } },
            雅安市: { center: { lng: 103.031653, lat: 30.018895 } },
            自贡市: { center: { lng: 104.797794, lat: 29.368322 } },
            宜宾市: { center: { lng: 104.610964, lat: 28.781347 } },
            内江市: { center: { lng: 105.064555, lat: 29.581632 } }
        };
        let points = [
            { name: "成都市", value: 85 },
            { name: "绵阳市", value: 36 },
            { name: "广安市", value: 50 },
            { name: "雅安市", value: 555 },
            { name: "自贡市", value: 55 },
            { name: "宜宾市", value: 666 },
            { name: "内江市", value: 777 }
        ];
        this.addCluster(clusterData, points, true);
    }
};
</script>
<style lang="scss" scoped>
// 此处非核心，已经删除
</style>

八，openlayers 聚合标点点击事件

这个事件的研究不多做解说原理，直接上我的实战代码

mapClick (e:any) {
    const feature = this.map.forEachFeatureAtPixel(e.pixel,
      (feature: any) => {
        if (feature.data) {
          this.featureClick(feature.data)
        } else {
          if (feature.getProperties().features) { // 聚合情况下
            if (feature.getProperties().features.length === 1) {
              console.log(feature.getProperties().features[0])
            }
          }
        }
      })
    if (feature) { // 这里说明我们点击的是点标记，
      const lnglat = feature.get('lnglat')// 我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
      if (lnglat) {
        // 含有lnglat 参数的点标记触发事件
      }
    }
  }

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^