Vue中使用geoserver中的wmts(EPSG:900913)

1、导入openlayers相关方法

import TileLayer from "ol/layer/Tile"

import { WMTS } from 'ol/source'

import { optionsFromCapabilities } from 'ol/source/WMTS';

import WMTSCapabilities from 'ol/format/WMTSCapabilities';

2、封装调用wmts方法

var streetmap = function(success) {

    const namespace = “xxx”;

    const layername = “xxx”;

    //成功后返回

    var parser = new WMTSCapabilities();

    fetch(“http://127.0.0.1:8090/geoserver/gwc/service/wmts?REQUEST=GetCapabilities”)

        .then(response => response.text())

        .then(text => {

            var result = parser.read(text);

            var options = optionsFromCapabilities(result, {

                layer: namespace + ":" + layername,

                matrixSet: "EPSG:900913"

            });

            var maplayer = new TileLayer({

                name: layername,

                source: new WMTS(options)

            });

            success([maplayer])

        })

}

var mapconfig = {

    streetmap: streetmap

};

export default mapconfig

3、Vue调用

import mapconfig from "@/utils/mapConfig";

 mapconfig.streetmap((res) => {

      let view = new View({

        projection: "EPSG:4326", //使用这个坐标系

        zoom: 15,

        center: [118.10365, 30.16098],

        duration: 1000,

      });

      this.map = new Map({

        target: "map",

        layers: res,

        view: view,

      });

    });