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

最新推荐文章于 2024-05-29 18:04:39 发布
最新推荐文章于 2024-05-29 18:04:39 发布
阅读量1.3k 收藏 8
点赞数 1
分类专栏： openlayers geoserver WFS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niexier/article/details/106693640
版权
openlayers 同时被 3 个专栏收录
2 篇文章 1 订阅
订阅专栏
geoserver
2 篇文章 1 订阅
订阅专栏
WFS
1 篇文章 0 订阅
订阅专栏

 

一、单个加载

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.getEventPixel(e.originalEvent);
                    let feature = vm.map.forEachFeatureAtPixel(pixel,function (feature) {
                        return feature;
                    });
                    /*管网高亮删除*/
                    if(vm.highlight){
                        let Type = String(vm.highlight.getId()).split('.')[0];
                        Type &&
                        Type !== 'undefined' &&
                        vm.townColor[Type] &&
                        vm.setPipeStyle(vm.highlight,Type,vm.townColor[Type].color,vm.townColor[Type].width);
                    }
                    if (feature) {
                        vm.map.getTargetElement().style.cursor="pointer";
                        /*管网高亮展示*/
                        vm.highlight = feature;
                        let Type = String(feature.getId()).split('.')[0];
                        Type &&
                        Type !== 'undefined' &&
                        vm.townColor[Type] &&
                        vm.setPipeStyle(feature,Type,'rgba(178,255,137,1)',vm.townColor[Type].width);
                        vm.map.getTargetElement().style.cursor="pointer";
                    } else {//鼠标滑过地图空白区域
                        vm.map.getTargetElement().style.cursor="";
                    }
                });
            },
            /*添加WFS*/
            addPipe(type) {
                let vm = this;
                let vectorSource = new SourceVector({
                    format: new GeoJSON(),
                    url: function(extent) {
                        return 'http://geoserver服务器地址?service=WFS&' +
                            'version=1.1.0&request=GetFeature&typename=空间名称前缀:'+type+'&' +
                            'outputFormat=application/json&srsname=EPSG:4326&' +
                            'bbox=' + extent.join(',') + ',EPSG:4326';
                    },
                    strategy: bboxStrategy
                });
                vm.pipeLayer[type] = new Vector({
                    source: vectorSource,
                    style: function (feature) {
                        let id = feature.id_.split('.')[0];
                        vm.setPipeStyle(feature,id,vm.townColor[id].color,vm.townColor[id].width);
                    }
                });
                vm.map.addLayer(vm.pipeLayer[type]);
            },
            /*管网样式*/
            setPipeStyle(feature,id,color,width){
                switch (id) {
                    case 'yanchi_fajing':
                        feature.setStyle(
                            new Style({
                                image: new Circle({
                                    radius: id ? width : 5,
                                    fill: new Fill({
                                        color:  id ? color : '#f00',
                                    }),
                                    stroke: new Stroke({
                                        color: '#fff',
                                        width: 1,
                                        EPSG: "4326"
                                    })
                                }),
                            })
                        );
                        break;
                    default:
                        feature.setStyle(
                            new Style({
                                stroke: new Stroke({
                                    color: id ? color : '#f00',
                                    width: id ? width : 1,
                                    EPSG: "4326"
                                })
                            })
                        );
                }
            },
            /****************管网点击操作********************/
            displayFeatureInfo(feature,coordinate) {
                let vm = this;
                if (feature) {
                    let keys = feature.getKeys();
                    let properties = feature.getProperties();
                    properties['id'] = feature.getId();
                    console.log(keys);
                    console.log(properties);
                    vm.popupPipeList = properties;
                    vm.popupPipe.setPosition([coordinate[0], coordinate[1]]);
                    vm.map.addOverlay(vm.popupPipe);
                }
            },
        },
    }
</script>
<style lang="scss" scoped>
    #mapDiv{
        height: 100%;
        width: 100%;
        .popup-box {
            position: relative;
            z-index: 999;
            .pipe-arrow {
                display: inline-block;
                position: absolute;
                left: -35px;
                top: 53px;
                &::before {
                    border-width: 20px 50px 8px 0;
                    transform: rotateZ(-30deg);
                    border-style: solid;
                    display: inline-block;
                    content: "";
                    border-color: transparent #467AE7 transparent transparent;
                }
            }
            .pipe-info{
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                color: #fff;
                font-size: 15px;
                line-height: 28px;
                width: 368px;
                min-height: 100px;
                padding: 15px 27px 20px 27px;
                background: #467AE7;
                .inspection-ul li {
                    line-height: 24px;
                }

            }
        }
    }
