openlayers6结合geoserver实现地图空间查询(附源码下载)

前言

之前写过一篇 openlayers4 版本的地图空间查询文章,但是由于是封装一层 js 代码写的,很多初学者看起来比较有点吃力,所以本篇文章重新写一篇地图空间查询文章,直接基于最新版本 openlayers6 写的,纯粹 html + js + css形式,没有任何封装。

内容概览

1.基于 openlayers6 实现地图空间查询
2.源代码 demo 下载

效果图如下:

具体实现过程

  • html 样式
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
.ol-popup {
position: absolute;
background-color: white;
-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));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.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 {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "?";
}
  • 矢量图层默认样式以及高亮样式
//绘制geojson矢量图层样式
var geoJsonStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: ‘#e6d933‘,
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: ‘rgba(255, 255, 0, 0.1)‘
})
});
//绘制geojson矢量图层高亮样式
var geoJsonHLightStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: ‘#33CCFF‘,
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: ‘rgba(255, 255, 0, 0.1)‘
})
});
  • 创建矢量图层以及绘制工具图层
var geojsonLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: geoJsonStyle
});

//绘制工具图形
var drawsource = new ol.source.Vector();
var drawlayer = new ol.layer.Vector({
source: drawsource
});
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
/*new ol.layer.Tile({
source: new ol.source.TileArcGISRest({
url: ‘https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer‘
})
}),*/
drawlayer,
geojsonLayer,
];
  • 创建地图
var map = new ol.Map({
layers: layers,
overlays: [overlay],
target: ‘map‘,
view: new ol.View({
projection: ‘EPSG:4326‘,
center: [104.114129, 37.550339],
zoom: 4
})
});
  • 监听地图鼠标移动事件,设置选择矢量图层要素高亮以及弹出气泡窗口效果
//监听地图鼠标移动事件
map.on(‘pointermove‘,function(e) {
if (e.dragging) {
return;
}
var feature =map.forEachFeatureAtPixel(e.pixel,
function(feature) {
return feature;
});
//console.log(‘feature‘,feature);

if(feature==undefined || !feature.values_.map_num){//捕捉不到矢量数据,设置矢量图层默认样式
geojsonLayer.getSource().forEachFeature(function(feature) {
feature.setStyle(geoJsonStyle);
});
//隐藏气泡窗口
overlay.setPosition(undefined);
closer.blur();
}else{//捕捉到矢量数据,设置矢量图层高亮样式
if(feature.values_ && feature.values_.map_num){
feature.setStyle(geoJsonHLightStyle);
//弹出气泡窗口
var coordinate = e.coordinate;
content.innerHTML = ‘图斑编号:‘+feature.values_.map_num+‘</br>图斑描述:‘+feature.values_.description;
overlay.setPosition(coordinate);
}
}
})
  • 空间查询核心函数
