一、矢量天地图
(1)导入依赖的文件
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {XYZ,TileWMS,Vector as VectorSource,ImageWMS,Cluster} from 'ol/source.js';
(2)矢量天地图的函数封装
/**
* 说明:加载天地图矢量服务
* @param {*} map 必填,对象,地图对象
*/
export function tiandituVetorMap(map){
/**
* 加载天地图的矢量图层
*/
var TiandiMap_vec = new TileLayer({
name: '天地图矢量图层',
source: new XYZ({
url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=天地图申请的key', //mapkey为天地图密钥
wrapX: false,
//设置crossOrigin
}),
});
/**
* 添加天地图适量的标注信息
*/
var TiandiMap_cva = new TileLayer({
name: '天地图矢量注记图层',
source: new XYZ({
// 设置crossOrigin
// crossOrigin: 'anonymous',
url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=天地图申请的key', //mapkey为天地图密钥
wrapX: false,
}),
});
// 添加到地图上
map.addLayer(TiandiMap_vec);
map.addLayer(TiandiMap_cva);
// 返回图层名称
return {
TiandiMap_vec,TiandiMap_cva
}
}
(3)影像天地图
/**
* 说明:加载天地图影像服务
* @param {*} map 必填,对象,地图对象
*/
export function tiandituImgMap(map){
var TiandiMap_img = new TileLayer({
name: "天地图影像图层",
source: new XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=天地图申请的key" ,//parent.TiandituKey()为天地图密钥
wrapX: false,
})
});
var TiandiMap_cia = new TileLayer({
name: "天地图影像注记图层",
source: new XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=天地图申请的key" ,//parent.TiandituKey()为天地图密钥
wrapX: false,
})
});
// 添加到地图上
map.addLayer(TiandiMap_img);
map.addLayer(TiandiMap_cia);
// 返回图层名称
return {
TiandiMap_img,TiandiMap_cia
}
}