(Vue)openlayers+geoserver获取栅格值

目录

1.发布服务

2.添加图层组

3.添加到地图 

4.获取当前点击的栅格值

​

5. 最终代码

---

1.发布服务

我的图像是tiff格式，选择geotiff数据源

选择工作区、数据源名称和数据源，点击保存 

 点击发布

 修改基本参数

 如果数据源正确，以下数据会自动生成，点击保存

 查看对应服务

 

2.添加图层组

项目需要要求将多个服务同时显示在地图上，可以建立一个图层组

 

 

 

3.添加到地图 

使用openlayers添加wtms服务https://blog.csdn.net/qq_42453890/article/details/121093645

4.获取当前点击的栅格值

在图层预览页面右键点击查看源代码，找到如下代码

这一块代码即是监听地图的点击事件，在点击后左下角会出现当前的灰度值

将这块代码稍作修改即可

5. 最终代码

方便起见，我将代码封装后在vue文件中引用

addlayer.js

  import "ol/ol.css";
  import {
    View
  } from "ol";
  import {
    Tile
  } from 'ol/layer'
  import {
    WMTS
  } from 'ol/source';
  import WMTSTileGrid from 'ol/tilegrid/WMTS'

  import {
    get as getProjection
  } from 'ol/proj'
  import {
    getWidth
  } from 'ol/extent'

  export function addLayer(map,year){
    var baseUrl = 'http://127.0.0.1:8083/geoserver/gwc/service/wmts';
    var projection = getProjection('EPSG:4326'); //投影坐标系信息
    var projectionExtent = projection.getExtent(); //投影坐标系范围
    var size = getWidth(projectionExtent) / 256; //分辨率
    var resolutions = new Array(15); //分辨率数组
    var matrixIds = new Array(15); //缩放等级数组
    for (var i = 1; i < 16; i++) {
      resolutions[i - 1] = size / Math.pow(2, i);
      matrixIds[i - 1] = 'EPSG:4326:' + (i - 1);
    }

    var source = new WMTS({
      url: baseUrl,
      layer: 'ASI_'+year,
      matrixSet: 'EPSG:4326', //投影坐标系设置矩阵
      format: 'image/png', //影像格式
      projection: projection, //投影坐标系
      tileGrid: new WMTSTileGrid({
        tileSize: [256, 256],
        origin: [-180.0, 90.0], //原点
        extent: projectionExtent, //范围，与视图对应，此处也可用[-180.0,-90.0,180.0,90.0]
        resolutions: resolutions, //分辨率数组
        matrixIds: matrixIds //缩放等级数组，需要与分辨率数组相匹配。
      }),
      wrapX: true
    });

    var layer = new Tile({
      source: source
    });

    let views = new View({
      center: [112.66, 29.92],
      projection: "EPSG:4326",
      zoom: 9,
    });

    map.addLayer(layer);

    var resolution = views.getResolution();
    var tilegrid = source.getTileGrid();
    var tileResolutions = tilegrid.getResolutions();
    var zoomIdx, diff = Infinity;

    for (var i = 0; i < tileResolutions.length; i++) {
      var tileResolution = tileResolutions[i];
      var diffP = Math.abs(resolution - tileResolution);
      if (diffP < diff) {
        diff = diffP;
        zoomIdx = i;
      }
      if (tileResolution < resolution) {
        break;
      }
    }

    var tileSize = tilegrid.getTileSize(zoomIdx);
    var tileOrigin = tilegrid.getOrigin(zoomIdx);

    var layerName = 'ASI_'+year;   //图层或者图层组的名称
    var style = '';
    var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5',
      'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12',
      'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18',
      'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'
    ];
    var gridsetName = 'EPSG:4326';
    var format = 'image/png';
    

    var params = {
      'VERSION': '1.0.0',
      'LAYER': layerName,
      'STYLE': style,
      'TILEMATRIX': gridNames,
      'TILEMATRIXSET': gridsetName,
      'SERVICE': 'WMTS',
      'FORMAT': format
    };

    map.on('singleclick', function (evt) {
      // console.log(evt);
      var fx = (evt.coordinate[0] - tileOrigin[0]) / (resolution * tileSize[0]);
      var fy = (tileOrigin[1] - evt.coordinate[1]) / (resolution * tileSize[1]);
      var matrixIds = tilegrid.getMatrixIds()[zoomIdx];

      var infoFormat = 'text/html';
      var tileCol = Math.floor(fx);
      var tileRow = Math.floor(fy);
      var tileI = Math.floor((fx - tileCol) * tileSize[0]);
      var tileJ = Math.floor((fy - tileRow) * tileSize[1]);

      var url = baseUrl+'?'
      for (var param in params) {
        if (param.toUpperCase() == 'TILEMATRIX') {
          url = url + 'TILEMATRIX=' + matrixIds + '&';
        } else {
          url = url + param + '=' + params[param] + '&';
        }
      }
      url = url +
        'SERVICE=WMTS&REQUEST=GetFeatureInfo' +
        '&INFOFORMAT=' + infoFormat +
        '&TileCol=' + tileCol +
        '&TileRow=' + tileRow +
        '&I=' + tileI +
        '&J=' + tileJ;

      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function (e) {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
          if (xmlhttp.status == 200) {
            // 使用正则表达式获取<td>xxx</td>中的值，即是灰度值
            // \ 转义字符
            // . 匹配除换行符之外的任何单个字符
            // + 匹配前面一个表达式1次或者多次
            let reg1 = /<td>(.+)<\/td>/g
            console.log(reg1.exec(xmlhttp.responseText)[1]);  //灰度值

          } else {
            console.log('error')
          }
        }
      }

      //拼接字符串url，通过get方式访问接口链接，返回结果
      xmlhttp.open('GET',url,true);
      xmlhttp.send();
    });
  }

  export default{
    addLayer
  }

 mapBox.vue

 import {
    addLayer
  } from '../../assets/js/addLayer'


 layerMap() {
        let tileOSM = new Tile({
          source: new OSM()
        });

        let views = new View({
          center: [113.06, 31.32],
          projection: "EPSG:4326",
          zoom: 8,
        });
        var map = new Map({
          layers: [tileOSM],
          view: views,
          target: 'map',
        });

        //调用封装好的函数
        //第一个参数是初始化的地图，第二个参数是年份
        //我的图层组命名方式是‘ASI_’+年份，根据自己的命名修改
        addLayer(map, '2011');
      },