Vue+Openlayers加载OSM、加载天地图

文章目录

  • [1. 介绍](#1. 介绍)
  • [2. 加载底图](#2. 加载底图)
    • [2.1 加载默认OSM地图](#2.1 加载默认OSM地图)
    • [2.2 加载天地图](#2.2 加载天地图)

1. 介绍

Openlayers官网:https://openlayers.org/

安裝依赖:npm i ol

2. 加载底图

参考博客:

vue+openlayers环境配置:https://blog.csdn.net/cuclife/article/details/126195754

加载天地图:https://blog.csdn.net/weixin_43390116/article/details/122326847

2.1 加载默认OSM地图

主要的HomeView.vue内容:

html 复制代码
<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";

export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new Tile({
            source: new OSM({
              wrapX: true,
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [114.064839, 22.548857],
          zoom: 8,
        }),
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
<style scoped>
.home,
#map {
  height: 100%;
  width: 100%;
}
</style>

需确保网络通畅可以访问OSM。

效果图:

2.2 加载天地图

HomeView.vue主要内容(需要更换token):

javascript 复制代码
<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { defaults as Defaults } from "ol/control.js";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      let token = "xxxx换成自己申请的天地图tokenxxxx";
      let url_vec = `http://t4.tianditu.com/DataServer?T=vec_w&tk=${token}&x={x}&y={y}&l={z}`;
      let url_cav = `http://t4.tianditu.com/DataServer?T=cva_w&tk=${token}&x={x}&y={y}&l={z}`;
      var source = new XYZ({
        url: url_vec,
      });
      var tileLayer = new TileLayer({
        title: "矢量图层",
        source,
      });
      var sourceCav = new XYZ({
        url: url_cav,
      });
      var tileLayerCav = new TileLayer({
        title: "标注图层",
        source: sourceCav,
      });

      this.map = new Map({
        target: "map",
        layers: [tileLayer, tileLayerCav],
        view: new View({
          projection: "EPSG:4326",
          center: [118.91, 32.1],
          zoom: 14,
          maxZoom: 18,
          minZoom: 1,
        }),
        //不显示地图自带控件(左上角的加号、减号)
        controls: new Defaults({
          zoom: false,
          rotate: false,
        }),
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
<style scoped>
.home,
#map {
  height: 100%;
  width: 100%;
}
</style>

效果图:

相关推荐
加减法原则6 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
天若有情6736 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
草巾冒小子7 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
武昌库里写JAVA10 小时前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
lalalalalalalala12 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy12 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
久爱@勿忘12 小时前
第二章:创建登录页面
前端·vue.js·elementplus
Jinxiansen021112 小时前
Vue 3 中父子组件双向绑定的 4 种方式
javascript·vue.js·ecmascript
木依12 小时前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui