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>

效果图:

相关推荐
前端小巷子23 分钟前
Vue 2 渲染链路剖析
前端·vue.js·面试
宋辰月2 小时前
Vue2的进阶Vue3
前端·javascript·vue.js
飞翔的佩奇9 小时前
基于SpringBoot+MyBatis+MySQL+VUE实现的经方药食两用服务平台管理系统(附源码+数据库+毕业论文+部署教程+配套软件)
数据库·vue.js·spring boot·mysql·毕业设计·mybatis·经方药食两用平台
故事与九12 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
桃桃乌龙_952718 小时前
vue-demi打通pnpm替换npm导致的pinia使用问题
前端·vue.js
Linsk18 小时前
前端开发:不处理浏览器兼容性,才是最佳的浏览器兼容性处理方式
前端·vue.js·前端工程化
jqq66618 小时前
Vue3脚手架实现(十、补之前配置)
前端·javascript·vue.js
一只小风华~20 小时前
JavaScript 定时器
开发语言·前端·javascript·vue.js·web
Chase_______20 小时前
JavaWeb笔记2-JavaScript&Vue&Ajax
开发语言·javascript·vue.js
随便起的名字也被占用1 天前
leaflet中绘制轨迹线的大量轨迹点,解决大量 marker 绑定 tooltip 同时显示导致的性能问题
前端·javascript·vue.js·leaflet