# vue 项目 openlayer 加载 WMS 图层

原创

JKJSCERUIVIR 2022-06-23 12:47:25 博主文章分类：Openlayers ©著作权

文章标签 图层加载 git 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者JKJSCERUIVIR的原创作品，请联系作者获取转载授权，否则将追究法律责任

vue 项目 openlayer 加载 WMS 图层

这个是啥子情况呢，是我用 openlayer 加载 geoserve 发布的图层，然后发布出来的图层是 wms 的，所以说这篇博文主要是用来操作 vue 项目使用 openlayers 加载 geoserve 发布的 wms 图层。

geoserve 发布的图层地址

# vue 项目 openlayer 加载 WMS 图层_图层
上面的就是 geoserve 发不出来的 WMS 图层连接。

openlayer 加载 WMS 图层

具体我不知道为啥这样写哈，但是我这样设置是可以加载出来的啊！

const projection = olProj.get('EPSG:900913');
        const projectionExtent = projection.getExtent();
        const size = olExtent.getWidth(projectionExtent) / 256;
        const resolutions = new Array(19);
        const matrixIds = new Array(19);
        for (let z = 0; z < 19; ++z) {
          resolutions[z] = size / Math.pow(2, z);
          matrixIds[z] = "EPSG:900913:" + z;
        }
        const layerName = 'map:china_all'  // 提换成自己的
        let wmtsSource = new WMTS({
          url: 'http://127.0.0.1:8080/geoserver/gwc/service/wmts',  // 替换成自己服务器的
          layer: layerName,
          matrixSet: 'EPSG:900913',
          format: 'image/png',
          projection: projection,
          tileGrid: new WMTSTileGrid({
            origin: olExtent.getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds,
          }),
          style: '',
          wrapX: true,
        });
        let wmtsService = new TileLayer({
          source: wmtsSource,
          zIndex: 0,
        });
        this.mapLayers = [wmtsService]
        map.addLayer(wmtsService)