帮我写一个在vue里面基于openlayers的WMS属性查询

好的，我可以帮您编写基于OpenLayers的WMS属性查询的Vue组件。以下是一个简单的实现示例：

<template>
  <div>
    <input v-model="url" placeholder="WMS服务地址" />
    <input v-model="layerName" placeholder="图层名称" />
    <button @click="getFeatureInfo">查询</button>
    <div v-if="featureInfo">
      <h3>{{ featureInfo.title }}</h3>
      <ul>
        <li v-for="(value, key) in featureInfo.properties" :key="key">
          {{ key }}: {{ value }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import TileWMS from 'ol/source/TileWMS';

export default {
  name: 'WMSQuery',
  data() {
    return {
      url: 'http://localhost:8080/geoserver/ows',
      layerName: 'topp:states',
      featureInfo: null,
      map: null,
      view: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.view = new View({
        center: [-11000000, 4600000],
        zoom: 4,
      });

      const layer = new TileLayer({
        source: new OSM(),
      });

      this.map = new Map({
        target: this.$el,
        layers: [layer],
        view: this.view,
      });
    },
    getFeatureInfo() {
      const url = `${this.url}?INFO_FORMAT=application/json&FEATURE_COUNT=1&QUERY_LAYERS=${this.layerName}&LAYERS=${this.layerName}&REQUEST=GetFeatureInfo&SERVICE=WMS&STYLES=&VERSION=1.1.1&WIDTH=${this.map.getSize()[0]}&HEIGHT=${this.map.getSize()[1]}&X=${this.map.getSize()[0] / 2}&Y=${this.map.getSize()[1] / 2}&BBOX=${this.map.getView().calculateExtent().join(',')}`;

      fetch(url)
        .then((response) => response.json())
        .then((json) => {
          if (json.features.length > 0) {
            this.featureInfo = {
              title: json.features[0].id,
              properties: json.features[0].properties,
            };
          }
        });
    },
  },
};
</script>

这个组件包含一个输入框用于输入WMS服务地址，一个输入框用于输入图层名称，以及一个查询按钮。当用户点击查询按钮时，组件会发出WMS GetFeatureInfo请求，获取当前鼠标位置下的要素属性，并将结果显示在组件中。请注意，此示例代码仅作为参考。您需要根据实际需求修改代码。