ol属性查询-json查询和arcgisserver服务查询及服务过滤、wms属性查询

过滤arcgisServer服务 filterServer --->  updateParams

案例：通过勾选图例内容过滤图层服务

 重点代码：

 filterServer(value){
// 过滤条件-ZXM（图例名称）在勾选的图例字段中
        let str = `ZXM IN (${value.join("','")})`
//过滤条件要用单引号包裹
        let filter = str.replace('(',"('").replace(')',"')")
// 图层0和图层1上的过滤条件
        let layerDefs = {"0": filter,"1": filter};
        let params = {
// 显示的图层 图层0 图层1
          'LAYERS': 'show:0,1',
          'layerDefs': JSON.stringify(layerDefs),
        }
//更新图层资源实现过滤
        this.layerSource.updateParams(params)
    },

 全部代码：

全选和多选图例过滤服务

<template>
  <div class="legendWrap">
    <!-- <div v-for="item in legendData" :key="item.url">
      <img :src="legendUrl+'0/images/'+item.url" alt="">
      <span>{{ item.label }}</span>
    </div> -->
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedLegends" @change="handleCheckedLegendsChange">
      <el-checkbox v-for="(item,index) in legendData" :label="item.label " :key="index"><img :src="legendUrl+'/'+item.layerId+'/images/'+item.url" alt=""><span style="margin:0 0 0 5px;">{{ item.label }}</span></el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
