概况
实际开发过程中，加载一些小信息的图层，需要点击这个图层来显示当前点击的位置的图层信息，在不需要查询数据库的情况下，可以通过请求图层来达到同样效果的目的。
- 通过xml构造过滤条件来请求geoserver发布的图层获取信息
- 使用到的空间过滤器OpenLayers.Filter.Spatial和比较过滤器OpenLayers.Filter.Comparison
一、加载geoserver服务发布的图层
let getGSLayer = ()=>{
var url = "https://youUrl/geoserver/test/wms";
var wmslayer = new OpenLayers.Layer.WMS(
"发布图层",
url,
{
layers: "test:202009_layer_gd", // geoverser图层名
transparent: true
},
{ tileSize: new OpenLayers.Size(256,256) },
{ Ename: "发布图层", isEBaselayer: true }
);
map.addLayer(wmslayer);
}
发布图层加载效果
image.png
二、创建一个矢量图层，并添加到地图上，用来高亮点击Feature
// 1. 图层样式
let createStyle =() =>{
var style = new OpenLayers.Style(
{
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: "blue",
graphicZIndex: 10,
fillColor:"#FF69B4"
}
);
return style
}
// 2. 创建图层方法
let createLayer = (map,name,style)=>{
var layer = map.getLayersBy("name",name);
if(layer.length == 0){
layer = new OpenLayers.Layer.Vector(
name,
{
styleMap:new OpenLayers.StyleMap({
"default": style
})
});
map.addLayer(layer);
}
layer = map.getLayersBy("name",name);
return newLayer;
}
// 3. 添加图层
let baseLayer = createLayer(map,"高亮图层",createStyle())
三、给地图添加点击事件，拿到点击的面的信息
注：这里我把点击的范围扩展了15米，正常来说点击就是一个点，但是由于一个点的范围太小了，有时候查找不到数据，扩展范围视情况而定。
// 4. 点击屏幕（给地图添加点击事件，如果是网页版，事件为"click"，如果是手机触屏版，事件为"touchend"，考虑到后期地图拖动等原因不需要呈现数据，所以用"touchend"）
map.events.register("click", map, this.touchCallBack);
touchCallBack(e){
/**
* x和y 其实就是屏幕点的坐标
* e.xy = {x: 239.1579132080078,y: 254.1052703857422}
* 用过 OpenLayers API getLonLatFromViewPortPx(viewPortPx) 把屏幕点坐标转换成经纬度
* 得到的结果是 {lat: 2647604.9920991,lon: 12620728.904485}
*/
var lonlat = map.getLonLatFromViewPortPx(e.xy);
/**
* 扩展点击范围15米
* 得到的结果是900913坐标系的经纬度的面的信息
* POLYGON((12620713.904485 2647619.9920991,12620713.904485 2647589.9920991,12620743.904485 2647589.9920991,12620743.904485 2647619.9920991,12620713.904485 2647619.9920991))
*/
var polygon = this.extend15Metre(lonlat, 15);
}
/**
* lonlat：经纬度
* int：扩展的距离（单位是米）
*/
extend15Metre(lonlat,int){
var leftX = lonlat.lon-int;
var rightX = lonlat.lon+int;
var topY = lonlat.lat+int;
var bottomY = lonlat.lat-int;
var polygon = "POLYGON(("+leftX+" "+topY+","+leftX+" "+bottomY+","+rightX+" "+bottomY+","+rightX+" "+topY+","+leftX+" "+topY+"))";
return polygon;
}
四、请求图层获取数据
- 请求的图层是通过geoserver发布的图层
- 通过xml构造过滤条件
- 构造指定格式的xml
- 请求图层
- 回调处理数据
/**
* 请求图层的函数
* @param {*} property 指定坐标系
* @param {*} data 查询的数据
* @param {*} value 面的信息geometry
* @param {*} storeLayerName 发布的图层名字
* @param {*} url 发布的图层服务url
* @param {*} CallBack 回调函数
* @param {*} type 类型（详细查询/面的信息查询）
*/
xmlFun(property,data,value,storeLayerName,url,CallBack,type){
// 1.通过xml构造过滤条件
var filter_1_0 = new OpenLayers.Format.Filter.v1_0_0();
//也可以使用1.1版本构造过滤条件
var filter_1_1 = new OpenLayers.Filter({ version: "1.1.0" });
var xml = new OpenLayers.Format.XML(); //构造xml格式的文件
var filters = [];
// 面的信息查询的用到的过滤条件为OpenLayers.Filter.Spatial.INTERSECTS
var cellFilter = new OpenLayers.Filter.Spatial({
type: OpenLayers.Filter.Spatial.INTERSECTS, //INTERSECTS, //相交OK
value: value,
projection: property // 指定请求图层的坐标系为EPSG:4326
})
filters.push(cellFilter);
var filter = new OpenLayers.Filter.Logical({ //逻辑操作符
type: OpenLayers.Filter.Logical.OR, //并且更改为或者
filters: filters
});
// 2.构造指定格式的xml
var xmlFilter = xml.write(filter_1_0.write(filter));
var xmlPara = ""
+ ""
+ ""
+ xmlFilter
+ " "
+ " ";
3.请求图层
var request = OpenLayers.Request.POST({
url: url + '?TICKETS=' + localStorage.getItem('tgtVal'), // 加上TICKETS主要是校验是否登录，根据实际情况，不需要校验可以不加
data: xmlPara,
callback: CallBack
});
}
// 调用
var url = "https://yourUrl/geoserver/wms"; // 发布图层的url
// 上面拿到的点击的面的信息polygon为900913坐标系，
// 需要转一下，因为图层的坐标系为4326，
// 如果与发布图层的坐标系一致，则不需要转
var geometry = transformCoordinate(polygon, 'to4326');
var storeName = 'test:20200827_gd_layer'; // geoserver发布的图层名称
mlFun("EPSG:4326", [], geometry, storeName, url, this.comFuc, '删格点击');
// 回调函数，请求的数据返回在data
comFuc(data){
var gmlParse = new OpenLayers.Format.GML();
var features = gmlParse.read(data.responseText); // 这个就是拿到的数据
// 每一条数据里面都有一个data对象，就是数据；
// 还有一个geometry对象，面的信息
// 画在地图上，用一个图层来显示
// 在画的时候又转了一次坐标，可能觉得很奇怪，说明一下，这个图层是我们后面加的图层，之前所有的定义都是使用900913的坐标系
// 在开发的过程中遇到很多这类问题，不可能兼容到百分百，少数服从多数吧
for (var i = 0; i < features.length; i++) {
var polygon = '';
var curPolygon = features[i].geometry.toString();
var polygonString = transformCoordinate(curPolygon, 'to900913').toString();
var curGeometry = new OpenLayers.Format.WKT().read(polygonString);
// 添加在地图上显示为高亮
baseLayer.addFeatures(curGeometry);
}
}
//坐标系转换
let transformCoordinate = (polygon,type)=>{
var tranPolygon = null;
if(type == 'to4326'){
tranPolygon = new OpenLayers.Format.WKT().read(polygon).geometry.transform(
new OpenLayers.Projection('EPSG:900913'),
new OpenLayers.Projection('EPSG:4326')
)
}else if(type == 'to900913'){
tranPolygon = new OpenLayers.Format.WKT().read(polygon).geometry.transform(
new OpenLayers.Projection('EPSG:4326'),
new OpenLayers.Projection('EPSG:900913')
)
}
return tranPolygon
}
前面用到了面的信息来请求图层，那么还有用到比较多的一个是精确查询
var cellFilter = new OpenLayers.Filter.Comparison({ // 比较操作符
type: OpenLayers.Filter.Comparison.EQUAL_TO, // 精确查询
property: 'name', // 图层里面的属性名
value: '信息大厦' // 图层里面的属性值
});
mlFun("EPSG:4326", [], geometry, storeName, url, this.comFuc, '删格点击');
此处的geometry的结果为
image.png
回调函数comFuc(data) 里面的features结果为
image.png
点击加载效果
image.png