WebGIS 3-2交互点查询-高亮显示地图+json

1. 加载地图

1) 加载底图

               var map;
               var layer;
               var drawLayer;
               var drawControl;
               var highLtLayer;

        function init() {
//            添加地图容器
            map = new OpenLayers.Map('map1',
                    {
                        controls: [
                            new OpenLayers.Control.PanZoomBar(),
                            new OpenLayers.Control.LayerSwitcher(),
                            new OpenLayers.Control.Navigation(),
                            new OpenLayers.Control.MousePosition()
                        ]
                    }
            );

//            添加图层
            layer = new Zondy.Map.Doc('MDZZ', 'WorldMKT', {
                ip: "127.0.0.1",
                port: '6163',
                isBaseLayer: true
            });
            map.addLayers([layer]);
            map.setCenter(new OpenLayers.LonLat(11544046, 4312771), 3);
            
            
            initDraw();
        }

2) 添加一个绘制图层

        function initDraw() {
//            添加一个绘制图层
            drawLayer = new OpenLayers.Layer.Vector("DrawLayer");
            map.addLayer(drawLayer);
//          创建并添加控件  点
            drawControl = new OpenLayers.Control.DrawFeature(drawLayer, OpenLayers.Handler.Point);
            
            drawControl.featureAdded = callBack;
            
            map.addControl(drawControl);
        }

3) 创建图层用于高亮显示

        function initHighLtLayer() {
//            添加一个用于高亮显示的图层
            highLtLayer = new OpenLayers.Layer.Vector("Highlight");
            map.addLayer(highLtLayer);
        }

2.查询

查询5步曲
a.创建查询结构
b.创建查询形状
c.创建查询参数
d.创建查询服务
e.开始查询

           function callBack(feature) {
   //            创建查询结构
               var queryStruct = new Zondy.Service.QueryFeatureStruct(
                       {
   //                        要查询的信息
                           IncludeGeometry: true,
                           IncludeAttribute: true,
                           IncludeGraphic: true
                       }
               );
   //           创建查询形状
               var pointObj = new Zondy.Object.PointForQuery();
   //            传入OpenLayer的点的坐标
               pointObj.setByOL(feature.geometry);
   
   //            在点击下一个点时清除之前的点
               feature.destroy();
   //            创建查询参数
               var queryParm = new Zondy.Service.QueryParameter(
                       {
                           geometry:pointObj,
                           resultFormat:"json",
                           struct:queryStruct
                       });
   //            创建查询服务
               var queryService =new Zondy.Service.QueryDocFeature(queryParm,"WorldMKT",1,{
                   ip:"127.0.0.1",
                   port:"6163"
               });
   
   //          开始查询
               queryService.query(onSuccess);
   
           }         

查询按钮的点击事件

        function startQuery() {
            if (drawControl) {
                drawControl.activate();//激活绘图控件
            }
        }

回调函数 onSuccess

        function onSuccess(data) {
            var formatData = JSON.stringify(data);
            Process(formatData, 1, "resultTable");
//            如果存在已经高亮的图层则销毁,通过initHighLtLayer()重建要高亮显示的新图层
            if(highLtLayer) {
                highLtLayer.destroy();
            }


            //初始化高亮图层
            initHighLtLayer();
//            高亮显示
            var format = new Zondy.Format.PolygonJSON();
            var features = format.read(data);
            highLtLayer.setVisibility(true);//将图层设为可见
            highLtLayer.addFeatures(features);//将要素添加到图层中
        }

3.代码

3.效果

Paste_Image.png

在点击查询下一个点时,清除之前高亮的图层和json,并重新显示新的数据

Paste_Image.png