openlayers 加载geoserver （多个、单个）WFS服务并鼠标移入高亮

 

一、单个加载

1、加载单个WFS服务（可重复调用）；

2、鼠标移入显示高亮；

3、鼠标点击展示当前点击信息弹窗；

4、可通过 vm.pipeLayer[type].setVisible(true/false)决定是否展示改图层；

<template>
    <div id="mapDiv" v-loading="loading">
        <div id="popupPipe" class="popup-box">
            <div class="pipe-arrow"></div>
            <div class="pipe-info">
                <p>id:{
  
  {popupPipeList.Id}}</p>
                <p>名称:{
  
  {popupPipeList.Layer}}</p>
                <p>编号:{
  
  {popupPipeList.id}}</p>
            </div>
        </div>
    </div>
</template>
<script>
    import 'ol/ol.css';
    import Map from "ol/Map";
    import View from "ol/View";
    import {GeoJSON} from 'ol/format';
    import {defaults} from 'ol/control.js';
    import {Circle, Fill, Stroke, Style} from 'ol/style';
    import {Vector} from "ol/layer";
    import SourceVector from 'ol/source/Vector';
    import {bbox as bboxStrategy} from 'ol/loadingstrategy';
    export default {
        name: 'TdMap',
        components: {},
        props:{},
        data(){
            return{
                map: null,
                highlight:null,//高亮
                popupPipe:null,//信息弹窗
                popupPipeList:{},//信息
                pipeLayer:{},//管网图层
                townColor:{
                    'line1': {color:"rgba(0,122,34,1)",width:4 }, //线1
                    'line2': {color:"rgba(255,0,0,1)",width:3 }, //线2
                    'point': {color:"rgba(0,197,255,1)",width:5 }, //点
                },
            }
        },
        created(){
            this.$nextTick(() => {
                this.iniMap();
            })
        },
        mounted(){},
        methods:{
            /**
             * 初始化地图
             */
            iniMap() {
                let vm = this;
                vm.popupPipe = vm.addOverlay('popupPipe',[35,-85]);
                vm.map = new Map({
                    layers: [],
                    overlays: [
                        vm.popupPipe
                    ],
                    target: document.getElementById('mapDiv'),
                    controls: defaults({
                        zoom:false
                    }),
                    view: new View({
                        center: [106.9556, 37.62666],
                        zoom: 10,
                        projection: "EPSG:4326",
                        maxZoom: 18,
                    }),
                });
                vm.addPipe('line1');//加载WFS
                vm.addPipe('line2');//加载WFS
                vm.addPipe('point');//加载WFS
                //高亮风格的图层：
                let featureOverlay = new Vector({
                    source: new SourceVector(),
                    style: new Style()
                });
                vm.map.addLayer(featureOverlay);
                vm.map.on('click', function(evt) {
                    let pixel = vm.map.getEventPixel(evt.originalEvent);
                    let feature = vm.map.forEachFeatureAtPixel(pixel, function (feature) {
                        return feature;
                    });
                    if (feature) {
                        let id = String(feature.getId()).split('.')[0];
                        if(
                            id && (
                                id === 'line1' ||
                                id === 'line2' ||
                                id === 'point'
                            )
                        ){
                            vm.displayFeatureInfo(feature,evt.coordinate);
                        }
                    }else{
                        vm.removeMapPopup();
                    }
                });
                /*鼠标划过地图*/
                vm.map.on('pointermove',function(e) {
                    let pixel = vm.map.getE