vue+openlayer访问geoserver发布的wms栅格影像图，并使用getFeatureInfoUrl()函数点击查询像元值

一时失言乱红尘 2021-07-25 13:00 1013阅读 0赞

openlayer官网示例：[https://openlayers.org/en/latest/examples/getfeatureinfo-tile.html][https_openlayers.org_en_latest_examples_getfeatureinfo-tile.html]

效果图：

![20201027171527522.gif][]

实现代码：

<template>
      <div id="map">
        <div style="position: absolute; z-index: 9999; color: red; font-size: 30px">
          {
       { info }}
        </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";
    import { defaults as defaultControls } from "ol/control";
    import ZoomSlider from "ol/control/ZoomSlider";
    
    export default {
      data() {
        return {
          map: null,
          info: "",
          wmsLayer: {},
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        // 初始化地图
        initMap() {
          let view = new View({
            projection: "EPSG:4326",
            center: [104.5, 32.5],
            zoom: 10,
          });
          let layer = new TileLayer({
            source: new OSM(),
            visible: true,
            zIndex: 1,
            name: "OSM",
          });
          this.map = new Map({
            layers: [],
            target: "map",
            view: view,
            controls: defaultControls().extend([new ZoomSlider()]),
          });
          this.map.addLayer(layer);
    
          // 加载 GeoServer 发布的 wms 服务
          this.wmsLayer = new TileLayer({
            extent: [
              103.8361315977032,
              31.98576887717054,
              105.00874802964982,
              33.04999219355907,
            ],
            source: new TileWMS({
              url: "http://localhost:8090/geoserver/sadmas/wms",
              params: { LAYERS: "sadmas:pop2015_pw_1_tif", TILED: true },
              serverType: "geoserver",
            }),
            visible: true,
            zIndex: 2,
            className: "wms",
          });
    
          this.map.addLayer(this.wmsLayer);
    
          this.map.on("singleclick", (e) => {
            var viewResolution = this.map.getView().getResolution();
            var url = this.wmsLayer
              .getSource()
              .getFeatureInfoUrl(e.coordinate, viewResolution, "EPSG:4326", {
                // INFO_FORMAT: "text/html", //输出为HTML字符串
                INFO_FORMAT: "application/json", //输出为json字符串
              });
            if (url) {
              fetch(url)
                .then(function (res) {
                  return res.text(); //返回Promise
                })
                .then((data) => {
                  let objData = JSON.parse(data);
                  this.info = objData.features[0].properties.GRAY_INDEX;
                });
            }
          });
    
          this.map.on("pointermove", (e) => {
            if (e.dragging) {
              return;
            }
            var pixel = this.map.getEventPixel(e.originalEvent);
            var hit = this.map.forEachLayerAtPixel(pixel, function () {
              return true;
            });
            this.map.getTargetElement().style.cursor = hit ? "pointer" : "";
          });
        },
      },
    };
    </script>
    <style scoped>
    #map {
      height: 100vh;
      width: 100vw;
    }
    </style>

发布的wms服务的URL内容为：[http://localhost:8090/geoserver/sadmas/wms?service=WMS&version=1.1.0&request=GetMap&layers=sadmas%3Apop2015\_pw\_1\_tif&bbox=103.8361315977032%2C31.98576887717054%2C105.00874802964982%2C33.04999219355907&width=768&height=697&srs=EPSG%3A4326&format=application/openlayers][http_localhost_8090_geoserver_sadmas_wms_service_WMS_version_1.1.0_request_GetMap_layers_sadmas_3Apop2015_pw_1_tif_bbox_103.8361315977032_2C31.98576887717054_2C105.00874802964982_2C33.04999219355907_width_768_height_697_srs_EPSG_3A4326_format_application_openlayers]

其中输出的json如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

这里是输出的json字符串格式，如果想要输出成HTML字符串格式，可用text/html。解析时用v-html指令就好

![20201027171642820.png][]

[https_openlayers.org_en_latest_examples_getfeatureinfo-tile.html]: https://openlayers.org/en/latest/examples/getfeatureinfo-tile.html
[20201027171527522.gif]: /images/20210725/66432435b36249a1b8927cbdceb9a1f0.png
[http_localhost_8090_geoserver_sadmas_wms_service_WMS_version_1.1.0_request_GetMap_layers_sadmas_3Apop2015_pw_1_tif_bbox_103.8361315977032_2C31.98576887717054_2C105.00874802964982_2C33.04999219355907_width_768_height_697_srs_EPSG_3A4326_format_application_openlayers]: http://localhost:8090/geoserver/sadmas/wms?service=WMS&version=1.1.0&request=GetMap&layers=sadmas%3Apop2015_pw_1_tif&bbox=103.8361315977032%2C31.98576887717054%2C105.00874802964982%2C33.04999219355907&width=768&height=697&srs=EPSG%3A4326&format=application/openlayers
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/a3c442a79d934dcbb99012e86a174e2d.png
[20201027171642820.png]: /images/20210725/cc7221eb3a8a47bca249ea37f67dae8c.png