</style>
 

 

二、多个加载

1、加载多个WFS服务（yi'j）；

2、鼠标移入显示高亮；

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

<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 $ from "jquery";
    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:{},//信息
                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 }, //点
                },
                pipeLayerWfs:null,//WFS图层
            }
        },
        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();//加载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.getEventPixel(e.originalEvent);
                    let feature = vm.map.forEachFeatureAtPixel(pixel,function (feature) {
                        return feature;
                    });
                    /*管网高亮删除*/
                    if(vm.highlight){
                        let Type = String(vm.highlight.getId()).split('.')[0];
                        Type &&
                        Type !== 'undefined' &&
                        vm.townColor[Type] &&
                        vm.setPipeStyle(vm.highlight,Type,vm.townColor[Type].color,vm.townColor[Type].width);
                    }
                    if (feature) {
                        vm.map.getTargetElement().style.cursor="pointer";
                        /*管网高亮展示*/
                        vm.highlight = feature;
                        let Type = String(feature.getId()).split('.')[0];
                        Type &&
                        Type !== 'undefined' &&
                        vm.townColor[Type] &&
                        vm.setPipeStyle(feature,Type,'rgba(178,255,137,1)',vm.townColor[Type].width);
                        vm.map.getTargetElement().style.cursor="pointer";
                    } else {//鼠标滑过地图空白区域
                        vm.map.getTargetElement().style.cursor="";
                    }
                });
            },
            /*添加WFS*/
            addPipe() {
                let vm = this;
                let wfsParams = {
                    service : 'WFS',
                    version : '1.1.0',
                    request : 'GetFeature',
                    typeName :
                        'project:line1,' +
                        'project:line2,' +
                        'project:point',//加载多个图层名称
                    outputFormat : 'text/javascript',  //重点，不要改变
                    format_options : 'callback:loadFeatures'  //回调函数声明
                };
                let pipeSource = new SourceVector({
                    format: new GeoJSON(),
                    loader: function() {  //加载函数
                        let url = 'http://geoserver服务器地址';
                        $.ajax({
                            url: url,
                            data : $.param(wfsParams),   //传参
                            type : 'GET',
                            dataType: 'jsonp',   //解决跨域的关键
                            jsonpCallback:'loadFeatures',  //回调
                        });
                    },
                    strategy: bboxStrategy,
                    projection: 'EPSG:4326'
                });
                //回调函数使用
                window.loadFeatures = function(response){
                    pipeSource.addFeatures((new GeoJSON()).readFeatures(response));  //载入要素
                };
                vm.pipeLayerWfs= new Vector({
                    source: pipeSource,
                    style: function (feature) {
                        let id = feature.id_.split('.')[0];
                        vm.setPipeStyle(feature,id,vm.townColor[id].color,vm.townColor[id].width);
                    }
                });
                vm.map.addLayer(vm.pipeLayerWfs);
            },
            /*管网样式*/
            setPipeStyle(feature,id,color,width){
                if(id === 'point'){
                    feature.setStyle(
                        new Style({
                            image: new Circle({
                                radius: id ? width : 5,
                                fill: new Fill({
                                    color:  id ? color : '#f00',
                                }),
                                stroke: new Stroke({
                                    color: '#fff',
                                    width: 1,
                                    EPSG: "4326"
                                })
                            }),
                        })
                    );
                }else{
                    feature.setStyle(
                        new Style({
                            stroke: new Stroke({
                                color: id ? color : '#f00',
                                width: id ? width : 1,
                                EPSG: "4326"
                            })
                        })
                    );
                }
            },
            /****************管网点击操作********************/
            displayFeatureInfo(feature,coordinate) {
                let vm = this;
                if (feature) {
                    let keys = feature.getKeys();
                    let properties = feature.getProperties();
                    properties['id'] = feature.getId();
                    console.log(keys);
                    console.log(properties);
                    vm.popupPipeList = properties;
                    vm.popupPipe.setPosition([coordinate[0], coordinate[1]]);
                    vm.map.addOverlay(vm.popupPipe);
                }
            },
        },
    }
</script>
<style lang="scss" scoped>
    #mapDiv{
        height: 100%;
        width: 100%;
        .popup-box {
            position: relative;
            z-index: 999;
            .pipe-arrow {
                display: inline-block;
                position: absolute;
                left: -35px;
                top: 53px;
                &::before {
                    border-width: 20px 50px 8px 0;
                    transform: rotateZ(-30deg);
                    border-style: solid;
                    display: inline-block;
                    content: "";
                    border-color: transparent #467AE7 transparent transparent;
                }
            }
            .pipe-info{
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                color: #fff;
                font-size: 15px;
                line-height: 28px;
                width: 368px;
                min-height: 100px;
                padding: 15px 27px 20px 27px;
                background: #467AE7;
                .inspection-ul li {
                    line-height: 24px;
                }

            }
        }
    }
</style>

 

聂曦r
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
openlayers高亮显示和点击（包含去除默认高亮显示样式）
chpswg的专栏
04-08 4469
由于项目之前使用的是ol4，所以这里主要是在ol4中如何实现高亮显示和点击 主要是使用ol.interaction.Select 首先要初始化，指定要高亮显示和选择的图层，然后添加到地图上，添加高亮显示和点击事件 //初始化高亮显示和选择工具 initSelTool : function() { this.selTool = new ol.interaction.Select({//...
geoserver服务点击某一元素显示高亮
青峦。的博客
11-23 825
geoserver服务点击某一元素显示高亮 针对vue结合openlayers的使用点击geoserver显示弹框文章中显示高亮的优化，弹框popup待优化 let self_map = this.map; self_map.on("singleclick", function(evt) { //点击只一个元素高亮 if (this._wfs_layer_) { self_map.removeLayer(this._wfs_laye
openlayers 实现区域选择（点击区域高亮，再次点击取消；放大层级显示街道图层，同样可以选择取消）
最新发布
qq_23830005的博客
05-29 321
放大层级后会显示街道边界，保存选择街道信息到streetList中，然后筛选出相应的坐标数据，渲染到地图上。主要通过geojson数据实现边界显示，选择区域的同时加载街道边界，取消区域择清除街道边界。
openlayers select 鼠标点击要素指定图层高亮
gis_sss的博客
10-10 4532
一、概述 使用openlayers点击要素高亮显示方法可以使用select来实现，对于一个页面显示多个图层如何进行指定图层进行高亮，其他图层不高亮，select也提供相应的方式 二、点击高亮的实现方法 （1）es6的方式按钮加载模块 import { Select } from "ol/interaction"; import { click } from "ol/events/condition"; （2）实现高亮 let selectClick = new Select({ .
openlayers 实现鼠标移动要矢量要素上高亮显示
gis_sss的博客
09-06 6254
一、鼠标移动到矢量要素上实现高亮显示的思路 （1）建立一个高亮的图层，鼠标移动获取的数据添加到高亮图层上边，鼠标移除，将改要素从高亮图层中删除，这种方式会影响点击事件，点击获取的永远是高亮图层要素，要是地图当前只有一个图层有点击事件影响不是很大，但是多个图层存在点击事件会受到影响，需要建立多个高亮图层进行分类显示属性信息。 （2）利用js的浅拷贝特性进行数据存储，鼠标移动获取的要素赋值给一个变...
openlayers加载本地切片、高亮显示
04-01
花费了很久整理的ol2的代码直接可用附带3级切片
openlayers 加载Geoserver wfs服务
01-06
利用openlayers加载geoserver wfs服务发布的矢量图层。
openlayers 编辑geoserver图层
11-19
OpenLayers是一个JavaScript库，用于在Web浏览器中显示地图，而GeoServer则是一个基于Java的服务，它允许用户发布、管理和操作地理空间数据。本资源主要针对初级学习者，介绍如何使用OpenLayers对GeoServer图层进行...
openlayers加载WMS服务
05-31
在`wms-ol`压缩包中可能包含一个完整的示例，展示了如何使用上述步骤在OpenLayers中加载WMS服务。通过查看和学习这个示例，你可以更深入地理解这些概念，并将其应用于自己的项目。 总结来说，OpenLayers加载WMS服务...
OpenLayers3加载常用控件使用方法详解
10-14
OpenLayers 3 是一个强大的JavaScript库，用于在Web上创建交互式地图应用。它提供了丰富的功能，包括加载不同类型的地理数据、地图操作以及各种控件。本篇文章将深入讲解如何在OpenLayers 3中加载和使用常用的地图...
openlayers天地图叠加geoserver图层，并对包含多个图层的图层进行过滤
v_loading的博客
08-27 1766
#一个个叠加图层 先筛选后端接口返回的图层，在一个个叠加显示。要求geoserver发布多个图层，在根据数据进行筛选。 //一个个叠加图层 this.addView=[ { addTime: "2021-08-23 17:12:50" expression: "$>0.5" id: "1" lableId: "87" layerUrl: "http://dataflow.bxzscloud.com:30009/geoserver/sz/wms?a=b" name: "sz:nlwmx" prefix:
openlayers加载wms服务，点击高亮单个要素，demo可直接运行
weixin_43049347的博客
12-14 2077
openlayers实现geoserver发布的WMS服务点击查询属性信息比较简单，但对单个要素高亮没有直接有效的方法，因此采用重绘的方法，新建一个矢量图层，然后通过点击事件从geoserver获取要素的全部信息，其中包括要素的坐标信息，利用要素的坐标信息在新建的矢量图层里重新绘制当前要素，相当于覆盖原要素，实现高亮。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8
openlayers加载geoserver发布的wfs服务并通过点击查询属性
weixin_43049347的博客
05-06 1526
openlayers加载geoserver发布的wfs服务会存在跨域问题，下面代码中已经解决。这篇博客主要实现加载wfs服务后通过鼠标点击查询属性，并弹出pop框。以下是实现的完整代码及效果： （1）style.css /*wfs查询pop框样式*/ .ol-popup { display: none; position: absolute; background...
openlayers点击某个瓦片高亮展示
牧xin的博客
09-09 1632
使用矢量图层vectorLayer进行图层高亮, 拿到点击的那个瓦片的feature,取出几何图形的坐标,他是一个一维数组 import Feature from "ol/Feature"; import Polygon from "ol/geom/Polygon"; import VectorLayer from "ol/layer/Vector"; import VectorSource from "ol/source/Vector"; removeHighLightLayer() {
openlayers 高亮显示记录
淘淘小窝
04-01 4020
研究了好几天感谢penLayers官方旗舰群[2] 各位大神的帮助 直接上代码吧 OpenLayer : Feature Select var map = null;//地图对象 var wms_layer = null;//本地图片wms图层 var vector_layer = null;//矢量图形图层
openlayers实现多点聚合并移入出现弹窗
weixin_46074818的博客
05-14 1251
需求： 通过地图区域查看农机设备分布的数据 思路： 以天地图的卫星地图作为底图。openlayers加载地图 显示崇左区域轮廓线。轮廓线的数据是geojson格式，以openlayers添加图层的方式加载 将坐标点以聚合方式标注在地图上，并携带一些参数（这些参数为设备详情数据） 监听坐标点，地图放大时显示详情内容。因为很多设备坐标是重复的，分两种情况显示详情（分情况是为了只看一个村的农机设备数据）。 情况一：地图放大后只有一个坐标点，直接显示设备详情 情况二：地图放大13级后两个及两个以上重复坐标点，当地
OpenLayers地图
weixin_39150852的博客
11-20 1439
搭建本地环境,配置瓦片数据,下载文件并找到相应路径 链接: https://pan.baidu.com/s/1c6nfZodGBzUxyG2PhmFzPA 提取码: p3qi 开启本地服务器 导入本地包 链接: https://pan.baidu.com/s/1qhe4kxwpmez5-7dBVA1S1g 提取码: w6hp 将文件解压放到asset文件夹 在index.htm...
geoserver发布瓦片_openlayers6结合geoserver实现地图矢量瓦片(附源码下载)
weixin_39640520的博客
11-29 356
内容概览1.基于openlayers6结合geoserver实现地图矢量瓦片2.源代码demo下载效果图如下：实现思路：利用Geoserver发布矢量切片服务，然后openlayers调用矢量瓦片服务渲染加载，geoserver发布矢量服务步骤自行百度搜索相关教程，网上很多。最后，通过地图点击事件交互，实现图形高亮以及气泡窗口显示信息详情效果。具体实现过程利用geoserver发布好的矢量瓦片服务...
openlayers加载geoserver图层
04-04
使用OpenLayers的`TileLayer`类来创建一个Geoserver图层，并指定Geoserver的图层URL。 ```javascript var geoserverLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

聂曦r

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值