10. 多种地图服务（WMS、WMTS、WFS、VectorTi

WMS(TileWMS)

import TileLayer from "ol/layer/Tile";
import {TileWMS} from "ol/source";

let getA = ()=>{
  return new TileLayer({
    source: new TileWMS({
      url: 'http://43.143.xxx.xxx:8080/geoserver/one/wms?',
      params: {LAYERS: 'one:base-new', TILED: true},
      projectName: 'EPSG:4326',
    }),
  });
}
export default getA

WMTS

// 天地图,本段代码有错误
  return  new TileLayer({
    source: new WMTS({
      url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=6d6732d7f432d1a70b3c0c9fc0e4d8fd',
      layer: 'img',
      matrixSet: 'w',
      format: 'tiles',
      tileGrid:new WMTSTileGrid({
        origin: origin,
        resolutions: resolutions,
        matrixIds: matrixIds,
      }),
      version: '1.0.0',
      style: 'default',
      wrapX: true,
      projection
    }),
  });

加载WFS

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";

let xysGetVectorLayer = () => {
  return new VectorLayer({
    name: 'oldBaseLayer',
    visible: true,
    source: new VectorSource({
      url: 'http://43.143.xxx.xxx:8083/geoserver/one/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=one%3Abase-old&maxFeatures=500&outputFormat=application%2Fjson',
      format: new GeoJSON(),
      resultFormat: 'json',
    }),
  })
}

export default xysGetVectorLayer

wfs + cql_filter

&cql_filter="name"='钱塘区'

cql_filter

<template>
  <div>
  </div>
</template>

<script>

export default {
  name: 'xys-study-cql_filter',
  data() {
    return {}
  },
  mounted() {
    let str2Unicode = (str) => {
      let unicodeStr = '';
      for (let i = 0; i < str.length; i++) {
        const char = str.charAt(i);
        const codePoint = char.charCodeAt(0);
        if (codePoint >= 0x4e00 && codePoint <= 0x9fa5) {
          // 仅处理中文字符，其他字符保持不变
          unicodeStr += `\\u${codePoint.toString(16).toUpperCase().padStart(4, '0')}`;
        } else {
          // 非中文字符保持不变
          unicodeStr += char;
        }
      }
      return unicodeStr;
    }

    let test = (str) => {
      // 处理str
      str = encodeURIComponent(str2Unicode(str))

      // 发起请求
      let url = 'http://localhost:8899/geoserver/one/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=one:province&maxFeatures=1000000&outputFormat=application%2Fjson&cql_filter=' + str
      fetch(url).then(res => res.json()).then(jsonData => {
        jsonData.features.forEach(v => {
          console.log(v.properties)
        })
      })
    }

    test(`"CODE"='110000000'`)
    test(`"NAME" like '%河北%'`)
    test(`"省份名" like '%新疆%'`)
  }
}
</script>

<style lang="scss" scoped>
</style>