Vue+OpenLayers 实现点击查询要素信息

1、给地图绑定点击事件

this.map.on('click', this.mapClick);

2、导入axios

npm i axios

import axios from 'axios'

3、编写方法

mapClick(event) {
      // 获取url的getFeatureInfo请求地址
      var url = this.layer
        .getSource()
        .getFeatureInfoUrl(
          event.coordinate,
          this.map.getView().getResolution(),
          "EPSG:4490",  //请求的坐标系
          {
            INFO_FORMAT: "application/json",
          }
        );
      url = url.substring(url.indexOf("ows") + 3, url.length); //配置的代理 改变url
      axios.get("http://localhost:8081/server" + url).then((response) => {
        console.log(response.data.features);
        if (response.data.features.length > 0) {
            console.log(response.data.features);
        }
      });
    },
  },

要配置代理，解决跨域问题；改变请求的url，避免请求404