Geoserver+Openlayers拉框查询
1.代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>OpenLayers</title>
<link rel="stylesheet" href="geoserver/ol.css" type="text/css">
<script src="geoserver/ol.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="plugins/layui-v2.4.3/layui/css/layui.css">
<script src="plugins/layui-v2.4.3/layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<#--注意openlayer的版本号，高版本存在es6中新语法不兼容的情况-->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
</head>
<style>
#map {
height: 600px;
/*width: 1024px;*/
/* float: left;*/
}
</style>
<body>
<div id="map">
<form class="form-inline">
<label>查询类型</label>
<select id="type">
<option value="None">None</option>
<option value="Point">点击</option>
<option value="Polygon">多边形</option>
<option value="Circle">拉框</option>
</select>
</form>
</div>
<script>
var map = new ol.Map({
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [104.07, 30.72],
zoom: 7
})
});
var wfsParams = {
service: 'WFS',
version: '1.1.1',
request: 'GetFeature',
typeName: 'map_dz:tl_lx_g', //图层名称，可以是单个或多个
outputFormat: 'text/javascript', //重点，不要改变
format_options: 'callback:loadFeatures' //回调函数声明
}; var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent, resolution, projection) { //加载函数
var url = 'http://192.168.1.113:8080/geoserver/map_dz/wms';
$.ajax({
url: url,
data: $.param(wfsParams), //传参
type: 'GET',
dataType: 'jsonp', //解决跨域的关键
jsonpCallback: 'loadFeatures' //回调 });
},
strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
maxZoom: 20
})),
projection: 'EPSG:4326'
});
//回调函数使用
window.loadFeatures = function (response) {
vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response)); //载入要素
};
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
map.addLayer(vectorLayer);
var draw;
var typeSelect = document.getElementById('type');
var value;
var num=10;//用于删除之前的框，表示号，随便取一个
function addInteraction() {
if (value !== 'None') {
if (value === 'Polygon') {
draw = new ol.interaction.Draw({
source: vectorLayer.getSource(),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
type: value
});
} else if (value === 'Circle') {
draw = new ol.interaction.Draw({
source: vectorLayer.getSource(),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
type: value,
geometryFunction: ol.interaction.Draw.createBox()
});
} else if (value === 'Point') {
draw = new ol.interaction.Draw({
source: vectorLayer.getSource(),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
type: value
});
} map.addInteraction(draw);
//删除之前draw的部分
draw.on('drawstart',function(evt) {
var featureAdd=vectorLayer.getSource().getFeatureById(num);
if(featureAdd!=null){
vectorLayer.getSource().removeFeature(featureAdd);
}
});
//绘图结束，处理选中部分
draw.on('drawend',function(e){
e.feature.setId(num);
var geom=e.feature.getGeometry();
var coor = geom.v;
mapSelect(coor);
});
}
}
//选择事件
typeSelect.onchange = function() {
value = typeSelect.value;
map.removeInteraction(draw);
addInteraction();
}; //draw图像与原始数据相交
function mapSelect(coor) {
if(value=='Point') {
coor = [coor[0]-0.0001,coor[1]-0.0001,coor[0]+0.0001,coor[1]+0.0001];
}
var FILTER = '<Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><BBOX><PropertyName>geom</PropertyName><gml:Envelope srsName="EPSG:4326"><gml:lowerCorner>' + coor[0] + ' ' + coor[1] + '</gml:lowerCorner><gml:upperCorner>' + coor[2] + ' ' + coor[3] + '</gml:upperCorner></gml:Envelope></BBOX></Filter>';
getFeature({
typename: 'map_dz:tl_lx_g',//查询的服务图层名称
filter: FILTER,//查询条件
callback: 'getIdentifyroadGrid'//查询的回调函数
});
}
var selectNum=[];
var geojsonFormat = new ol.format.GeoJSON({defaultDataProjection: "EPSG:4326"});
function getIdentifyroadGrid(res) {
var queryData = [];
var features = geojsonFormat.readFeatures(res); for (var nu = 0; nu<selectNum.length;nu++) {
var featureSelect=vectorLayer.getSource().getFeatureById(selectNum[nu]);
if(featureSelect!=null) {
featureSelect.setStyle(
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
}));
}
}
selectNum=[];
for (var i = 0; i < features.length; i++) {
var feature = features[i];
console.log(feature);
selectNum.push(feature.f);
var featureSelectCurrent=vectorLayer.getSource().getFeatureById(feature.f);
featureSelectCurrent.setStyle(
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff4118',
width: 2
})
}));
var lxmc = feature.H["lxmc"];
var ldbm = feature.H["ldbm"];
var lxbh = feature.H["lxbh"];
var result = {
"lxmc": lxmc,
"ldbm": ldbm,
"lxbh": lxbh,
"setindex": i
};
queryData.push(result)
}
console.log(selectNum);
var tableIns=null;
var dataTable = "<table class=\"layui-table\" lay-filter=\"demo\" id=\"joinTab\"></table>";
layui.use(['table', 'layer'], function () {
var table = layui.table;
var layer = layui.layer;
var index = layer.open({
type: 1 //Page层类型
, title: '要素属性'
, shade: 0 //遮罩透明度
, anim: 0 //0-6的动画形式，-1不开启
, content: dataTable
, offset: ['250px', '290px']
, zIndex: 1
, scrollbar: false
, resize: false
, skin: 'layui-layer-molv'
, closeBtn: 2
, btn: ["关闭"]
, yes: function (index) {
layer.close(index);
}
, cancel: function () {
}
});
tableIns = table.render({
elem: "#joinTab",
width: "auto",
height: "auto",
data: queryData,
initSort: {field: 'lxbh', type: 'desc'},
cols: [[
{field: 'lxmc', title: '路线名称', width: 150, align: 'center', sort: true},
{field: 'ldbm', title: '路线编号', width: 150, align: 'center', sort: true},
{field: 'lxbh', title: '路段编码', width: 150, align: 'center', sort: true}
]]
});
layer.style(index, {
opacity: 0.8
});
}); if (tableIns) {
tableIns.reload({
data: queryData
});
} else {
// console.log("Do Nothing!");
}
} //请求wfs数据
function getFeature(options) {
$.ajax(/*'http://192.168.1.113:8080/geoserver/map_dz/wms', */{
type: 'GET',
url: 'http://192.168.1.113:8080/geoserver/map_dz/wms',
data: {
service: 'WFS',
version: '1.1.1',
request: 'GetFeature',
typename: options.typename,
srsname: options.srid,
outputFormat: 'text/javascript',
viewparams: options.viewparams,
bbox: (options.extent === undefined) ? undefined : options.extent.join(',') + ',' + options.srid,
filter: options.filter
},
dataType: 'jsonp',
jsonp: 'format_options',
jsonpCallback: 'callback:' + options.callback
}); } </script>
</body>
</html>
2.代码解释
这一部分是主要针对用户做此功能的时候，遇到的问题进行总结：
在引入 Openlayers 的 JS 文件的时候，注意版本号，5.0+ 的版本中大量应用了ES6 的最新特性，如果直接引入 5.0+ ，可能与前期的项目有所冲突，所以这里建议使用低版本，同样能完成拉框查询
这里主要通过 Draw 对象进行框选的，Draw 的本质是在图层上兴建 Shape ，那么在下一次框选的时候，需要把上次 Draw 的框去掉：（回答了网上用户的提问：openlayers 在重新画图(圆或矩形)如何清除之前的图，Openlayer删除上一次绘制的图）
首先记录框选时，增加的框框的ID
然后在下次框选之前，通过 id 找到上次那个 Feature，并删掉
对选中的对象进行重新设置颜色，这里主要通过 Style 属性进行处理：
在下次选中对象的时候，删除上次选中对象的样式 将选中对象的 id 压到数组汇总
在下次设置选中对象的样式之前，遍历数组，对上次选中的feature进行样式设置（设置为原来的样式）
3.结果
参考
https://www.cnblogs.com/kkyyhh96/p/6379515.html
https://blog.csdn.net/songjian1314/article/details/17263865
https://blog.csdn.net/shaxiaozilove/article/details/60780175
https://blog.csdn.net/m0_37659871/article/details/80598589
https://openlayers.org/en/latest/examples/draw-features.html
https://openlayers.org/en/latest/examples/draw-shapes.html
Geoserver+Openlayers拉框查询的更多相关文章
- 浏览器本地下拉框查询选择js
首先需要引用jquery-1.7.2.js. 页面下拉框有对应的数据,此下拉框的查询将不与服务器交互.本地下拉框查询.暂不支持通过键盘上下按键和enter键控制 // JavaScript Docum ...
- ExtJs 下拉单联动，次级下拉框查询模式
queryMode : 'local' 如果下拉框的值是本地数据,最好设定queryMode为local,这样可以提高用户的响应速度
- ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
- Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份:<下拉框省份> 市区:<下拉框市区> 县乡:<下拉 ...
- 适用于MES、WMS、ERP等管理系统的实体下拉框设计
场景 该设计多适用于MES,ERP,WMS 等管理类型的项目. 在做管理类型项目的时候,前端经常会使用到下拉框,比如:设备,工厂等等.下拉组件中一般只需要他们的ID,Name属性,而这些数据都创建于其 ...
- Jquery+Ajax下拉框级联查询
- ExtJs 可查询的下拉框
最近项目中有个需求,就是有四个模块需要加载一个主表的内容,比如说这个表叫项目表(比如项目表里有两个字段一个是项目ID--projCd,还有一个是项目名称--projNm).主表的内容的要放在一个下拉框 ...
- portal开发"下拉框"“日期框”查询要怎么配置
下面的这些是我今天的成果! 总的来说是一步一步摸索出来的!还是等感谢超哥的耐心指导,犯了一些错误! 1.比如在wd配置文件中中写id=“check_it_two”,在java中写成 checki_it ...
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> <title>We ...
随机推荐
- Java中的queue和deque对比详解
队列(queue)简述 队列(queue)是一种常用的数据结构,可以将队列看做是一种特殊的线性表,该结构遵循的先进先出原则.Java中,LinkedList实现了Queue接口,因为LinkedLis ...
- springCloud系列 Config配置中心
1.config服务的部署 2.yum文件的格式 大小写敏感 使用缩进表示层级关系 缩进时不允许使用Tab键,只允许使用空格. 缩进的空格数目不重要,只要相同层级的元素左侧对齐即可 3.热部署 4.配 ...
- Linux设置开放一个端口
修改防火墙配置需要修改 /etc/sysconfig/iptables 这个文件,如果要开放哪个端口,在里面添加一条. -A RH-Firewall-1-INPUT -m state --state ...
- 区分getchar(),getch(),getche()三个函数：
区分getchar(),getch(),getche()三个函数: 第一行是手动输入的,第二行是printf输出的. getch()和getche()这两个函数使用时要包含conio.h头文件: ge ...
- Guns（开源后台管理系统框架）实战（一）——开发环境搭建
1. 开发环境搭建 1.1. 开发环境要求 1.2. 配置Maven 1.3. 配置MySQL 1.4. Git克隆项目 1.5. Eclipse导入系统 2. 小结 3. 参考引用 1. 开发环境搭 ...
- 两个标签页定位第二个标签页元素时显示element not visible
问题描述 web页面有两个标签页, 当转换到第二个标签页定位元素时, 显示element not visible. 代码 ... //省略 WebElement ele= browser.getEle ...
- BZOJ_3514_Codechef MARCH14 GERALD07加强版_主席树+LCT
BZOJ_3514_Codechef MARCH14 GERALD07加强版_主席树+LCT Description N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. I ...
- BZOJ_1391_[Ceoi2008]order_最大权闭合子图
BZOJ_1391_[Ceoi2008]order_最大权闭合子图 Description 有N个工作,M种机器,每种机器你可以租或者买过来. 每个工作包括若干道工序,每道工序需要某种机器来完成,你可 ...
- Python Django 2.1登录功能_1
#在上篇的基础上进行#在.../sign/templates/index.html文件,开发登录表单 <html> <head> <title>Django Pag ...
- Jmeter-----【mac电脑】配置web浏览器的代理抓取请求
在测试中,不仅会涉及到APP中的数据测试,时常我们APP的数据需要与后台进行交互,因此我们不可避免的也需要对web进行接口测试,更准确的来说是使用web的接口来快速的帮我们实现App中所需的数据录入, ...