openlayers6地图离线开发demo-在线天地图wmts服务地图初始化

oliver666666

已于 2023-05-09 14:07:38 修改

阅读量492

点赞数

分类专栏：地图离线开发之openlayers6+vue+地图离线资源文章标签： vue.js javascript ecmascript

于 2022-12-01 10:40:33 首次发布

本文链接：https://blog.csdn.net/oliver666666/article/details/128127708

版权

地图离线开发之openlayers6+vue+地图离线资源专栏收录该内容

5 篇文章 0 订阅

订阅专栏

initTiandituWMTSMap() {
  registerProj('EPSG:4490')
  this.map = new Map({
    layers: [],
    target: 'olMap',
    view: new View({
      center: transform([118.182570, 24.487530], 'EPSG:4490', 'EPSG:3857'),
      zoom: this.zoom
    })
  })
  const projection = getProjection('EPSG:3857')
  const projectionExtent = projection.getExtent()
  const size = getWidth(projectionExtent) / 256
  const resolutions = new Array(18)
  const matrixIds = new Array(18)
  for (let z = 1; z < 19; ++z) {
    // generate resolutions and matrixIds arrays for this WMTS
    resolutions[z] = size / Math.pow(2, z)
    matrixIds[z] = z
  }
  const taindiLayer = new TileLayer({
    opacity: 0.7,
    source: new WMTS({
      url: 'http://t0.tianditu.gov.cn/vec_w/wmts?tk=10f2d5da71582b8d105e7535da8e6a1c',
      layer: 'vec', // 注意每个图层这里不同
      matrixSet: 'w',
      format: 'tiles',
      style: 'default',
      projection: projection,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: matrixIds
      }),
      wrapX: true
    })
  })
  this.map.addLayer(taindiLayer)
  /* const taindiLayerFont = new TileLayer({
      opacity: 0.7,
      source: new WMTS({
        url: 'http://t0.tianditu.gov.cn/cva_w/wmts?tk=10f2d5da71582b8d105e7535da8e6a1c',
        layer: 'cva', //注意每个图层这里不同
        matrixSet: 'w',
        format: 'tiles',
        style: 'default',
        projection: projection,
        tileGrid: new WMTSTileGrid({
          origin: getTopLeft(projectionExtent),
          resolutions: resolutions,
          matrixIds: matrixIds,
        }),
        wrapX: true,
      }),
    });
    this.map.addLayer(taindiLayerFont);*/
  const fontLayer = this.crtLayerXYZ()
  this.map.addLayer(fontLayer)
},

// 创建图层(xyz方式，推荐使用) 图层方式有多种，官方推荐xyz
crtLayerXYZ() {
  const source = new XYZ({
    url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=10f2d5da71582b8d105e7535da8e6a1c',
    crossOrigin: 'anonymous'
  })
  const layer = new TileLayer({
    source,
    opacity: 1
  })
  layer.id = 'cva_ccva_c'
  return layer
},