openlayers 加载天地图 谷歌地图 高德地图

1.加载天地图

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {defaults as defaultControls} from 'ol/control.js';
import {getWidth, getTopLeft} from 'ol/extent.js';
import TileLayer from 'ol/layer/Tile.js';
import {get as getProjection} from 'ol/proj.js';
import OSM from 'ol/source/OSM.js';
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';


var projection = getProjection('EPSG:3857');
var projectionExtent = projection.getExtent();
var size = getWidth(projectionExtent) / 256;
var resolutions = new Array(18);
var matrixIds = new Array(18);
for (var z = 1; z < 19; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}

var webKey = 'f50a580b75898a7e26dca2dfe3ad910e';

var wmtsUrl_1 = 'http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk='; //矢量底图
var wmtsUrl_2 = 'http://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk='; //矢量注记

var wmtsUrl_3 = 'http://t{0-7}.tianditu.gov.cn/img_w/wmts?tk='; //影像底图
var wmtsUrl_4 = 'http://t{0-7}.tianditu.gov.cn/cia_w/wmts?tk='; //影像注记

var wmtsUrl_5 = 'http://t{0-7}.tianditu.gov.cn/ter_w/wmts?tk='; //地形底图
var wmtsUrl_6 = 'http://t{0-7}.tianditu.gov.cn/cta_w/wmts?tk='; //地形注记

var wmtsUrl_7 = 'http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?tk='; //境界（省级以上）
var wmtsUrl_8 = 'http://t{0-7}.tianditu.gov.cn/eva_w/wmts?tk='; //矢量英文注记
var wmtsUrl_9 = 'http://t{0-7}.tianditu.gov.cn/eia_w/wmts?tk='; //影像英文注记

//这里如果加载其他类型的地图，如影像图，除了改变url外还需要更改layer的值，layer的值可以在url中找到。
var map1 = new Map({
layers: [
new TileLayer({
opacity: 0.7,
source: new WMTS({
url: wmtsUrl_1 + webKey,
layer: 'vec',
matrixSet: 'w',
format: 'tiles',
style: 'default',
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
}),
new TileLayer({
opacity: 0.7,
source: new WMTS({
url: wmtsUrl_2 + webKey,
layer: 'cva',
matrixSet: 'w',
format: 'tiles',
style: 'default',
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
})
],
target: 'map1',
view: new View({
center: [-11158582, 4813697],
zoom: 4
})
});

2.加载谷歌地图

//这里url：http://www.google.cn/maps/vt?lyrs=s,h&gl=CN&x={x}&y={y}&z={z}，中的lyrs=s,h。s和h表示图层，这里s表示影像图，h表示注记。如果单独只加载某个图层则只写一个值即可。其他类型图层的标志这里没有做统计，需要的时候自己去查。

        var backLayer = new TileLayer({

            source: new XYZ({

                url: 'http://www.google.cn/maps/vt?lyrs=s,h&gl=CN&x={x}&y={y}&z={z}'

            })

        });

        var view = new View({

            center: [106.78508, 29.61453],

            projection: 'EPSG:4326',

            zoom: 16,

            minZoom:15,

            //maxZoom:16,

            extent:[106.77001,29.60343,106.79648,29.62483]

        });

        this.map = new Map({

            controls: defaultControls({

                attribution: false,

                rotate: false,

                zoom: false

            }),

            layers: [backLayer],

            view: view,

            target: 'map',

            

        });

3.加载高德地图

//url中style的值决定了加载的高德地图的图层类型，这里的style=7是正常高德地图默认的矢量图层

var backLayer = new TileLayer({
source: new XYZ({
crossOrigin: 'anonymous',
url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
});

var view = new View({
//center: [11850000, 3458367],
center: [107.05, 29.57],
projection: 'EPSG:4326',
zoom: 10,
//minZoom:9,
//maxZoom:16,
//extent:[11850000,3458367,12850000,3758367]
});

_this.view = view;
_this.map = new Map({
controls: defaultControls({
attribution: false,
rotate: false,
zoom: false
}),
layers: [backLayer],
view: view,
target: 'map',
});