当前位置: 首页 > news >正文

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

文章目录

  • 1. 介绍
  • 2. 加载底图
    • 2.1 加载默认OSM地图
    • 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内容:

<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):

<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>

效果图:

在这里插入图片描述

http://www.dtcms.com/a/268229.html

相关文章:

  • Modbus_TCP_V5 新功能
  • 【机器学习深度学习】模型微调时的4大基础评估指标(1)
  • [netty5: WebSocketServerHandshaker WebSocketServerHandshakerFactory]-源码分析
  • 机器学习绪论
  • LeetCode 100题(1)(10题)
  • 线性代数--AI数学基础复习
  • 暑假算法日记第二天
  • DTW模版匹配:弹性对齐的时间序列相似度度量算法
  • 基于联合国国家指标 2025数据(UN Countries Metrics 2025: HDI, GDP, POP, AREA)的综合可视化分析
  • PDF转换工具,即开即用
  • BUUCTF在线评测-练习场-WebCTF习题[GXYCTF2019]BabyUpload1-flag获取、解析
  • 微前端架构在嵌入式BI中的集成实践与性能优化
  • Redis存储Cookie实现爬虫保持登录 requests | selenium
  • Python: 正则表达式
  • 树的知识点整理
  • CentOS6的“ifupdown“与Debian的“ifupdown“有什么不同? 笔记250706
  • jxWebUI--web组件说明
  • 深入解析 Kafka Broker 如何管理分片与副本
  • Flowith,有一种Agent叫无限
  • 零成本搭建浏览器远程Linux桌面:Ubuntu/Debian方案全解析
  • Windows部署本地照片管理Immich
  • Mysql 数据库结构优化
  • 工业相机和镜头
  • 前端开发常见问题(从布局到性能优化)
  • axios笔记
  • debian及衍生发行版apt包管理常见操作
  • 从前端转nest.js开发的学习路线
  • 【系统分析师】2023年真题:论文及解题思路
  • Leet code每日一题
  • python库 dateutil 库的各种案例的使用详解