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>

效果图:

相关推荐
摸鱼一级选手1 小时前
uni-app 常用钩子函数:从场景到实战,掌握开发核心
前端·vue.js·uni-app
阑梦清川2 小时前
今日分享---关于tiptap背后的思考和精经历
vue.js·后端
砂糖橘加盐2 小时前
vapor 性能测试和基本原理浅析
前端·javascript·vue.js
睡美人的小仙女12713 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
喔烨鸭14 小时前
前后端分离情况下,将本地vue项目和Laravel项目以及mysql放到自己的云服务器
vue.js·mysql·laravel
小只笨笨狗~16 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
weixin_4903543416 小时前
Vue设计与实现
前端·javascript·vue.js
人间观察员18 小时前
如何在 Vue 项目的 template 中使用 JSX
前端·javascript·vue.js
雪中何以赠君别19 小时前
Vue 2 与 Vue 3 双向绑定 (v-model) 区别详解
前端·javascript·vue.js
林太白19 小时前
Vue3-ElementPlus使用
前端·javascript·vue.js