openlayers載入天地圖
阿新 • • 發佈:2020-12-01
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, });