(vue)openLayer加载天地图 实现切换地图类型（地图影像）、更改地图色调（蓝色）等效果

一、 首先安装openLayer

npm i -S ol

package.json文件中出现版本号即安装成功。

二、在地图页面中加载天地图

①需要先在天地图官网注册key值（导航栏中：开发资源>网页API，进入页面后选择右上角 控制台>创建新应用，根据要求填写完成后复制key值）

②在页面中引入天地图

③修改地图类型核心代码：

            
              
标准图层
              
卫星图
            

export default{
  data() {
    return {
      mapTD:null;
      basemap:1//1:标准图层 2:卫星图层
    }
  }
  methods: {
    //切换天地图图层类型
    changeMapType(){
      if(this.basemap==1){//显示标准图层
        tianditu_vec_w.setVisible(true);
        tianditu_cva_w.setVisible(true);
        tianditu_img_w.setVisible(false);
        tianditu_cia_w.setVisible(false);
      }else{//显示卫星图层
        tianditu_vec_w.setVisible(false);
        tianditu_cva_w.setVisible(false);
        tianditu_img_w.setVisible(true);
        tianditu_cia_w.setVisible(true);
      }
    },
  }
}

整体效果图：

④ 修改地图底色---在需要改色的图层定义中增加className属性，根据需求修改具体的数值（css类需要在App.vue文件的style中修改），关键代码如下：

initMap(){
   ....
    //修改该图层底色
      tianditu_vec_w=new TileLayer({
        title: '天地图矢量图层',
        className:'blueLayer',//增加className属性
        source: new XYZ({
          visible: true,
          wrapX: false,
          url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=key值'
      })
      ...
}

在App.vue中增加CSS类

.blueLayer{
    filter:grayscale(100%) sepia(51%) invert(100%) saturate(350%) ;
}