openlayers加载geoserver发布的wfs服务并通过点击查询属性

最新推荐文章于 2024-08-29 13:25:22 发布

coderMXL

最新推荐文章于 2024-08-29 13:25:22 发布

阅读量1.5k

点赞数 1

分类专栏： openlayers

本文链接：https://blog.csdn.net/weixin_43049347/article/details/105944620

版权

该博客介绍了如何在OpenLayers中加载GeoServer发布的WFS服务，同时解决跨域问题。文章重点在于实现点击地图要素后查询其属性，并弹出属性详情的popup窗口。

摘要由CSDN通过智能技术生成

openlayers加载geoserver发布的wfs服务会存在跨域问题，下面代码中已经解决。这篇博客主要实现加载wfs服务后通过鼠标点击查询属性，并弹出pop框。以下是实现的完整代码及效果：

（1）style.css

/*wfs查询pop框样式*/
.ol-popup {
    display: none;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    /*top: 50px;*/
    /*left: 100px;*/
    width: 200px;
}
.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}
.ol-popup:before {
    bo