首先亿汞，openlayers5使用了ES6語法，使用的js文件需要import一個一個引入揪阿。如果想繼續(xù)使用<script>標簽引入的方式疗我，在調(diào)用方法時使用ol.ClassName.Function，需要去官網(wǎng)單獨下載ol.js及ol.css南捂，npm安裝的ol依賴是不包含ol.js文件的吴裤。本文代碼中完全使用ES6語法并遵從ESlint代碼格式化規(guī)范。

1溺健、確定圖層切片名及大小

根據(jù)GeoServer服務(wù)發(fā)布地圖的信息麦牺，點擊左側(cè)菜單欄的“GridSets”項，選中發(fā)布的地圖查看詳細信息鞭缭。

2剖膳、代碼

<template>
  <div id="map" ref="rootmap" class="map">

  </div>
</template>

<script>
  import 'ol/ol.css';
  import { Map, View } from 'ol';
  import { get as getProjection } from 'ol/proj.js';
  import TileLayer from 'ol/layer/Tile.js';
  import WMTS from 'ol/source/WMTS.js';
  import { getTopLeft } from 'ol/extent.js';
  import TileGridWMTS from 'ol/tilegrid/WMTS.js';

  export default {
    data() {
      return {
        map: null
      }
    },
    mounted() {
      const projection = getProjection('EPSG:4326'); // 設(shè)置地圖投影
      const extent = projection.getExtent(); // 地圖范圍
      // 切片名，可以根據(jù)后臺縮放等級數(shù)量減少岭辣，但必須與切片大小一一對應(yīng)
      const matrixIds = ['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'];
      // 切片大小
      const resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5,
        4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];

      this.map = new Map({
        target: 'map', // 綁定容器
        view: new View({ // 視圖
          center: [114.2548, 30.61795], // 中心點坐標
          zoom: 12, // 縮放等級吱晒，對應(yīng)切片名數(shù)組的第11個
          projection: 'EPSG:4326' // 坐標系
        }),
        layers: [
          new TileLayer({
            source: new WMTS({
              // geoserver發(fā)布地圖的url，發(fā)布成功后在瀏覽器調(diào)試工具network查看詳細的url和屬性
              url: 'http://localhost:8083/geoserver/gwc/service/wmts', 
              layer: 'MyMap:wuhan',  // 對應(yīng)圖層信息
              matrixSet: 'EPSG:4326', // 坐標系
              format: 'image/png', // 格式
              projection,
              tileGrid: new TileGridWMTS({
                origin: getTopLeft(extent), // 坐標原點
                resolutions,
                matrixIds
              }),
              wrapX: true // 限制地圖在X軸方向重復(fù)沦童，例如地球的橫向連貫圖
            })
          })
        ]
      })
    }
  }
</script>
<style>
  .map{
    height:100%;
  }
</style>

3仑濒、展示

4、總結(jié)：武漢的河流湖泊真多