OpenLayers中图属查询及属性过滤

最新推荐文章于 2024-08-22 15:46:11 发布

绛门人

最新推荐文章于 2024-08-22 15:46:11 发布

阅读量1w

点赞数

分类专栏： openLayers

本文链接：https://blog.csdn.net/wt346326775/article/details/50486019

版权

本文介绍如何在OpenLayers中实现图层的属性查询及属性过滤功能，通过设置参数实现对多个图层的点击事件，获取相关图属信息。

摘要由CSDN通过智能技术生成

var map, ctrlLyrSwitcher, measureControls;
var markers;
var wfs;
var field = 'Linetype'; //属性名
var val = 'DASHED';		//参数值
var flag = true;
function init() {
	format = 'image/png';
    map = new OpenLayers.Map({
        div: "map",
        projection: "EPSG:4326",
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        numZoomLevels: 21,
        layers: [
			new OpenLayers.Layer.WMS(
                 "点",
                 [
                  "http://localhost:8080/geoserver/TJDG/wms"
                 ],
                 { layers: 'TJDG:point', transparent: true },
                 { opacity: 0.8 }
                 ),
            new OpenLayers.Layer.XYZ(
                 "tianditu",
                 [
                  //"http://t1.tianditu.cn/DataServer?T=img_c&X=${x}&Y=${y}&L=${z}"
                  "http://t1.tianditu.cn/DataServer?T=cav_c&X=${x}&Y=${y}&L=${z}"
                 ],
                 {
                 //wrapDateLine: true
             }
                 ),
                  new OpenLayers.Layer.XYZ(
                 "天地图中文注记",
                 [
                  "http://t1.tianditu.cn/DataServer?T=cva_c&X=${x}&Y=${y}&L=${z}"
                 ],
                 {
                     //wrapDateLine: true,
                     isBaseLayer: false,
                     visibility: false,
                     displayInLayerSwitcher: false
                 }
                 ),
                 new OpenLayers.Layer.XYZ(
                 "天地图卫星图标注",
                 [
                  "http://t1.tianditu.cn/DataServer?T=cia_c&X=${x}&Y=${y}&L=${z}"
                 ],
                 {
                     // wrapDateLine: true,
                     isBaseLayer: false
                 }
                 ),	
								new OpenLayers.Layer.WMS(
                 "管",
                 [
                  "http://localhost:8080/geoserver/TJDG/wms"
                 ],
                 { layers: 'TJDG:line', transparent: true },
                 { opacity: 0.8 }
                 ),	
                 				new OpenLayers.Layer.WMS(
                 "锅炉房",
                 [
                 "http://localhost:8080/geoserver/TJDG/wms"
                 ],
                 { layers: 'TJDG:GLF', transparent: true },
                 { opacity: 0.8 }
                 ),				new OpenLayers.Layer.WMS(
                 "居民点",
                 [
                 "http://localhost:8080/geoserver/TJDG/wms"
                 ],
                 { layers: 'TJDG:jmd', transparent: true },
                 { opacity: 0.8 }
                 )		                          

    ],
        center: [117.47081, 38.72762],
        zoom: 15
    });
  //*******************设置style**********************************
    var myStyles = new OpenLayers.StyleMap({  
        "default": new OpenLayers.Style({  
            pointRadius: "${type}",  
            fillColor: "#ffcc66",  
            strokeColor: "#ff9933",  
            strokeWith: 2,  
            graphicZIndex:1  
        }),  
        "select": new OpenLayers.Style({  
            fillColor: "#66ccff",  
            strokeColor: "