点击查看属性 (wms方式wfs方式)

wms方式

<template>
  <div>
    <div id="map" style="height: 100vh; width: 100vw"></div>
    <div
      style="
        position: fixed;
        z-index: 9999;
        color: red;
        font-size: 30px;
        top: 20vh;
        left: 20vw;
      "
    >
      {{ name }}
    </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 TileWMS from "ol/source/TileWMS";
import OSM from "ol/source/OSM";

export default {
  data() {
    return {
      map: {},
      wmsLayer: {},
      name: "",
    };
  },
  mounted() {
    this.initMap();
    this.addLayer();
    this.clickFeature();
  },
  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: [104.5, 32.5],
          zoom: 7,
        }),
      });
    },
    addLayer() {
      // 加载 GeoServer 发布的 wms 服务
      this.wmsLayer = new TileLayer({
        extent: [97.350096, 26.045865, 108.546488, 34.312446],
        source: new TileWMS({
          url: "http://120.76.197.111:8090/geoserver/keshan/wms",
          params: { LAYERS: "keshan:sichuan", TILED: true },
          serverType: "geoserver",
        }),
        visible: true,
        zIndex: 2,
        className: "wms",
      });

      this.map.addLayer(this.wmsLayer);
    },
    clickFeature() {
      this.map.on("click", async (e) => {
        let viewResolution = this.map.getView().getResolution();
        let url = this.wmsLayer
          .getSource()
          .getFeatureInfoUrl(e.coordinate, viewResolution, "EPSG:4326", {
            INFO_FORMAT: "application/json", //输出为json字符串
          });
        console.log(url)
        if (url) {
          let data = await fetch(url).then(function (res) {
            return res.text(); //返回Promise
          });
          console.log("JSON.parse(data):", JSON.parse(data));
          this.name = JSON.parse(data).features[0].properties.name;
        }
      });
    },
  },
};
</script>

wfs方式

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";

import GeoJSON from "ol/format/GeoJSON";
import { Point, LineString, Polygon } from "ol/geom";

import Select from "ol/interaction/Select";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";

export default {
  components: {},
  data() {
    return {
      map: {},
      vectorlayer: {},
      select: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.selectFeature();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",

        layers: [
          new TileLayer({
            source: new OSM(),
          }),
          new VectorLayer({
            source: new VectorSource({
              //以下两个都可以，第一个是1.0.0版本，第二个是2.0.0版本
              // url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&maxFeatures=50&outputFormat=application%2Fjson",
              url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&count=50&outputFormat=application%2Fjson",

              format: new GeoJSON(),
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104, 30.3],
          zoom: 8,
        }),
      });
    },
    selectFeature() {
      this.select = new Select({
        condition: click,
      });
      this.map.addInteraction(this.select);
      this.select.on("select", (e) => {
        console.log("e", e);
      });
    },
  },
};
</script>