(Vue)使用openlayers添加wtms服务

最新推荐文章于 2024-07-26 22:40:26 发布

嘿Dorothy

最新推荐文章于 2024-07-26 22:40:26 发布

阅读量636

点赞数

分类专栏： vue JS 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42453890/article/details/121093645

版权

vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

import "ol/ol.css";
  import {
    Map,
    View
  } from "ol";
import {
    Vector as VectorLayer,
    Tile
  } from 'ol/layer'
import {
    Vector as VectorSource,
    OSM,
    WMTS
  } from 'ol/source';
  import WMTSTileGrid from 'ol/tilegrid/WMTS'

  import {
    get as getProjection
  } from 'ol/proj'
  import {
    getWidth
  } from 'ol/extent'

 methods: {
      layerMap() {

        var projection = getProjection('EPSG:4326'); //投影坐标系信息
        var projectionExtent = projection.getExtent(); //投影坐标系范围
        var size = getWidth(projectionExtent) / 256; //分辨率
        var resolutions = new Array(15); //分辨率数组
        var matrixIds = new Array(15); //缩放等级数组
        for (var i = 1; i < 16; i++) {
          resolutions[i] = size / Math.pow(2, i);
          matrixIds[i] = 'EPSG:4326:' + (i - 1);
        }

        var layer = new Tile({
          source: new WMTS({
            url: 'http://127.0.0.1:8083/geoserver/gwc/service/wmts',
            // layer: 'cesiumDome:2010_DoubleGrowingSeason_1_ASI',  //图层名称
            layer: 'ASI_2010',  //图层组名称
            matrixSet: 'EPSG:4326', //投影坐标系设置矩阵
            format: 'image/png', //影像格式
            projection: projection, //投影坐标系
            //瓦片网格
            tileGrid: new WMTSTileGrid({
              origin: [-180.0, 90.0], //原点
              extent: projectionExtent, //范围，与视图对应，此处也可用[-180.0,-90.0,180.0,90.0]
              resolutions: resolutions, //分辨率数组
              matrixIds: matrixIds //缩放等级数组，需要与分辨率数组相匹配。
            }),
            wrapX: true //水平包裹
          }),
        });

        let tileOSM = new Tile({
          source: new OSM()
        });  //默认底图OSM

        let views = new View({
          center: [116.46, 39.92],
          projection: "EPSG:4326",
          zoom: 5,
        });
        let map = new Map({
          layers: [tileOSM],
          view: views,
          target: 'map',
        });  //初始化地图

        map.addLayer(layer);  //添加WMTS图层

      },
}