var geoserverUrl = ‘http://localhost:8080/geoserver/GIS‘;
/*空间查询图层
*@method queryByPolygon
*@param polygon 空间范围
*@param typeName 图层名称
*@return null
*/
function queryByPolygon(polygon, typeName, callback){
var filter =
‘<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">‘;
filter += ‘<And>‘;
filter += ‘<Intersects>‘;
filter += ‘<PropertyName>geom</PropertyName>‘;
filter += ‘<gml:Polygon>‘;
filter += ‘<gml:outerBoundaryIs>‘;
filter += ‘<gml:LinearRing>‘;
filter += ‘<gml:coordinates>‘ + polygon + ‘</gml:coordinates>‘;
filter += ‘</gml:LinearRing>‘;
filter += ‘</gml:outerBoundaryIs>‘;
……

完整demo源码见小专栏文章尾部GIS之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

原文地址:https://www.cnblogs.com/giserhome/p/12037135.html

时间: 2024-11-10 07:11:22

openlayers6结合geoserver实现地图空间查询(附源码下载)的相关文章

cesium结合geoserver实现地图空间查询(附源码下载)

前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内容概览 1.cesium 结合 geoserver 实现地图空间查询2.源代码 demo 下载 效果图如下: 实现思路:首先利用 geoserver 发布的图斑 WFS 服务,通过 url 的 rest 请求,构造空间查询形式,获取 geojson 数据源:然后调用cesium api 的 Cesi

cesium 结合 geoserver 实现地图属性查询(附源码下载)

前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内容概览 1.cesium 结合 geoserver 实现地图属性查询2.源代码 demo 下载 效果图如下: 实现思路:首先利用 geoserver 发布的图斑 WFS 服务,通过 url 的 rest 请求,构造属性查询形式,获取 geojson 数据源:然后调用cesium api 的 Cesi

openlayers6结合geoserver实现地图矢量瓦片(附源码下载)

内容概览 1.基于openlayers6结合geoserver实现地图矢量瓦片2.源代码demo下载 效果图如下: 实现思路:利用Geoserver发布矢量切片服务,然后openlayers调用矢量瓦片服务渲染加载,geoserver发布矢量服务步骤自行百度搜索相关教程,网上很多.最后,通过地图点击事件交互,实现图形高亮以及气泡窗口显示信息详情效果. 具体实现过程 利用geoserver发布好的矢量瓦片服务预览效果,直接F12看源码,来对应整合到demo var geojsonLayer = n

openlayers6实现webgl点图层渲染效果(附源码下载)

前言:openlayers6推出来的有一段时间,推出来的新特性见:https://github.com/openlayers/openlayers/releases/该版本的主要功能是能够组合具有不同渲染器类型的图层.以前,地图只使用一种渲染策略,并且地图中的所有图层都必须实施该策略.现在,可以使用包含使用不同渲染技术的图层的地图.例如,这使得可以在同一地图中将Canvas(2D)图层与基于WebGL的图层组合在一起.也可以使用自定义渲染器创建图层.因此,您可以拥有一个使用另一个库(例如d3)的

openlayers6结合geoserver利用WFS服务实现图层删除功能(附源码下载)

内容概览 1.openlayers6结合geoserver利用WFS服务实现图层删除功能2.源代码demo下载 效果图如下: 本篇主要是在上一篇openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)基础上实现的,openlayers6通过调用geoserver发布的地图服务WFS来达到图层删除记录的目的.与GeoServer的WFS进行基于Rest交互关键就在于请求参数,值得注意的是这些请求最好采用POST方法发送.查询可以采用json,但增加,删除,修改都只能

leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet 的插件库,非常有用 内容概览 leaflet结合geoserver利用WFS服务实现图层删除源代码demo下载 效果图如下: 本篇主要是在上一篇leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)基础上实现的,leaflet通过调用geoserver发布的地图服务WFS来

cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)

前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内容概览 1.cesium结合geoserver利用WFS服务实现图层编辑功能2.源代码demo下载 效果图如下: 本篇主要是在上一篇cesium结合geoserver利用WFS服务实现图层新增(附源码下载)基础上实现的,cesium通过调用geoserver发布的地图服务WFS来达到图层编辑记录的目

一组网页边栏过渡动画,创意无限!【附源码下载】

今天我们想与大家分享另一套过渡效果.这一次,我们将探讨如何实现侧边栏的过渡动画,就像我们已经在多级推出菜单中使用的.我们的想法是,以细微的 过渡动画显示一些隐藏的侧边栏,其余的内容也是.通常侧边栏滑入,把其他内容推到一边.这个可过程中可以加入很多微妙而奇特的效果,而今天这篇文章能够给 你一些启示. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 立即下载      在线演示 因为我们希望能够在一个页面上展现所有的效果,因此我们示

创意无限!一组网页边栏过渡动画【附源码下载】

今天我们想与大家分享另一套过渡效果.这一次,我们将探讨如何实现侧边栏的过渡动画,就像我们已经在多级推出菜单中使用的.我们的想法是,以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是.通常侧边栏滑入,把其他内容推到一边.这个可过程中可以加入很多微妙而奇特的效果,而今天这篇文章能够给你一些启示. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 立即下载      在线演示 因为我们希望能够在一个页面上展现所有的效果,因此我们示例的