OpenLayers加载GeoServer瓦片

以下是我觉得很有帮助的几篇文章 希望可以帮助到大家

openlayers官网:https://openlayers.org/

openlayers实战:http://www.voidcn.com/article/p-bdckckhs-un.html 

使用:https://blog.csdn.net/weixin_40184249/article/details/84615192

博主说这是加载WMTS/WMS的最新使用方法,我暂时没用这种,待验证:https://blog.csdn.net/a571574085/article/details/107640918?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control

知乎上GIS专栏还有一些分享原的文章,有空值得研究.

大部分数据信息都可以在生成切片的代码中找到,值得注意的是:baseUrl在官方文档中为'..service/wmts'  写成这样是不可以的,正确的baseUrl应该为:地址+端口号一直到demo之前  

以下是我的代码 如有错误,请指正,谢谢!

<template>
  <div>  <div id="map" class="map"></div></div>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import {getTopLeft, getWidth} from 'ol/extent';
import * as ol from 'ol'
export default {
  name: "siwei",
  mounted() {
    var gridsetName = 'EPSG:900XXX';
    var gridNames = ['EPSG:900XXX:0', 'EPSG:900XXX:1', 'EPSG:900XXX:2', 'EPSG:900XXX:3', 'EPSG:900XXX:4', 'EPSG:900XXX:5', 'EPSG:900XXX:6', 'EPSG:900XXX:7', 'EPSG:900XXX:8', 'EPSG:900XXX:9', 'EPSG:900XXX:10', 'EPSG:900XXX:11', 'EPSG:900XXX:12', 'EPSG:900XXX:13'];
    var baseUrl = 'http://xxx.xxx.x.xxx:8080/geoserver/gwc/service/wmts';
    var url = baseUrl+'?'
    var style = '';
    var format = 'image/png';
    var infoFormat = 'text/html';
    var layerName = 'XXXXXXXXXX';
    var projection = new ol.proj.Projection({
      code: 'EPSG:900XXXX',
      units: 'm',
      axisOrientation: 'neu'
    });
    var resolutions = [];
    var baseParams = ['VERSION','LAYER','STYLE','TILEMATRIX','TILEMATRIXSET','SERVICE','FORMAT'];

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


    var matrixIds = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18', 'EPSG:900913:19', 'EPSG:900913:20'];
    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          opacity: 1,
          source: new ol.source.WMTS({
            url:url,
            layer: params['LAYER'],
            matrixSet: params['TILEMATRIXSET'],
            format: params['FORMAT'],
            projection: projection,
            tileGrid: new ol.tilegrid.WMTS({
              tileSize: [256,256],
              extent: [-2.003750834E7,-2.003750834E7,2.003750834E7,2.003750834E7],
              // 开始切片的起始点坐标
              origin: [-2.003750834E7, 2.003750834E7],
              // 地图的放大层级
              resolutions: resolutions,
              matrixIds: params['TILEMATRIX']
            }),
            style: params['STYLE'],
            wrapX: true
          }),
        }) ],
      target: 'map',
      view: new ol.View({
        center: [0, 0],
        zoom: 2,
        resolutions: resolutions,
        projection: projection,
        extent: [-20037508.34,-20037508.34,20037508.34,20037508.34]
      }),
    });
    map.getView().fit([12546234.37810778,4354833.600145315,12606635.944193996,4402956.315614975], map.getSize());
  },

}
</script>

<style scoped>
.map {
   1200px;
  height: 1200px;
}
</style>