vue openlayers【五】Feature类实现批量标注点位上图功能

1 效果图

​

2. 实现批量标注点位操作代码（核心请看 addPoints 方法和 getIcon方法）

addPoints 方法
① 创建一个图层
② 图层添加到map地图
③ 循环（点经纬度）数组
④ 创建feature对象，最后添加到图层。

/**
 * 批量根据经纬度坐标打点
 */
addPoints(coordinates) {
    // 设置图层
    this.flagLayer = new VectorLayer({
        source: new VectorSource()
    });
    // 添加图层
    this.map.addLayer(this.flagLayer);
    // 循环添加feature
    for (let i = 0; i < coordinates.length; i++) {
        // 创建feature，一个feature就是一个点坐标信息
        let feature = new Feature({
            geometry: new Point([coordinates[i].x, coordinates[i].y])
        });
        feature.setStyle(this.getIcon(coordinates[i].type));
        this.featuresArr.push(feature);
    } // for 结束
    // 批量添加feature
    this.flagLayer.getSource().addFeatures(this.featuresArr);
},

getIcon 方法
① 根据传参类型判断 设置图标样式

getIcon(type) {
    let src = "";
    type == "bule"
        ? (src = require("../../assets/images/img-bule.png"))
        : (src = require("../../assets/images/img-lv.png"));
    var styleIcon = new Style({
        // 设置图片效果
        image: new Icon({
            src: src,
            anchor: [1, 1]
        })
    });
    return styleIcon;
},

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 } from "ol/style";
import { Point, Polygon } from "ol/geom";
import { defaults as defaultControls, OverviewMap } from "ol/control";
import { fromLonLat } from "ol/proj";

// 边界json数据
import areaGeo from "@/geoJson/province.json";
export default {
    data() {
        return {
            map: null,
            featuresArr: []
        };
    },
    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({
                    projection: "EPSG:4326",
                    // center: fromLonLat([104.065735, 30.659462]),
                    center: [104.065735, 30.659462],
                    zoom: 7,
                    maxZoom: 19,
                    minZoom: 5
                })
            });
        },
        /**
         * 省描边代码
         */
        addArea(geo = []) {
            if (geo.length == 0) {
                return false;
            }
            let features = [];
            geo.forEach(g => {
                let lineData = g.features[0];
                let routeFeature = "";
                if (lineData.geometry.type == "MultiPolygon") {
                    routeFeature = new Feature({
                        geometry: new MultiPolygon(
                            lineData.geometry.coordinates
                        )
                    });
                } else if (lineData.geometry.type == "Polygon") {
                    routeFeature = new Feature({
                        geometry: new Polygon(lineData.geometry.coordinates)
                    });
                }
                routeFeature.setStyle(
                    new Style({
                        fill: new Fill({
                            color: "#4e98f444"
                        }),
                        stroke: new Stroke({
                            width: 3,
                            color: [71, 137, 227, 1]
                        })
                    })
                );
                features.push(routeFeature);
            });
            let routeLayer = new VectorLayer({
                source: new VectorSource({
                    features: features
                })
            });
            this.map.addLayer(routeLayer);
        },
        /**
         * 批量根据经纬度坐标打点
         */
        addPoints(coordinates) {
            // 设置图层
            this.flagLayer = new VectorLayer({
                source: new VectorSource()
            });
            // 添加图层
            this.map.addLayer(this.flagLayer);
            // 循环添加feature
            for (let i = 0; i < coordinates.length; i++) {
                // 创建feature，一个feature就是一个点坐标信息
                let feature = new Feature({
                    geometry: new Point([coordinates[i].x, coordinates[i].y])
                });
                feature.setStyle(this.getIcon(coordinates[i].type));
                this.featuresArr.push(feature);
            } // for 结束
            // 批量添加feature
            this.flagLayer.getSource().addFeatures(this.featuresArr);
        },
        getIcon(type) {
            let src = "";
            type == "bule"
                ? (src = require("../../assets/images/img-bule.png"))
                : (src = require("../../assets/images/img-lv.png"));
            var styleIcon = new Style({
                // 设置图片效果
                image: new Icon({
                    src: src,
                    anchor: [1, 1]
                })
            });
            return styleIcon;
        },
        /**
         * 鼠标悬浮改变图标样式
         */
        pointerMove() {
            let _that = this;
            this.map.on("pointermove", function(evt) {
                _that.map.getTargetElement().style.cursor = _that.map.hasFeatureAtPixel(
                    evt.pixel
                )
                    ? "pointer"
                    : "";
            });
        }
    },
    mounted() {
        this.initMap();
        this.addArea(areaGeo);
        this.pointerMove();
        // 模拟点数据
        let coordinates = [
            { x: "103.165034", y: "31.881932", type: "lv" },
            { x: "106.918082", y: "31.441314", type: "lv" },
            { x: "102.741896", y: "30.839974", type: "bule" }
        ];
        this.addPoints(coordinates);
    }
};
</script>
<style lang="scss" scoped>
// 此处非核心，已经删除
</style>