首先发布wms图层：

http://120.76.197.111:8090/geoserver/cite/wms?service=WMS&version=1.1.0&request=GetMap&layers=cite%3Asichuan&bbox=97.350096%2C26.045865%2C108.546488%2C34.312446&width=768&height=567&srs=EPSG%3A4326&format=application/openlayers#

Geoserver中进行wms过滤

根据属性名过滤要素

属性名='属性值'

注意：记得要给属性值加单引号

根据属性名过滤多个要素  in

属性名 in ('属性值1','属性值2')

比较运算：=，<>，>，> =，<，<=

根据属性值范围过滤

属性名 between xxx and xxx

根据属性名模糊查询

属性名 like '%模糊查询值%'

比较两个字段值

对字段值进行加减乘除（+， - ，*，/）

Filter functions（过滤函数）

常见字符串函数如下：

注意：非字符串值将自动转换为字符串表示形式。

名称	参数	描述
CONCATENATE	s1：String，s2：String，...	连接任意数量的字符串。非字符串参数是允许的。
strCapitalize	sentence：串	充分利用句子。例如，“你是谁？”将变成“你好吗？”
strConcat	a：String，b：String	将两个字符串连接成一个
strEndsWith	string：String，suffix：String	如果string以。结尾，则返回truesuffix
strEqualsIgnoreCase	a：String，b：String	如果两个字符串相等，则忽略大小写注意事项返回true
strIndexOf	string：String，substring：String	返回指定子字符串第一次出现的此字符串中的索引，或者-1如果未找到
strLastIndexOf	string：String，substring：String	返回指定子字符串最后一次出现的字符串中的索引，或者-1如果找不到
strLength	string：串	返回字符串长度
strMatches	string：String，pattern：String	如果字符串与指定的正则表达式匹配，则返回true。有关模式规范的完整语法，请参阅 Java Pattern类javadocs
strReplace	string：字符串，pattern：字符串，replacement：字符串，global：布尔值	返回替换为给定替换文本的模式的字符串。如果global参数是true那么所有的模式将被替换，否则只有第一个。有关模式规范的完整语法，请参阅 Java Pattern类javadocs
strStartsWith	string：String，prefix：String	如果string以。开头，则返回trueprefix
strSubstring	string：字符串，begin：整数，end整数	返回一个新字符串，该字符串是此字符串的子字符串。子字符串从指定的位置开始begin并延伸到索引处的字符处（索引从零开始）。endIndex- 1
strSubstringStart	string：字符串，begin：整数	返回一个新字符串，该字符串是此字符串的子字符串。子字符串从指定的位置开始begin并延伸到字符串的最后一个字符
strToLowerCase	string：串	返回字符串的小写版本
strToUpperCase	string：串	返回字符串的大写版本
strTrim	string：串	返回字符串的副本，省略前导和尾随空白

过滤出和矩形框相交的部分

BBOX(the_geom, 矩形框左上角经度, 矩形框左上角纬度, 矩形框右下角经度, 矩形框右下角纬度)

过滤出和多边形不相交的部分

disjoint(the_geom,polygon((103 32 , 105 32 , 105 30 ,  103 30 , 103 32)))

• 要用英文输入逗号
• 经纬度中间是空格

空间谓词的完整列表是：EQUALS，DISJOINT，INTERSECTS，TOUCHES，CROSSES，WITHIN，CONTAINS，OVERLAPS，RELATE，DWITHIN，BEYOND

openlayer中加载过滤的wms服务

<template>
  <div id="map" style="height: 100vh; width: 100vw"></div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import TileWMS from "ol/source/TileWMS";
import OSM from "ol/source/OSM";
export default {
  name: "",
  data() {
    return {
      map: {},
  mounted() {
    this.initMap();
    this.addLayer();
  methods: {
    // 初始化地图
    initMap() {
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
            visible: true,
            zIndex: 1,
            name: "OSM",
        target: "map",
        view: new View({
          projection: "EPSG:4326",
          center: [115, 39],
          zoom: 4,
    addLayer() {
      // 加载 GeoServer 发布的 wms 服务
      let wmsLayer = new TileLayer({
        extent: [
          // 边界
          97.350096, 26.045865, 108.546488, 34.312446,
        source: new TileWMS({
          // url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=adcode='510100'",
          // url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=name='成都市'",
          // url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=name in ('成都市','广安市')",
          // url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=childrenNu>10",
          // url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=childrenNu between 10 and 15",
          // url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=name like '%广%'", //无效
          // url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=childrenNu>subFeature",
          // url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=(childrenNu+subFeature)/2=10", //计算有误
          // url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=strLength(name)>5",
          // url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=BBOX(the_geom,103,32,105,30)",
          url: "http://localhost:8090/geoserver/keshan/wms?cql_filter=disjoint(the_geom,polygon((103 32,105 32,105 30,103 30,103 32)))",
          params: { LAYERS: "keshan:sichuan", TILED: false },
          serverType: "geoserver",
        visible: true,
        zIndex: 2,
      this.map.addLayer(wmsLayer);
</script>

首先发布wms图层：http://120.76.197.111:8090/geoserver/cite/wms?service=WMS&amp;version=1.1.0&amp;request=GetMap&amp;layers=cite%3Asichuan&amp;bbox=97.350096%2C26.045865%2C108.546488%2C34.312446&amp;width=768&amp;height=567&amp;srs=EPSG%3A4326&amp;format=applic 服务 链接：http://120.76.197.111:8090/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3Asichuan&maxFeatures=50&outputFormat=application%2Fjson 可以发现，参数中version为1.0.0表示版本号，maxFeatures=50指定返回...