改地图颜色

<template>
  <div class="test1-page">
    <div id="map-container-div"></div>
  </div>
</template>

<script>
import {Map, View} from "ol";
import TileLayer from "ol/layer/Tile";
import {fromLonLat} from "ol/proj";
import {Raster, XYZ} from "ol/source";
import ImageLayer from "ol/layer/Image";
import {getTDT_TK} from "@/utils/func";

export default {
  name: '',
  data() {
    return {
      map: null,
      projectionStr: 'EPSG:3857'
    }
  },
  mounted() {
    this.initMap()

    // 创建xyz图层
    // let xyzLayer = this.createXYZLayer('https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}');
    // let xyzLayer = this.createXYZLayer('http://static.my.com/map-tile/arcgis-img/{z}/{x}/{y}.jpg');
    // this.map.addLayer(xyzLayer)


    // 创建带颜色的xyz图层
    let layer = this.create_color_layer('http://t{1-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&LAYER=img&REQUEST=GetTile&VERSION=1.0.0&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILE' + 'ROW={y}&TILE' + 'COL={x}&tk=' + getTDT_TK())
    this.map.addLayer(layer)
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'map-container-div',
        layers: [],
        view: new View({
          projection: this.projectionStr,
          center: fromLonLat([107.00830979189323, 40.329536827760066]),
          zoom: 3,
        }),
        controls: [],
      });
    },
    createXYZLayer(url, projection = 'EPSG:3857') {
      return new TileLayer({
        source: new XYZ({
          url,
          projection,
        }),
      });
    },
    create_color_layer(url, projection = 'EPSG:3857') {
      let layer = new ImageLayer({
        source: this.getSourceFromTileLayer(new TileLayer({
          crossOrigin: 'anonymous',
          source: this.getXYZSource(url)
        })),
        visible: true,
      });
      return layer
    },

    getXYZSource(url) {
      let s = new XYZ({url, crossOrigin: 'anonymous'});
      console.log(s);
      return s
    },

    getSourceFromTileLayer(layer) {

      let gT = function () {
        return 'blue'
        // return 'darkgreen'
      }

      let rF = (pixelsTemp, type) => {
        for (let i = 0; i < pixelsTemp.length; i += 4) {
          let r = pixelsTemp[i];
          let g = pixelsTemp[i + 1];
          let b = pixelsTemp[i + 2];
          //运用图像学公式，设置灰度值
          let grey = r * 0.3 + g * 0.59 + b * 0.11;

          //将rgb的值替换为灰度值
          if (type === 'gray') {
            pixelsTemp[i] = grey;
            pixelsTemp[i + 1] = grey;
            pixelsTemp[i + 2] = grey;
          } else if (type === 'blue') {
            pixelsTemp[i] = 55 - grey;
            pixelsTemp[i + 1] = 255 - grey;
            pixelsTemp[i + 2] = 305 - grey;
          } else if (type === 'darkgreen') {
            pixelsTemp[i] = 33 - grey;
            pixelsTemp[i + 1] = 255 - grey;
            pixelsTemp[i + 2] = 255 - grey;
          } else if (type === 'black') {
            pixelsTemp[i] = 255 - pixelsTemp[i];
            pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
            pixelsTemp[i + 2] = 255 - pixelsTemp[i + 2];
          } else if (type === 'reverse') {
            pixelsTemp[i] = 255 - pixelsTemp[i];
            pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
            pixelsTemp[i + 2] = 255 - pixelsTemp[i + 2];
          } else {
            pixelsTemp[i] = 55 - grey;
            pixelsTemp[i + 1] = 255 - grey;
            pixelsTemp[i + 2] = 305 - grey;
          }
        }
      };
      let reverseFunc = rF;
      let getType = gT;
      return new Raster({
        sources: [
          layer,
        ],
        operationType: 'image',
        operation: function (pixels) {
          reverseFunc(pixels[0].data, getType())
          return pixels[0];
        },
        threads: 10,
        lib: {
          reverseFunc: rF,
          getType: gT
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.test1-page {
  #map-container-div {
    width: 100vw;
    height: 100vh;
    border: 10px solid gray;
    box-sizing: border-box;
  }
}
</style>