vue之openlayers天地图的加载

一、矢量天地图

（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
     }
}