openlayers加載天地圖

1. 創建WMS對象引入天地圖瓦片圖工具JS

// 引入

import { getTopLeft, getWidth } from "ol/extent";

import TileLayer from "ol/layer/Tile";

import WMTS from "ol/source/WMTS";

import WMTSTileGrid from "ol/tilegrid/WMTS";

import { get } from "ol/proj";



// 全局變量

let key = ""

let projection = get("EPSG:4326");

let projectionExtent = projection.getExtent();

let size = getWidth(projectionExtent) / 256;



/**

 \* 私有方法

 */

function getResolutions() {

  let resolutions = [];

  for (let z = 2; z < 19; ++z) {

    resolutions[z] = size / Math.pow(2, z);

  }

  return resolutions

}


export function getProjection() {
  return projection
}


// WMTS 形式

function getWMTSLayer(url,layer) {

  return new TileLayer({

    source: new WMTS({

      name: "中國",

      url:url,

      layer: layer,

      style: "default",

      matrixSet: "c",

      format: "tiles",

      wrapX: true,

      tileGrid: new WMTSTileGrid({

        origin: getTopLeft(projectionExtent),

        resolutions: getResolutions(),

        matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],

      }),

    }),

  })

}



/**

 \* 矢量底圖 + 矢量注記

 */

export function vec_c() {

  return [

    getWMTSLayer('http://t{0-7}.tianditu.gov.cn/vec_c/wmts?tk='+ key,'vec'),

    getWMTSLayer('http://t{0-7}.tianditu.gov.cn/cva_c/wmts?tk='+ key,'cva')

  ]

}





/**

 \* 影像底圖 + 影像注記

 */

export function img_c() {

  return [

    getWMTSLayer('http://t{0-7}.tianditu.gov.cn/img_c/wmts?tk='+ key,'img'),

    getWMTSLayer('http://t{0-7}.tianditu.gov.cn/cia_c/wmts?tk='+ key,'cia')

  ]

}

2. 創建map地圖

// 引入
import { Map, View } from "ol";
import { getProjection, vec_c, img_c } from "上面的封裝JS";



let view = new View({
  center: [116.75199, 36.55358],
  projection: getProjection(),
  zoom: 8,
  maxZoom: 17,
  minZoom: 1,
  enableRotation: false,
});



var map = new Map({
  controls: defaults({
    zoom: false,
    rotate: false,
  }),
  layers: [...vec_c()],
  target: "map",
  view: view,
});