前言

之前写过一篇 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 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'
})
}),*/
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){//捕捉不到矢量数据,设置矢量图层默认样式
geojsonLayer.getSource().forEachFeature(function(feature) {
feature.setStyle(geoJsonStyle);
});
//隐藏气泡窗口
overlay.setPosition(undefined);
closer.blur();
}else{//捕捉到矢量数据,设置矢量图层高亮样式
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 queryByProperty
*@param propertyValue 属性值
*@param propertyName 属性名称
*@param typeName 图层名称
*@return null
*/
function queryByProperty(propertyValue, propertyName, typeName, callback){
var filter =
'<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
……

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

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

openlayers6结合geoserver实现地图属性查询(附源码下载)的更多相关文章

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

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

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

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

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

    前言 之前写过一篇 openlayers4 版本的地图空间查询文章,但是由于是封装一层 js 代码写的,很多初学者看起来比较有点吃力,所以本篇文章重新写一篇地图空间查询文章,直接基于最新版本 open ...

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

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

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

    内容概览 1.基于openlayers6结合geoserver实现地图矢量瓦片2.源代码demo下载 效果图如下: 实现思路:利用Geoserver发布矢量切片服务,然后openlayers调用矢量瓦 ...

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

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

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

    前言:openlayers6推出来的有一段时间,推出来的新特性见:https://github.com/openlayers/openlayers/releases/该版本的主要功能是能够组合具有不同 ...

  8. arcgis api 3.x for js 热力图优化篇-不依赖地图服务(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. arcgis api 3.x for js 入门开发系列十一地图统计图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. 基于docker搭建Jenkins+Gitlab+Harbor+Rancher架构实现CI/CD操作(续)

    说明:前期的安装,请转向https://www.cnblogs.com/lq-93/p/11824039.html (4).查看gitlab镜像是否启动成功 docker inspect  容器id  ...

  2. CentOS7.6手动编译httpd-2.4.25

    手动编译httpd-2.4.25 系统:CentOS7.1810 httpd:2.4.25 编译时报错解决技巧:报什么错,就装这个错误的devel,比如报http2错误,就yum search htt ...

  3. JSON数据与Java对象的相互转换

    JSON数据与Java对象的相互转换 JSON解析器 常见的解析器:Jsonlib .Gson. fastjson. jackson JSON转化为Java对象 使用步骤: 1.导入jackson的相 ...

  4. MySQL的安装+可视化工具+JDBC的增删改查

    1.Mysql和可视化工具的安装 安装包网上有很多资源.这里推荐一个我一直在用的学习网站,上面有提供安装包和详细的说明. http://how2j.cn/k/mysql/mysql-install/3 ...

  5. 基于@Scheduled注解的Spring定时任务

    1.创建spring-task.xml 在xml文件中加入命名空间 <beans xmlns="http://www.springframework.org/schema/beans& ...

  6. nyoj 82-迷宫寻宝(一) (多重BFS)

    82-迷宫寻宝(一) 内存限制:64MB 时间限制:1000ms 特判: No 通过数:3 提交数:5 难度:4 题目描述: 一个叫ACM的寻宝者找到了一个藏宝图,它根据藏宝图找到了一个迷宫,这是一个 ...

  7. 【前端知识体系-CSS相关】CSS工程化方案

    1.如何解决CSS的模块化问题? 使用Less,Sass等CSS预处理器 使用PostCSS插件(postcss-import/precss) 使用webpack处理CSS(css-loader + ...

  8. windows 10上源码编译libjpeg-turbo和使用教程 | compile and use libjpeg-turbo on windows 10

    本文首发于个人博客https://kezunlin.me/post/83828674/,欢迎阅读! compile and use libjpeg-turbo on windows 10 Series ...

  9. Web Scraper 翻页——利用 Link 选择器翻页 | 简易数据分析 14

    这是简易数据分析系列的第 14 篇文章. 今天我们还来聊聊 Web Scraper 翻页的技巧. 这次的更新是受一位读者启发的,他当时想用 Web scraper 爬取一个分页器分页的网页,却发现我之 ...

  10. PostGIS 导入SHP文件并与ArcGIS连接

    运行环境: ArcGIS10.4 PostGreSql9.4 PostGIS2.2(需勾选空间数据库,否则需要重新安装) 实现步骤: 方法一: 1.打开pgAdminIII,数据库节点上右键,新建数据 ...