vue+openlayers5展示GeoServer发布的WMTS地图

首先，openlayers5使用了ES6语法，使用的js文件需要import一个一个引入。如果想继续使用<script>标签引入的方式，在调用方法时使用ol.ClassName.Function，需要去官网单独下载ol.js及ol.css，npm安装的ol依赖是不包含ol.js文件的。本文代码中完全使用ES6语法并遵从ESlint代码格式化规范。

1、确定图层切片名及大小

根据GeoServer服务发布地图的信息，点击左侧菜单栏的“GridSets”项，选中发布的地图查看详细信息。

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'); // 设置地图投影
      const extent = projection.getExtent(); // 地图范围
      // 切片名，可以根据后台缩放等级数量减少，但必须与切片大小一一对应
      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, // 缩放等级，对应切片名数组的第11个
          projection: 'EPSG:4326' // 坐标系
        }),
        layers: [
          new TileLayer({
            source: new WMTS({
              // geoserver发布地图的url，发布成功后在浏览器调试工具network查看详细的url和属性
              url: 'http://localhost:8083/geoserver/gwc/service/wmts', 
              layer: 'MyMap:wuhan',  // 对应图层信息
              matrixSet: 'EPSG:4326', // 坐标系
              format: 'image/png', // 格式
              projection,
              tileGrid: new TileGridWMTS({
                origin: getTopLeft(extent), // 坐标原点
                resolutions,
                matrixIds
              }),
              wrapX: true // 限制地图在X轴方向重复，例如地球的横向连贯图
            })
          })
        ]
      })
    }
  }
</script>
<style>
  .map{
    height:100%;
  }
</style>

3、展示

4、总结：武汉的河流湖泊真多

最后编辑于：2019.04.23 16:27:10