目录

一，OSM街道图 

1，安装ol

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

3，运行结果

二，谷歌影像图

三，天地图地形图

---

 在线预览：

WebGIS之家WebGIS之家,openlayers示例源码，cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生https://www.webgishome.com/preview?id=49&example_name=TianDiTu&title=%E5%A4%A9%E5%9C%B0%E5%9B%BE%E5%9C%A8%E7%BA%BF%E5%BA%95%E5%9B%BE

一，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'

import XYZ from "ol/source/XYZ";

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>

目录结构：

3，运行结果

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

二，谷歌影像图

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

如果坐标系不匹配的话，可以试一下天地图影像图（匹配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}"
          })

还有更多底图加载，见：openlayer添加底图服务（街道图，卫星图，地形图） - mangata - 博客园

修改地图层级方法：

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

暗黑色底图：

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>

<script>
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";

export default {
  data() {
    return {
      map: {},
    };
  },
  mounted() {
    this.initMap(); //初始化地图方法
  },
  methods: {
    //初始化地图
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [108.522097, 37.272848],
          zoom: 4.7,
        }),
      });
    },
  },
};
</script>