使用openlayers加载OSM街道图，谷歌影像图以及天地图地形图

爱被打了一巴掌 2021-07-25 19:42 1095阅读 0赞

**目录**

一，OSM街道图

1，安装ol

2，在components文件夹下面新建olmap.vue

3，运行结果

二，谷歌影像图

三，天地图地形图

--------------------

# 一，OSM街道图 （**匹配4326**） #

## 1，安装ol ##

cnpm i ol -S

## 2，在components文件夹下面新建olmap.vue ##

<template>
        <div id="map"></div>
    </template>
    
    <script>
    import 'ol/ol.css'
    import {Map,View} from 'ol'
    import TileLayer from 'ol/layer/Tile'
    import OSM from 'ol/source/OSM'
    
    export default {
      data() {
        return {
            
        };
      },
      mounted() {
        new Map({
          target: "map",
          layers: [
            new TileLayer({
              source: new OSM()
            })
          ],
          view: new View({
            projection: "EPSG:4326",    //使用这个坐标系
            center: [104.704968,31.540962],  //西南科技大学
            zoom: 15
          })
        });
      }
    };
    </script>
    
    <style>
       #map {
      height: 100vh;
      width: 100vw;
    }
    </style>

修改APP.vue如下

<template>
      <div id="app">
        <olmap/>
        <router-view/>
      </div>
    </template>
    
    <script>
    import olmap from '@/components/olmap.vue'
    export default {
      name: 'App',
      components:{
        olmap
      }
    }
    </script>
    
    <style>
    /* #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    } */
    
    #app {
      height: 100%;
    }
    *{padding:0; margin:0;}
    html,body{
      height: 100%;
    }
    </style>

目录结构：

![20191007181907933.png][]

## 3，运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

注意：有时候加载出来的地图只显示一半，此时只需要将APP.vue中的app样式中的text-align属性设为‘left’即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

# 二，谷歌影像图 #

// Google影像地图
              source: new XYZ({
                url:
                  "http://mt3.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"
              })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

如果坐标系不匹配的话，可以试一下天地图影像图（**匹配4326**）：

source: new XYZ({
                url:
                  "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf",
              })

# 三，天地图 #

// 天地图地形图
              source: new XYZ({
                url:
                  "http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf"
              })
    
    // 天地图影像图
              source: new XYZ({
                url:
                  "http://t3.tianditu.com/DataServer?T=img_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}"
              })
    
    // 天地图标注
              source: new XYZ({
                url:
                  "http://t4.tianditu.com/DataServer?T=cva_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}"
              })
    
    // 天地图底图
              source: new XYZ({
                url:
                  "http://t4.tianditu.com/DataServer?T=vec_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}"
              })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]

还有更多底图加载，见：[https://www.cnblogs.com/asdlijian/p/13518837.html][https_www.cnblogs.com_asdlijian_p_13518837.html]

修改地图层级方法：

zoomIn() {
          this.map.getView().setZoom(this.map.getView().getZoom() + 1);
        },
     zoomOut() {
          this.map.getView().setZoom(this.map.getView().getZoom() - 1);
        }

[20191007181907933.png]: /images/20210725/d5a5824caf1b49f4a68506ddbd36614f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/6ddeddd6d9eb40019931d09f17dcb5a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/005a6e14e1a849d2a12884b893bd5178.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/f4200702874d49c8a69b3e9ef1d89daa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200826131633841.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210318162244657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2021031816244421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: /images/20210725/1a5b534d7b7c4eeab50b6e2cd4c8febf.png
[https_www.cnblogs.com_asdlijian_p_13518837.html]: https://www.cnblogs.com/asdlijian/p/13518837.html