一、步骤

  1. 1、设置查询结构
  2. 2、设置查询条件
  3. 3、调用查询服务

二、例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../lib/include-openlayers-local.js"></script>
  9.     <script src="../js/Gaode.js"></script>
  10. </head>
  11. <body>
  12.     <input type="text" id="sql" />
  13.     <button onclick="queryBySQL()">属性查询</button>
  14.     <div id="map_container"></div>
  15.     <script>
  16.         const docLayer = new Zondy.Map.Doc('', 'p1_city', {
  17.             ip: 'localhost',
  18.             port: '6163'
  19.         })
  20.         const map = new ol.Map({
  21.             target: "map_container",
  22.             layers: [gaode, docLayer],
  23.             view: new ol.View({
  24.                 center: [114, 30],
  25.                 projection: 'EPSG:4326',
  26.                 zoom: 4
  27.             })
  28.         })
  30.         /* 
  31.         1、创建属性查询 
  32.         - 1-1、设置查询结构
  33.         - 1-2、设置查询参数where条件
  34.         - 1-3、调用查询接口
  35.         - 1-4、设置回调
  36.         */
  38.         function queryBySQL(){
  39.             //1-1设置查询结构
  40.             const queryStruct = new Zondy.Service.QueryFeatureStruct();
  41.             queryStruct.IncludeGeometry = true;
  42.             queryStruct.IncludeWebGraphic = true
  43.             //1-2 设置查询参数where条件
  44.              //实例化查询参数对象
  45.              const queryParam = new Zondy.Service.QueryParameter({
  46.                 struct: queryStruct
  47.             });
  48.             const name = document.getElementById("sql").value;
  49.             queryParam.where = name;
  50.             //1-3 调用查询服务器
  51.             const queryService = new Zondy.Service.QueryDocFeature(
  52.                 queryParam,
  53.                 'city',
  54.                 0,
  55.                 {
  56.                     ip:'localhost',
  57.                     port:6163
  58.                 }
  59.             )
  60.             queryService.query(querySuccess)
  61.         }
  62.         function querySuccess(result){
  63.             console.log(result)
  64.         }
  65.     </script>
  66. </body>
  67. </html>

输入框中输入 name=”武汉” 进行查询

:::success // queryParam.where = name like '%${name}%' :::

三、查询到的要素高亮显示

  1. var source = new ol.source.Vector({
  2.     wrapX: false
  3. });
  4. var highLightLayer = new ol.layer.Vector({
  5.     source,
  6.     style: new ol.style.Style({
  7.         image: new ol.style.Circle({
  8.             radius: 17,
  9.             /* 填充色 */
  10.             fill: new ol.style.Fill({
  11.                 color: '#ffcc33'
  12.             }),
  13.             /* 描边 */
  14.             stroke: new ol.style.Stroke({
  15.                 color: '#ff2d51',
  16.                 width: 2
  17.             })
  18.         })
  19.     })
  20. })
  21. map.addLayer(highLightLayer);
  23. function querySuccess(result) {
  24.     source.clear();
  25.     //初始化Zondy.Format.PolygonJSON类
  26.     var format = new Zondy.Format.PolygonJSON()
  27.     //将MapGIS要素JSON反序列化 ol.Feature类型数组
  28.     var features = format.read(result)
  29.     console.log(features)
  30.     if (features) {
  31.         source.addFeatures(features);
  32.     }
  33. }