// import http from "@/service/interface.js";
import {baseMapInitParameters} from '@/map/lib/mapDatachuzhou'
export default {
  props: ['isShowLegend'],
  components: {
  },
  data() {
    return {
      legendData: [],
      legendUrl: '', //'/qz/xbmap/arcgis/rest/services/2023_04_25小斑面文件_更新子项目面新/MapServer',
      checkAll: true,
      isIndeterminate: true,
      checkedLegends: [],
      baseMapInitParameters,
      layerFilter: null,
      layerSource: null
    } 
  },
  created() {
    let layerXb = this.baseMapInitParameters.layers.find(item => item.name == '小班位置')
    this.legendUrl = layerXb.layerUrl
  },
  methods: {
    // 全选
    handleCheckAllChange(val) {
      let legendDataLabel = this.legendData.map(item => item.label)
      this.checkedLegends = val ?  legendDataLabel: []
      this.isIndeterminate = false
      this.filterServer(this.checkedLegends)
    },
    handleCheckedLegendsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.legendData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.legendData.length;
      // 勾选过滤服务
      this.filterServer(value)
    },
    filterServer(value){
        let str = `ZXM IN (${value.join("','")})`
        let filter = str.replace('(',"('").replace(')',"')")
        let layerDefs = {"0": filter,"1": filter};
        let params = {
          'LAYERS': 'show:0,1',
          'layerDefs': JSON.stringify(layerDefs),
        }
        this.layerSource.updateParams(params)
    },
    initData(){
      fetch(this.legendUrl+'/legend?f=pjson').then(response => response.json())
      .then(json => {
        this.legendData = []
        json.layers.map(item => {
          if(item.layerId<2){
            item.legend.forEach((element,index) => {
              element.layerId = item.layerId
              this.legendData.push(element)
            });
          }
        })
        this.checkedLegends = this.legendData.map(item => item.label)
        this.layerFilter = gisMap.map.getLayers().getArray().find(item => item.values_.name == '小班位置')
        this.layerSource = this.layerFilter.getSource()
      })
    }
  },
  watch:{
    isShowLegend(val){
      if(val && !this.legendData.length){
        this.initData()
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  $border: solid 1px lightgray;
  .legendWrap{
    position: absolute;
    left: 400px;
    bottom: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
    max-height: 250px;
    overflow-y: auto;
    /deep/ .el-checkbox{
      display: block;
      color: #fff!important;
    }
  }
</style>

属性查询geoserver

原始：http://******/hnlydsj/tsc/mapeditor/mapserver/layer/WMTS/1.0/资源一张图_2021_其他/公益林分布/getTile/{z}/{y}/{x}
获取图层：http://*****/hnlydsj/tsc/mapeditor/mapserver/styleInfo/资源一张图_2021_其他/公益林分布/layer.json
获取到结果  获取图层服务layerName=name=2021森林资源一张图
第一版：http://******/hnMapServer/mapserver/资源一张图_2021_其他/2021森林资源一张图/query?spatialFilter=POLYGON%20((111.74010642101074%2029.509347727123473,%20111.75099817579412%2029.450221058299174,%20111.79612115989691%2029.456444918175418,%20111.79145326498973%2029.48912018252569,%20111.79145326498973%2029.48912018252569,%20111.74010642101074%2029.509347727123473))&withGeometry=true
第二版：http://*******/hnlydsj/tsc/mapserverx/资源一张图_2021_其他/2021森林资源一张图/query
{
    "page":1,
    "size":2,
    "geometry":"POLYGON ((111.74010642101074 29.509347727123473, 111.75099817579412 29.450221058299174, 111.79612115989691 29.456444918175418, 111.79145326498973 29.48912018252569, 111.79145326498973 29.48912018252569, 111.74010642101074 29.509347727123473))",
    "returnCount":true,
    "returnGeometry":true
}

let featurei = gisMap.map.getEventCoordinate(evt.originalEvent)
        if (featurei != undefined) {
          this.$emit('featureiQuery', {
            lon: featurei[0],
            lat: featurei[1]
          })
        }
        // let feature0 = gisMap.map.forEachFeatureAtPixel(
        //     evt.pixel,
        //     function (feature, layer) {
        //       return feature;
        //     }
        //   );

服务接口查询

let layerarr = this.allLayers.find(item => item.values_.title == this.layername)
      if(layerarr) {
        let layer = layerarr
        let url = layer.values_.source.key_
        this.layerName = url.split('/getTile').shift().split('1.0/').pop()
        fetch(this.layerUrl)
        .then(response => response.json())
        .then(json => {
          let serveName = json[0].name
          // axios.get(`${_this.getserverUrl}${_this.layerName.split('/')[0]}/${serveName}/query?spatialFilter=${_this.wkt}&withGeometry=true`)
          axios.post(`${_this.serverUrl}${_this.layerName.split('/')[0]}/${serveName}/query`,{
            "page":1,
            "size":99999,
            "geometry": _this.wkt,
            "returnCount":true,
            "returnGeometry":true
          })
          .then(res => {
            _this.loading = false
            // let arr = res.data
            let arr = res.data.data.records
            _this.fromData = arr[0]
          })

arcgis 两种服务查询方式query和identity

arcgis server   Mapserver/0/query

arcgis srver Mapserver/identify

 方法一：

上面条件可以查到两条feature

方法一：

let params = {
        geometry: coordinate.join(','),
        geometryType: 'esriGeometryPoint',
        outFields: '*',
        returnGeometry: false,
        f: 'pjson'
      };

      fetch(this.propLayerUrl+'/0/query?'+ new URLSearchParams(params)).then(response => response.json())
      .then(json => {
        if(json.features&&json.features.length){
          this.IdataKeys = Object.keys(json.features.attributes)
          this.Idata = [json.features.attributes]
          this.Idatashow = true
        }

 优化：添加高亮定位

 方法二：

propertyQuery() {
      let url = '/tongliao_jsc/serverUrl/arcgis/rest/services/keerqin/211124矢量图_植被分布彩图/MapServer/0/query'
      let fileFormData = new FormData();
      fileFormData.set("where", "植被类='虎榛子灌丛'");
      fileFormData.set("geometryType", "esriGeometryEnvelope");
      fileFormData.set("f", "pjson");
      fileFormData.set("spatialRel", "esriSpatialRelIntersects");
      fileFormData.set("returnTrueCurves", "true");
      fileFormData.set("returnCountOnly", "false");
      fileFormData.set("inSR", "false");
      fileFormData.set("outFields","*")
      fileFormData.set("geometryPrecision", "");
      fileFormData.set("returnIdsOnly", "false");
      fileFormData.set("returnCountOnly", "false");
      fileFormData.set("returnZ", "false");
      fileFormData.set("returnM", "false");
      fileFormData.set("returnDistinctValues", "false");
      fileFormData.set("resultRecordCount", "");
      fileFormData.set("returnExtentsOnly", "false");
      // http.serverQuery(fileFormData).then(res => {
      //   console.log(res,8888)
      // })
      axios.post(url,fileFormData).then(res => {
        console.log(res.data.features,8888)
      })
    },

 identity

 const url = _this.chooseLyerUrl + "/identify";
        const params = {
          geometryType: "esriGeometryPoint",
          geometry: coordinate.join(","),
          layers: "all",
          tolerance: 5,
          mapExtent: gisMap.map
            .getView()
            .calculateExtent(gisMap.map.getSize())
            .join(","),
          imageDisplay: gisMap.map.getSize().join(",") + ",96", //DPI（每英寸点数） DPI 设置为 96 表示使用标准屏幕分辨率进行属性查询
          f: "json",
        };
        axios
          .get(url, {
            params
          })

查询所有

// 查服务点位信息函数
    handleAxiosFun(){
      return new Promise(((resolve,reject) => {
        const url = '/tlpest/arcgisServer/arcgis/rest/services/有害生物测试数据/8月份病虫害测报站/MapServer';
        // const url = '/tlpest/tongliao_pest/tongliao_jsc/map/arcgis/rest/services/有害生物测试数据/8月份病虫害测报站/MapServer';
        const fileFormData = new FormData()
        fileFormData.set('where', '1=1')
        fileFormData.set('geometryType', 'esriGeometryEnvelope')
        fileFormData.set('f', 'pjson')
        fileFormData.set('spatialRel', 'esriSpatialRelIntersects')
        fileFormData.set('returnTrueCurves', 'true')
        fileFormData.set('returnCountOnly', 'false')
        fileFormData.set('inSR', 'false')
        fileFormData.set(
          'outFields','*'
        )
        fileFormData.set('geometryPrecision', '')
        fileFormData.set('returnIdsOnly', 'false')
        fileFormData.set('returnCountOnly', 'false')
        fileFormData.set('returnZ', 'false')
        fileFormData.set('returnM', 'false')
        fileFormData.set('returnDistinctValues', 'false')
        fileFormData.set('resultRecordCount', '')
        fileFormData.set('returnExtentsOnly', 'false')
        axios.post(`${url}/0/query`,fileFormData,
          {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              tip: true
            }
          }
        )
        .then((res) => {
          if(res.status == 200){
            resolve(res.data.features)
          }
        }).catch(err => {})
      }))
    },

geoserver发布的wms服务属性查询

// 获取点击点位信息
    getPointHandle (coordinate) {
      this.coordinate = coordinate
      if (!this.isMap3) {
        let allLayers = gisMap.map.getLayers().getArray()
        this.queryLayers = allLayers.find(item => item.values_.visible && (item.values_.name == "公益林优化调整数据"))
        if (this.queryLayers) {
          this.loading = true
          this.getProp2d().then(json => {
            this.queryLayer(json.data)
          })
        }
      } else {
        let allLayers = viewer.imageryLayers._layers
        this.queryLayers = allLayers.find(item => item.show && (item.imageryProvider.layerName === '公益林优化调整数据'))
        if (this.queryLayers) {
          this.loading = true
          this.getProp3d()
        }
      }

    },
    // 查询服务属性
    async getProp2d () {
      let source = this.queryLayers.getSource();
      let urlrd = source.getFeatureInfoUrl(
        this.coordinate, gisMap.map.getView().getResolution(), gisMap.map.getView().getProjection(),
        { 'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': 1 });
      return await axios.get(urlrd, {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then(json => {
        return json
      })
    },
    getProp3d () {
      const bboxSize = 0.001
      const [longitude, latitude] = this.coordinate
      const url = this.queryLayers.imageryProvider.url
      const urlParams = new URLSearchParams({
        service: 'WMS',
        request: 'GetFeatureInfo',
        version: '1.1.0',
        layers: 'map1:gyl_20231123_84',
        query_layers: 'map1:gyl_20231123_84',
        bbox: `${longitude - bboxSize},${latitude - bboxSize},${longitude + bboxSize},${latitude + bboxSize}`,
        width: 101,
        height: 101,
        info_format: 'application/json',
        x: 50,
        y: 50,
        srs: 'EPSG:4326',
        transparent: true
      })
      const fullUrl = `${url}?${urlParams.toString()}`;
      fetch(fullUrl)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
          }
          return response.json();
        })
        .then(data => {
          this.queryLayer(data)
        })
    },
    queryLayer (json) {
      this.loading = false
      if (json.features && json.features.length) {
        const features = json.features
        if (!this.isMap3) {
          if (this.polygonFeature) {
            gisMap.featuresSource.removeFeature(this.polygonFeature)
            this.polygonFeature = null
          }
          this.infForestManage = features[0].properties
          this.polygonFeature = gisMap.featureUtils.transformFeatureFromGeojson(features[0].geometry)
          gisMap.featuresSource.addFeature(this.polygonFeature)
          gisMap.flyTo(this.polygonFeature)
        } else {
          if (this.polygonFeature) {
            // 删除数据并且销毁
            viewer.dataSources.remove(this.polygonFeature, true)
            this.polygonFeature = null
          }
          this.infForestManage = features[0].properties
          console.log(features, 'features')
          let geojson = features[0].geometry
          // 转化geojson数据
          const geojsonDataSource = Cesium.GeoJsonDataSource.load(geojson, {
            stroke: Cesium.Color.HOTPINK,
            fill: Cesium.Color.PINK,
            strokeWidth: 2,
            markerSymbol: '?'
          })
          geojsonDataSource.then(dataSource => {
            this.polygonFeature = dataSource
            viewer.dataSources.add(this.polygonFeature);
            viewer.zoomTo(dataSource)
          })
        }
        this.isForestShow = true
      } else {
        this.$message.warning('没有查询到该图层信息')
        this.infForestManage = {}
      }
    },