//定义select控制器
var select= new ol.interaction.Select();
map.addInteraction(select);//map加载该控件,默认是激活可用的
select.on('select', function(e) {
console.log(e.selected); //打印已选择的Feature
});
//地图单机事件
map.on('singleclick',mapClick);
function mapClick(e){
var pixel = map.getEventPixel(e.originalEvent);
var featureInfo = map.forEachFeatureAtPixel(pixel,
function (feature, layer) {
return {feature:feature,layer:layer};
});
if (featureInfo!==undefined&&featureInfo!==null
&&featureInfo.layer!==null)
{
console.log('打印选择要素');
console.log(featureInfo .feature);
console.log('打印选择要素所属Layer');
console.log(featureInfo .layer);
}
}
//模拟查询的wms图层名称比如是wmsLayer
//该wmsLayer的数据源是墨卡托的3857举例
map.on('click',mapClick);
function mapClick(evt){
var viewResolution = map.getView().getResolution();
var url = wmsLayer.getSource().getGetFeatureInfoUrl(
evt.coordinate, viewResolution, 'EPSG:3857',
{
'INFO_FORMAT': 'text/javascript',//geoserver支持jsonp才能输出为jsonp的格式
'FEATURE_COUNT': 50 //点击查询能返回的数量上限
});
$.ajax({
type: 'GET',
url:url,
dataType: 'jsonp',
jsonp:'format_options',
jsonpCallback:"callback:success_jsonpCallback"
});
}
//回调函数接收查询结果
var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"});
function success_jsonpCallback(res)
{
var features=geojsonFormat.readFeatures(res);
console.log('点击查询返回的结果如下:');
console.log(features);
}
map.on('click',mapClick);
//点击地图查询
function mapClick(evt)
{
var coor=evt.coordinate;
coor=coor.join(',');
//注意这里直接将点坐标提交,与图层做intersrct分析,对于面图层是没关系的。如果是查询,点或者线图形,一定要将coor先设置一个容差,经行buffer之后的图形,再去与图层叠加分析。不设置容差几乎就找不到了
//图层的图形字段是geom,不同图层的图形字段都要自己先看下自己的,有的是the_geom,有的是shape等等,具体分析即可。
var FILTER='<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>geom</PropertyName><gml:Point><gml:coordinates>'+coor+'</gml:coordinates></gml:Point> </Intersects></Filter>';
getFeature({
typename:'road:road_grid',//查询的服务图层名称
filter:FILTER,//查询条件
callback:'getIdentifyroadGrid'//查询的回调函数
});
}
var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"});
function getIdentifyroadGrid(res)
{
var features=geojsonFormat.readFeatures(res);
console.log('点击查询返回的结果如下:');
console.log(features);
}
//请求wfs数据
function getFeature(options)
{
$.ajax(gisserverhost+'geoserver/wfs',{
type: 'GET',
data: {
service: 'WFS',
version: '1.1.0',
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',
jsonpCallback:'callback:'+options.callback,
jsonp:'format_options'
});
}
//其他省略,假设x,y是前台点击地图获取的坐标,坐标系假设只3857。 //这里假设后台获取了参数拼接sql提交数据库
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有